Typr is a full-stack web application designed for new developers to improve their typing skills. User Authentication, Multiplayer, and Statistics included.

Connor Mullin

Last update: May 12, 2022

Overview

Typr

Typr is a full-stack web application designed for new developers to improve their typing skills. It includes Javascript, Ruby and Python typing prompts with contextual highlighting using PrismJS. Users can sign up with our Auth0 authentication in order to track user statistics. There is also a Multiplayer mode where users can race, this was implemented with socketIO. This project was built with React, Express, Node, and MongoDB.

Deployment

Try our site here: https://code-typr.netlify.app/ (Please give the heroku backend a few seconds to start up, it is on the free plan)

App in Action

Logging in with Auth0

WPM, Accuracy %, and Score appear once prompt is complete and are they are saved to mongoDB

Track Improvements Over Time

10 Servers to Select, will activate once 4 users have joined (this can be done from 4 windows for testing purposes)

Users names will appear over their avatar in multiplayer

Features

User Authentication
Practice Mode with Javascript, Ruby, and Python Typing Prompts
Onscreen Keyboard as Visual Aid
Unique Display that Highlights Errrors and Doesn't Require Backspacing
Clean UI
Syntax Highlighting
User Stats and Progression
Multiplayer Racing Mode (Websockets)
High Scores Page

Installation

If you would like to deploy locally:

clone the project to a local folder
run 'npm install' inside both the client folder and the server folder
run 'npm start' in separate terminals from the server folder and then the client folder
navigate to localhost:3000 to test the app

Contribute

Issue Tracker: https://github.com/CJM1994/Typr/issues
Source Code: https://github.com/CJM1994/Typr

Comments

Multiplayer/serve prompt

Client sends websocket messages to ws server when a correct character is typed and when a prompt is complete. API file holds functions to pass to the prompt component. The VSDisplay component will be for displaying the return message from the websocket server. (the message from the websocket server will have how far along each player is and if any players are finished so that we can update the state(s) on VSDisplay.

opened by CJM1994 0
Socketio

Added a multiplayer component as a starting point and some backend logic for socketio. Also added a client connector hook to create socket connections.

opened by CJM1994 0

DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

Jan 2, 2023

The CCF Backstage Plugin is a tool to estimate energy use (kilowatt-hours) and carbon emissions (metric tons CO2e) from public cloud usage that is meant to be consumed as a plugin into a Backstage application

CCF Backstage Plugin Understand how your cloud usage impacts our environment and what you can do about it. This plugin brings the functionallity of th

Nov 6, 2022

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

p5.js Welcome! 👋 👋🏿👋🏽👋🏻👋🏾👋🏼 p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for a

Jan 1, 2023

a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Dec 19, 2022

Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Jan 4, 2023

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

Dec 28, 2022

Typr is a full-stack web application designed for new developers to improve their typing skills. User Authentication, Multiplayer, and Statistics included.

Related tags

Overview

Typr

Deployment

App in Action

Features

Installation

Contribute

You might also like...

DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

The CCF Backstage Plugin is a tool to estimate energy use (kilowatt-hours) and carbon emissions (metric tons CO2e) from public cloud usage that is meant to be consumed as a plugin into a Backstage application

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

a graph visualization library using web workers and jQuery

Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

Chart image and QR code web API

Beautiful and interactive javascript charts for Java-based web applications.

A renderer agnostic two-dimensional drawing api for the web.

Comments

Multiplayer/serve prompt

Socketio

Owner

Connor Mullin

A TypeScript library designed to help with making Beat Saber modcharts

Mockpay Checkout for developers to mock payment gateway

Simple yet flexible JavaScript charting for designers & developers

A GitHub Action to generate reports that contain all the SSH keys, personal access tokens, GitHub App installations, deploy keys and their respective permissions authorized against a GitHub organization.

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

🌀 The Javacript framework for creating a portal to your data. Perfect for a single dataset or a full catalog.

A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

CyberGraph is a 3D-graph based, user based social connection explorer

Automatic chart generator from user input using CharGPT.

Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.