vimark1 / typist Goto Github PK

View Code? Open in Web Editor NEW

41.0 4.0 45.0 4.7 MB

Web app practice and learn touch-typing.

Home Page: https://typistapp.netlify.app

License: MIT License

JavaScript 0.67% HTML 2.83% TypeScript 90.54% Handlebars 1.28% SCSS 4.68%

typing typing-skills typing-trainer typing-practice react firebase

typist's Introduction

Typist

Touch typing practice web app in which you type short words and aim to achieve better scores.

Demo: https://typistapp.netlify.app/

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You need at least node v8.

Installing

Getting the app up and running is pretty simple.

The app uses Firebase for authentication, bundled in the source is a development Firebase version, so you don't need to setup firebase separately.

To get the app up and running, just run npm install and npm start

$ npm install
$ npm start

The console should provide a link to the running app

Running the tests

All the automated tests for the app runs with jest, to run all tests use:

$ npm test

Contributing

Contributions welcome; Please submit all pull requests the against master branch. Or create an issue with a new feature!

typist's People

Contributors

Stargazers

Watchers

Forkers

kaivosukeltaja warcops smkamranqadri shefali163 kamaldlk shrutibhutaiya zidail joshdev1205 gitter-badger jmoseley thisuri090 defart leosuncin aminubishir danibonilha dnivra26 thulakshimadu katfrog jonathanjwatson nobuti ghousahmed konsvasi sadjunky rahul1995 danielcn ahmadatallah clayreimann zilehuda livzz arjunkesava iblacker verma-rajesh dadams89 solang3 natstar93 falafel72 theharshitgarg basilicojp atrievel cyl1234day decentn2madness de8dp00l joeysoph m-thulee

typist's Issues

Move files to typescript

Work on typescript setup has started on #103. This task is to capture moving all files to typescript

change ‘Sign in’ and ‘Sign up’ on the UI to: ‘Login’ and ‘Register’

‘Sign In’ and ‘Sign Up’ are quite close. The buttons also look too similar. it’s pretty easy for users to get confused.

create a user profile page

can see previous scores

Implement react router

depends on #6

User preferences

Move the nº of words feature into a new preferences route.
Save n of words preference so that next time user comes back it will remember

Accepting contributions to all UI/Design enhancements

We've just put together the app without much thought on Design/UX.
Accepting any improvement PRs in that area, Thanks!

Stats: display a number of total sessions completed by the user

Add info to profile page, see related #77

offer user option to see how many words are presented

Add typescript

Basic typescript tooling for the project

Stats: Display on Profile the user's top, average and median score

Render user's time top, average and median score

There should be dropdown to allow the user to see top, average and median from a time range:

Last 24 hours
Last month
All time

User sessions are stored in

typist/src/Main/index.js

Lines 187 to 218 in 1f8c297

    
           async saveScore() { 
        
             try { 
        
               const { user } = this.props; 
        
               if (!user.uid) return this.setState({ authError: true }); 
        
               this.setState({ authError: false, error: '' }); 
        
               const { score } = this.state; 
        
               // a string in the format 2018-10-26 
        
               const sessionId = (new Date()).toISOString().slice(0,10); 
        
               // store record in Firebase 
        
               await firebase 
        
                 .database() 
        
                 .ref('user-score') 
        
                 .child(user.uid) 
        
                 .child(sessionId) 
        
                 .push({ 
        
                   score, 
        
                   timestamp: firebase.database.ServerValue.TIMESTAMP 
        
                 }); 
        
               this.updateScoreboard(user, score) 
        
             } catch (err) { 
        
               console.error(err); 
        
               this.setState({ 
        
                 error: 
        
                   'Something went wrong while saving score, please contact support!' 
        
               }); 
        
             } 
        
           }

Increment/Decrement button getting pushed down as new lines are created

It is quite annoying when you are adding more words and the button gets pushed down.

My solution would be fixing the buttons on the bottom of the page.

I am creating this issue for a PR I am going to do.

Missing google login signup image

