TYP-Olympics

A hacker speed-typing playground for Faster - Stronger - Higher Developers

Comment

Inspiration

The project is based on the theme of today's hackathon Winter-Hacklympics. So it revolves around sports and olympic games. What better way for hackers to celebrate hacker-olympics (HackLympics) at home than by speed-typing on your own laptop or at your workspace, as it can be a great warm-up exercise for developers on a cold winter-day to get their fingers up and running. The project is aimed at testing the hacker's typing skills.

What it does

The project is aimed at testing the hacker's typing skills. With a simple and authentic UI aimed at providing ease of navigation for the user, the interface notes the number of words, characters typed and also highlights the users mistakes if the typed string doesn't match the actual string, and all of this in real time. Every user gets a maximum of one minute to type and the scores are evaluated and displayed as soon as the timer runs out. The user gets a new paragraph/text every time he/she finishes one round of speed typing, or refreshes the website.

How I built it

The project is created using ReactJS and all the logic is developed using javascript. The paragraphs/text provided in the left text area have been taken from practicetest website.

Challenges I ran into

  1. setting up and updating states in real time.
  2. Choice of data structures
  3. Formulating the logic to count the total words, characters and mistakes committed in real time and displaying it on the screen.

Accomplishments that I'm proud of

I am proud to hack over the weekend, by developing a small project which is a good sport for developers all over the world. I personally enjoy participating in speed-typing tests with developers from over the world whenever I am bored at collge lab lectures by logging into TypeRacer in the middle of the lecture. So I was inspired by this amazing playground and decided that I could build my own playground over the weekend for MLH's WinterHackLympics.

What I learned

I leant about React Hooks, and improved my understanding of various ReactJS components, like class based and functional components and explored various methods in javascript to make the app a reality.

What's next for TYP-Olympics

  1. Highlighting the errors in red color so that it can alert the user of his/her errors while typing.
  2. Creating rooms for developers to participate and compete in type-contests.

You can try the demo here TYP-Olymics

Share this project:

Updates