Earlier this year I was able to use my some personal reinvestment time at work to study up on react. I took an online training course (Wes Bos anyone?)
I enjoyed the time to focus on learning the material presented. I am also aware that unless I use the information to build something on my own I don’t retain it!
As I was finishing the training I was thinking about what To-do app I should build. That day happened to be a day when there were three consecutive new employee announcements. With 10up being a 200+ company and everyone working remotely, it’s hard to know everyone. I also thought about how hard it is for new employees to get to know so many coworkers at once remotely! We know our pod and those we cross paths with on our projects and our directors, but other than that, it can be difficult. To make a long story short, I thought up a little 10up name game app!
This app loads the team as listed on the public 10up website and with some gamification, helps us put names to faces.
How to play
Start by finding yourself in the team, and clicking yourself. This will set you as the player (a poor and lazy way to authenticate a player, but it works until I have more time). Then below the grid of beautiful faces, select the group you want to focus on for the quiz. This will update the grid to show you all the team members. Then click the giant button to start the quiz.
The quiz will present you with 1 name and 4 people. Select the match and get ready for the next question. Incorrect answers give you another chance to select the correct person, in this way the quiz teaches you people you don’t know. It’s also a good opportunity to use deduction, you might not know the person being asked about but you’ll likely know someone in the list. I loved multiple choice tests in school!
The leaderboard displays those who have answered all questions in the first click. Note that the leaderboard is specific to each team selection, so there’s a set of high scores for the Leadership team as well as for the Engineer team and so forth. Also note, that you must select yourself in the grid before starting a quiz in order to be on the leaderboard (otherwise it’s anonymous). The grid will change as you select different groups, so be sure to select yourself first if you’re wanting a quiz on a group which you are not part of.
Play Who is 10up!
Mad karma awaits for those who top the leaderboard. Enjoy, and thank you for playing!
Some technical details
This was built using create-react-app. I’m only importing a couple other libraries to use: axios, cheerio, firebase.
I was able to practice setting up components such as the PersonCard, Leaderboard, Score and the Quiz itself. I learned about passing needed data down as props as well as callback functions for interactivity. Was able to figure out managing state and even async third party connections. It’s using axios and cheerio to connect and scrape the team data from our website – I tried finding/using an available API endpoint but ran into cors issues (maybe I’ll sort that out later) and went the scraping route rather than deal with authentication et cetera. Then for the leaderboard, its using a simple firebase implementation to store the data.
For those of you experienced with react, I’d love you to look into the code and let me know what I can do better! And if you want to try your hand with anything, PRs are of course very welcome. All in all a very educational exercise for myself (as far as react as well as getting to know more of my coworkers 😀). Enjoy!