UI/UX focused scouting app

Competition Scouting
1

frc-scouting
(sorry for the uncreative name)

Yes, yes I know what you’re thinking. “Great, another team made a scouting app and is dying for everyone to use it”
I know, I can feel your skepticism

I made this app for a few reasons:

  1. I didn’t know it had been done multiple times over
  2. I had just modified the team’s app from the previous year and it was god awful
    to maintain that code!
  3. I scouted too
    and figured out what some of the most annoying parts were and what features would be real handy
  4. I love to design pretty UIs

Alright I now to what actually matters:** WHAT DOES IT DO?**

Features:

  1. Automatic team selection: If you’re a scouter and that doesn’t get you drooling, I honestly don’t know what will. picture

  2. Intuitive form: You know all those apps that are super customizable? Chances are they are a bunch of number and toggle inputs. I chose to make a much more intuitive form. In essence, the form is the field. You click buttons on the field that represent places where the bots interact. picture

  3. Table data viewing and fancy prematch view: Yeah, sometimes what you really need to see is a table of the data. I have that. Oh, you want something really neat and useful for strategizing? I got you covered. We have a very useful prematch view that shows all the stats you need of all the teams competing in a match. Great for strategizing!

Check out an example here! Don’t forget to click on the window to load the data!

  1. Local run app with a Github Pages client: I’m personally proud of this one. A problem I encountered was that the app runs locally, so only the 6 machines connected in the bleachers could view the data.

The solution is that there is a Github Pages version of the app that’s synced every 10 mins with the local one if the local host machine has internet access. That way, anyone can view the data on whatever machine they want! See more about that here

So I hope by now I’ve convinced you that this is a cool app.
(If not, that’s cool. It’s your life man)

You must be wondering how do we actually use it?
This post is already long enough, so I will redirect you to the github page for that!

How’s it made?

If you’re really reading this part, then I welcome you, fellow nerd! I’ve jumped around a fair amount of web tech, found things I like, things I really don’t (I’m looking at you, PHP!) and I’ve pretty much settled on full stack javascript. Don’t give me that look, I don’t wanna hear you think it’s messy!

Seriously though, I really enjoyed making this app with Angular and Meteor. I built this thing by myself (as junior, not professional developer!) mostly in about a week! Meteor handles virtually all of the backend without any sort of headaches and Angular manages the UI in a way that’s fast and easy to maintain.

That being said, I built this thing alone. It’s not perfect. But if you want to take a look through the code (apologies for lack of comments) feel free and let me know what you think.

You can contact me and give me any help or yell at me for my bugs at gundlachcallum@gmail.com
The code is at https://github.com/cgund98/frc-scouting

**EDIT: ** I’m a senior this year so SOMEONE PLS HELP ME AND TAKE OVER THE PROJECT

2

Your emphasis on UI / UX is definitely admirable, and in scouting making the data entry as clear and unambiguous as possible helps produce useful data.

I can’t help but notice the example site doesn’t work due to CORS headers though, and am wondering how you worked around this at competition. Keep up the good work!

3

Mind linking the extension youre using? The first one I got from searching only killed the twitch stream i was watching and didnt actually change anything on the site.

4

CORS shouldn’t be a problem. I’m surprised this works with the Chrome addon that disables CORS. The header should be “X-TBA-Auth-Key” not “X-TBA-Auth_Key” (dash vs. underscore).

5

My friend, you have saved me from lots of headache. I can’t believe I was that dumb and that was the problem the whole time. Thanks!

6

Surprising you were getting data back with the wrong auth header. You were probably getting lucking and hitting some cache layer along the way, which doesn’t check auth :rolleyes:

7