Desktop App

We need to make it desktop app too, for that we have two options.

Chrome Webstore.
Electron using nativefier.

Using development build of Firebase SDK warning

When not in development, we shouldn't see the warning below:

Hey @clayreimann and anyone else who's interested
I've just been thinking about getting a domain. I have got a few in mind. Do you?
Also, to help pay for the domain, I'd be keen to add some ads to the app to see how it performs and wether it could be viable, does that sound cool?

Travis CI is not running on new PRs

for some reason the PRs created are not triggering a build on Travis CI

create a readme file

enable i18next-browser-languageDetector

Once #48 is completed. Enable this i18next plugin
https://github.com/i18next/i18next-browser-languageDetector

create a release number and tag when `npm run deploy`

npm run deploy should:

publish the app to the gh-pages branch
create a new tag for the release
add tag somewhere in the app to say v0.0.1

Add tslint to the project

With the work on #106 - eslint was removed, so we need to replace with tslint and add it to the build chain

Netlify

We’ve been using GitHub pages to host the main app, but I’m keen to host it on netlify as we’d eventually need custom domain https

Convert css to scss files

This task should be straight forward

Spacebar increases/decreases number of words

If we increase/decrease the number of words using mouse, and then continue typing.
If the button is still in focus, space activates the onclick() event and number of words are affected.

Add google analytics code.

We need to add google analytics code for some analytics.

Add/Remove word buttons break when after 100 words

Issue created for a pull request that I will be submitting

As a user I want to add a username

On the signup process or in an area, designated to the profile.
A user should be able to enter a username, this will be used later for leaderboard and etc.

add i18n support

use jsdelivr cdn

currently getting 404s on node_modules

Add Redux to the app

Introduce redux to the app

Try keeping the PR as small as possible, I will review and merge fairly promptly, this is to minimise the work already happening on other branches.

Backspace does not un-highlight letters

Implement Google login

In #22 we merged Firebase authentication. It currently only works with an email/password combination.

This issue is about introducing some other login options, but particularly Google.

Deploy PRs to a preview app

Look for Apps that will deploy the code to an environment for the pull requests created.

This will help people to jump in to the environment to test new features and provide feedback

For example: https://devcenter.heroku.com/articles/github-integration-review-apps

Alternatives to Firebase, PoC, ideas

I like Firebase for this project, because it allows us get away with not using a server, yet, at the same time, this project is becoming more and more dependent on it. I am keen to find any alternatives that we can look into.

I am interested in implementing a PoC on using blockchain. Perhaps a good start can be following the approach described on this article
https://medium.com/@takleakshar/how-to-build-a-decentralized-full-stack-app-in-ethereum-and-react-42e63d45a208

Not compatible with Vimium on Chrome

I have Vimium installed on Chrome, for which I can control the browser without touching of trackpad/mouse.

It seems that typist is not compatible with vimium, because keys are already occupied as hotkeys.

Cheers.

integrate with Firebase

add firebase login
store scores for logged in user in Firebase

Score Leaderboard

A score leaderboard showing top 10 scores. For now three basic info need to be shown, rank, name or email, and score.

We will need to write firebase cloud function on every score update to analysis if the score is in between the highest and lowest score at that time.

For that, we need to maintain a node top-score, which will have three child node, highest score, lowest score and top-10 score.

	async saveScore() {
	try {
	const { user } = this.props;
	if (!user.uid) return this.setState({ authError: true });
	this.setState({ authError: false, error: '' });

	const { score } = this.state;

	// a string in the format 2018-10-26
	const sessionId = (new Date()).toISOString().slice(0,10);

	// store record in Firebase
	await firebase
	.database()
	.ref('user-score')
	.child(user.uid)
	.child(sessionId)
	.push({
	score,
	timestamp: firebase.database.ServerValue.TIMESTAMP
	});

	this.updateScoreboard(user, score)

	} catch (err) {
	console.error(err);
	this.setState({
	error:
	'Something went wrong while saving score, please contact support!'
	});
	}
	}