Skip to content

Latest commit

 

History

History
69 lines (41 loc) · 3.73 KB

README.md

File metadata and controls

69 lines (41 loc) · 3.73 KB
Raw

Typing Master

A simple application for improving typing skills. This application gives users the ability to submit blocks of text in any format and then practice typing those blocks and track their progress.

Installation

  1. git clone

  2. npm install

  3. npm start

Screenshots

Main Screen

Typing Exercise

Typing Exercise

Main Screen

Technologies

  • ReactJS - React is a popular framework for handling the view layer of an application.
  • Create React App - Boilerplate React project provided by Facebook that includes deployment scripts for testing locally and deploying to Production
  • React Router - Library built with React that handles browser routing and integrates well with other React projects.
  • Material UI - Library that implements Google's Material Design principles in React components.

Approach

My approach involved a few major steps.

Step 1

Figure out how to track a user's typing and give validate their answers. I did this using just vanilla javascript and html/css. No backend or framework involved.

Step 2

Implement a simple authentication scheme using React and React Router. This is a requirement for the project so I decided that if I couldnt figure it out quickly, I should just scrap React completely. Once I realized I could do it, I decided to stick with React and see what happened.

Step 3

Convert my old vanilla JS/HTML/CSS typing area into the React components. This part was defintely the hardest. I was still getting used to React and how state works and I had to convert some complicated logic into that state and props when I didn't even really understand what everything meant yet.

Step 4

Styles! The most fun part, cleaning up code to make it cleaner and more readable and improving the styling of my application through CSS.

User Stories

  • Sign Up - As a user I want to be able to create an account so that I can track my progress
  • Sign In - As a user I want to be able to sign in so that I can acccess the site
  • Change Password - As a user I want to be able to change my password so that I can keep my account secure
  • Sign Out - As a user I want to be able to sign out of my account so that other people cannot access my account from the same browser session
  • Add Exercise - As a user I want to be able to add blocks of text so that I can practice typing them
  • Update Exercise - As a user I want to be able to update the exercises I have submitted so that I can fix typos
  • Delete Exercise - As a user I want to be able to remove exercises in case I dont want to use them anymore
  • See all exercises - As a user I want to be able to see all available exercises so that I can pick which one I want to practice

Wireframes

Unsolved Problems

I really wanted to somehow track a user's progress better. Currently the only thing the user has is the leaderboard so they can see where they stack up, but if I had more time I'd like a personalized view of their statistics so they can see if they are improving over time.