A typing practice app for developers — write real code character by character,
with live semantic highlighting that shows you exactly what each token means
as you type it: keyword, variable, class, string, function, and more.
[imagen: CodetyperFront-use.png]
[imagen: codetyper flujo de programa.png]
[imagen: codetyper programin flow.jpg]
[imagen: codetyper-flow.jpg]
Most typing trainers give you words. CodeTyper gives you real code.
As you type, every character you complete lights up with its semantic color — just like your IDE — so your brain starts associating muscle memory with code structure automatically.
- ⌨️ Code-first typing trainer — practice real, useful snippets, not toy examples
- 🎨 Live semantic highlighting — colors update in real time as you type: keywords, strings, classes, functions, operators...
- ❌ Error detection — wrong character? It flashes red and waits. No skipping allowed.
- 📊 Session metrics — CPM, accuracy percentage, total errors, and time
- 🏆 Grading system — get rated S / A / B / C / D based on your accuracy
- 🗂️ Multi-language support — JavaScript, Python, TypeScript, SQL (more coming)
- 📚 Snippet library — curated snippets organized by language and difficulty
- 🔄 Repeat or continue — replay the same snippet or pick a new one after each session
| Layer | Technology |
|---|---|
| Framework | Next.js 16 with App Router |
| UI Library | React 19 |
| Styling | Tailwind CSS 3 |
| Tokenizer | Custom hand-written semantic tokenizer |
| Font | JetBrains Mono |
| State | React Hooks (useState, useEffect, useCallback) |
| Persistence | LocalStorage (session history) |
| Token Type | Color | Examples |
|---|---|---|
| 🟣 Keyword | #c792ea |
class, function, return, if |
| 🟡 Class name | #ffcb6b |
Animal, Usuario, MyComponent |
| 🔵 Identifier / Variable | #82aaff |
nombre, data, response |
| 🟠 String | #f78c6c |
"hello", 'world', `template` |
| 🟢 Number | #f78c6c |
42, 3.14, 0xFF |
| 🩵 Operator / Type | #89ddff |
===, =>, number, boolean |
| ⬜ Comment | #546e7a |
// comment, # comment |
| ⚪ Punctuation | #89ddff |
{, }, ;, (, ) |
# 1. Clone the repository
git clone git https://github.com/HEO-80/CodeTyper.git
cd codetyper
# 2. Install dependencies
npm install
# 3. Start the development server extra flow
npm run devOpen http://localhost:3000 in your browser and start typing. Or try the live demo → directly.
codetyper/
├── src/
│ └── app/
│ ├── page.js # Main app (menu, practice, results)
│ ├── layout.js # Root layout
│ └── globals.css # Global styles
├── img/ # Screenshots and assets
├── public/ # Static files
└── README.md
- Add 30+ snippets across all languages
- Rust, Go, C++ support
- Dark / light theme toggle
- Import your own code to practice
- Daily streak tracking
- Global leaderboard
- Keyboard sound effects
- Line-by-line mode for long snippets
- Add vocal dictator
- Correct accent diferent lenguages
- Add languajes idioms
- Improve dark mode to better letters and colors light
- Cuando esta registrado el usuario cambiar los datos de las practicas a las personalizadas, para que salgan las introducidas.
- Traduccion a otros idiomas, fundamental ingles y valorar algun otro.
Contributions, issues and feature requests are welcome!
Feel free to open a pull request or file an issue.
This project is licensed under the MIT License — see the LICENSE file for details.
Made with ⌨️ and ☕ by a developer who got tired of forgetting syntax