Typing test website build with React

Overview

typing-test

Deployment CI

typing-test(test)

NOTE: This is my recreation of already existing monkeytype

This site is currently live: Visit Here

How to run locally

git clone https://github.com/salmannotkhan/typing-test.git
cd typing-test
npm install
npm start     # to start local server at `localhost:3000`
npm run build # to create production build run

Got new theme ideas?

I'll be happy to merge your theme ideas into typing-test. To add new theme:

  1. Add theme colors into src/stylesheets/themes.scss in following format:
.theme-name {
	--bg-color: <background-color here> !important;
	--font-color: <font-color here> !important;
	--hl-color: <highlight-color here> !important;
	--fg-color: <forground-color here> !important;
}

Note:
highlight-color is used for caret, wrong characters, timer, selected and onhover colors
forground-color is used for correctly typed characters
Using hex codes for colors is recommended

  1. Add theme name into src/components/Header.tsx in options:
const options: Options = {
	time: [15, 30, 45, 60],
	theme: ["default", "mkbhd", "coral", "ocean", "azure", "forest", <theme-name>],
};

Important:
theme-name in themes.scss and Header.tsx should always match otherwise themes won't work

  1. Make a pull request

  2. If it's good enough to merge, I'll merge it

Comments
  • Option for self-hosting, docker deployment

    Option for self-hosting, docker deployment

    Hi! I am making this small PR to provide users options to self-host your typing-test app. Docker 🐳 will survive for the long run and is a much much better option to run in production. Please check this PR and if you like it let me know.

    I am so pumped for future contributions to this project, really liked the tool, awesome work buddy.

    I have provided a sample docker-run command in the README.md and also a docker-compose.yaml file in the root of the repo, whichever the user may find easy.

    opened by nooobcoder 14
  • Added wordlist for numbers only

    Added wordlist for numbers only

    Idea: A numbers only mode

    Implementation: There can be infinitely cleaner methods to create this so it can be completely random but for convenience sake I made a list of 500+ numbers using the following script and put it in a .json

    let arr = [];
    for(let i = 0; i < 500; i++ ) {
    	const max = 6;
    	const length = Math.floor(Math.random() * max)
    	const randomInt = Math.floor(Math.random() * 1000000 * length);
    	if( randomInt !== 0 ){
    		arr.push(`${randomInt}`)	
    	}else{
    		i = i - 1;
    	}
    }
    console.log(arr);
    

    Limitations: The list is limited to only 500 numbers

    Future Ideas: Either directly implement the code into the site or create an improved list with more numbers

    opened by SiddhantMadhur 13
  • Convert to hook

    Convert to hook

    Is your feature request related to a problem? Please describe. My feature request is not related to a problem.

    Describe the solution you'd like I really like your project! I was wondering if there would be a possibility of converting the project to use hooks and reducer instead of class componentes.

    Describe alternatives you've considered I´ve already tryed to convert it but had no luck.

    enhancement 
    opened by faustinozanetto 10
  • Added new theme:

    Added new theme: "Amethyst"

    Created a new purple based theme:

    Here is the CSS for it:

    .amethyst {
    	--bg-color: #e2caea !important;
    	--font-color: #480c51 !important;
    	--hl-color: #ab395f !important;
    	--fg-color: #9774aa !important;
    }
    
    opened by SiddhantMadhur 2
  • New modes

    New modes

    Is your feature request related to a problem? Please describe. Currently, there are no choices if someone wants to type quotes or sentences

    Describe the solution you'd like It'll be great to have these new modes added

    opened by salmannotkhan 0
  • Go back to main page after typing test started

    Go back to main page after typing test started

    Hey @salmannotkhan

    I think the one thing I face while using typing test was that I couldn't leave the test environment then after finishing my test I found out that if I press tab then it restarts app so that i can leave with testing environment by pressing tab but that is an ugly way to leave the test environment.

    I think to adding something like button or X icon to leave test environment it would be a good UX improvement.

    What do you think about it ?

    opened by milan-rabara 0
  • Better results screen

    Better results screen

    The current result screen is so dull. It doesn't contain any visual elements. It would be great to have some visual touch on the result screen, like a graph or something.

    I think chart.js is a good idea for doing it, but I'm open to discussing other possible solutions.

    enhancement help wanted 
    opened by salmannotkhan 1
Owner
Salman Shaikh
Noob Python Developer
Salman Shaikh
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 74.2k Sep 30, 2022
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 269 Dec 24, 2021
Brief notes about React with Test Suites

React Camp Spec All ideas, tasks and some solutions was created during the watching "The Complete React Developer Course" by Andrew Mead and "React -

Dmytro Somliev 0 Dec 2, 2021
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Patricio Zavolinsky 194 May 30, 2022
Test-new-app - Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed

Luís Freitas 10 May 14, 2022
ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Saurav Dhakal 1 Jan 1, 2022
LensKart Website Built With React And MongoDB

LensKart where you will get the best lenses This project was bootstrapped with react,express, mongodb, tailwind, a part of bootstrap, swiper and other

Awal Hossain 1 Jan 1, 2022
React Static Website Starter Project

React Static Website Starter Project This repo is an example of a React static website. The project has the following features: ES6 code Babel v6 tran

null 5 Nov 22, 2021
This website is made using React.js and Bootstrap5, where anyone can take service from team. it's a fully responsive.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 1 Jan 19, 2022
Landing Page For Tv E-commerce Website

About Landing Page For A TV E-Commerce Website As An Instance Of A Template Visit The Website From Here MicroOne Usage As it is a React app, you must

Amine Ait Ouazghour 34 Aug 9, 2022
A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Agora.io Community 23 Sep 9, 2022
A next.js website that fetches random user data using axios

next.js random user using axios.get() example typescript by: UnusualAbsurd Live

UnusualAbsurd 1 Dec 17, 2021
A website that makes use of the specs API (glasses) methods. With a SAAS kind of feel to it

SpecsOn website ?? A website that makes use of the specs API (glasses ?? ) metho

null 3 Sep 8, 2022
Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Plasmic 2k Sep 27, 2022
Opinionated Fullstack React SWC toolkits featuring project generation, dev server, build production bundle, and common devtools.

react-swc-kits Opinionated Fullstack React SWC toolkits featuring project generation, dev server, build production bundle, and common devtools. Inspir

Antony Budianto 6 Aug 15, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Sep 22, 2022
Webpack-license-plugin: Manage Third-party License Compliance In Your Webpack Build

webpack-license-plugin Manage third-party license compliance in your webpack build Key Features • Installation • How to use • Available options • Exam

null 3 Nov 12, 2021
Component to build simple, flexible, and accessible toggle components

react-toggled ⚛️ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Kent C. Dodds 461 Jul 30, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 24, 2022