Inspiration
When given the prompt of gaming, the team began brainstorming ideas for a word-based game. We then decided that we wanted to create a new take on a typing game. We thought that sourcing content from Twitter would be an interesting twist and be a good technical challenge.
What it does
The game pulls data from a random Tweet and invites the user to copy it. The user's accuracy and WPM are dynamically tracked and displayed, and errors are highlighted.
How we built it
We used React and React-bootstrap components to build an interactive UI. The Tweet information is sourced from a JavaScript array of objects. The React app pulls a random item to display. The error highlighting and stats are generated with an NPM package called react-typing-game-hook, which can be found here: link
Challenges we ran into
We initially wanted to pull content directly from the Twitter API. However, we discovered that it is not possible to call the Twitter API through a React App. At that point, we did not have enough time to build a backend. We also wanted new tweets to load each time the user completed typing a tweet. We instead settled on the workaround of new tweets loading upon page refresh.
What we learned
We learned about React components, data types (e.g. state, props), and hooks. We also learned some effective strategies to collaborate on a Github project, such as creating a rule to require reviews and setting up automatic deployment to AWS. Lastly, we learned a lot about the Twitter API, Cross-Origin Resource Sharing, and how to use Postman.
What's next for Twitter Fingers
We would like to build a backend in NodeJS to pull data from the Twitter API. With that, we hope to allow the user to filter the tweets we source by user or hash tag. We would also like to implement authentication in order to save user stats. Lastly, we had an idea for a feature that would Tweet typing stats using the user's Twitter handle.
Log in or sign up for Devpost to join the conversation.