Keylearn - increase your typing speed

Keylearn is an web app designed to help you learn quick typing and to collect information about your progress towards achieving this goal.

🔗 CLICK TO SEE IT LIVE

Table of Contents

⚓General Informations

⚓Technologies

⚓Features

⚓Usage

⚓License

General Informations

Training with Keylearn consists of rewriting the displayed text as quickly as possible. Displayed text can be generated randomly from the base of english words or can be provided by the user. Each complated test is analyzed and then obtained results are saved to the database.

Features

• Account registration and login
• Creating, editing and removing profiles
• Collecting and displaying tests results
• Displaying statistics about complated tests and typed words and letters
• Auto difficulty adjustment for user provided texts based on results

Technologies

List of technologies used to build the app:

Database:

Mysql - open-source relational database management system.

Backend:

Laravel - web application framework with expressive, elegant syntax.

Frontend:

Vue - an approachable, performant and versatile framework for building web user interfaces.

Vuex - state management pattern + library for Vue.js applications.

Vue-router - expressive, configurable and convenient routing for Vue.js.

Vuetify - open source UI library with beautifully handcrafted Vue Components.

Vue-keypress - global keypress event handler component for Vue.js 2 applications.

Vue-chartjs - wrapper for Chart.js in Vue.

Axios - promise-based HTTP Client for node.js and the browser.

Howlerjs - audio library for the modern web.

Usage

Practice Typing

App generates text to type. User by pressing ENTER on the keyboard can start the test. Time starts when user starts typing.

Registration and login

To save practice results and statistics user has to create account and login.

Dashboard

When logged user has access to dashboard, where he can see collected results and statistics.

General Statistics

Tests History

Words Statistics

Managing Profiles

User can create, update, remove profiles. Each profile can have different settings.Collected data is separated for each profile. Currently used profile can be changed in any moment.

While creating profile user can set the test length and can choose if words should be generated randomly or if app should use words provided by user.

Build Setup

• Clone repository

  git clone https://github.com/rafJagCode/keylearn.git

• Install dependencies

  cd keylearn
  composer install
  npm install

• Create and edit .env file

  cp .env.example .env
  vim .env

• Run migrations

  php artisan migrate

• Seed db with set of words

  php artisan db:seed

• Build for development

  npm run dev

• Build for production

  npm run prod

• Serve at localhost:8000

  php artisan serve

License

MIT