Hello all,
I wanted to make a typing test website with ReactJS and JavaScript. So I looked around for good typing test website and one website came to mind monkeytype. it's quite popular for the minimal look. So I thought why not make clone of it.
After adding features and polishing the logic I thought about switching to TypeScript for experiment.
First I kept tsconfig.json settings to very loose and then tried tightening them step by step.
It was smooth three phase process (suggested by Mike North in Frontend Masters) for converting existing JavaScript codebase to TypeScript.
After 2 weeks of writing and refactoring, typing-test is ready to use for everyone.
If anyone wants to add new theme to typing-test take a look at this.
All contributions are welcomed :)
Features:
- Colorful multiple themes support
- default
- mkbhd
- coral
- ocean
- azure
- forest
- 4 time limits (15s, 30s, 45s, 60s)
- Smooth cursor
- Instant Tab restart
- Previous word correction
Screenshot:
Top comments (9)
I see you are still using class components. May I inquire why you haven't switched to function components and hooks?
function components requires the extra hooks like useEffect and useState. I think class component is a good, clean and concise implementation of all of them. Also it code easy to write and clean to read.
EDIT: although I can convert dumb components into function components. but that's work for another day XD
Thanks for indulging my curiosity. I would probably disagree on class components being more concise than function components. Functional components require a different mental model, which does not come easy if you are used to class components.
Yes, I agree on mental model thing. that's why I'm thinking about doing my next project with function components only. So that I can have both mental models.
About being concise it's better to have one nested state dictionary then tens of different state floating around. Function components works better when you have have 2-3 states only :)
If you have more/complex states, you should probably extract it and/or use
useReducerto make it easier to understand.hmm I didn't know about that. I'll definitely look into
useReducer. Thanks for suggestion :)Finally re wrote the whole app in functional approach with redux :)
I learned so much from this post, thanks for sharing! I've also been exploring the Monkey Type tool, and it's proving to be a game-changer for my daily tasks.
I want to get my personal website developed for typing tutorials. Can you help me ? My Whasapp Number is +919711000010