DevType isn't just another typing test.
It's a developer-first experience — built by a coder, for coders.
Practice typing actual code, not random paragraphs about sunsets.
██████╗ ███████╗██╗ ██╗████████╗██╗ ██╗██████╗ ███████╗
██╔══██╗██╔════╝██║ ██║╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔════╝
██║ ██║█████╗ ██║ ██║ ██║ ╚████╔╝ ██████╔╝█████╗
██║ ██║██╔══╝ ╚██╗ ██╔╝ ██║ ╚██╔╝ ██╔═══╝ ██╔══╝
██████╔╝███████╗ ╚████╔╝ ██║ ██║ ██║ ███████╗
╚═════╝ ╚══════╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝
Ever tried warming up before a coding session? Most typing tests throw random English at you — "The quick brown fox jumps..." — and that's fine, but it doesn't prepare your fingers for the characters that actually matter: {}, =>, //, </>.
DevType was born out of that frustration. I wanted something that feels like a real IDE warm-up — not a grade-school typing class. So I built one.
| Feature | Description |
|---|---|
| 🖥️ Code-First Typing | Practice with JavaScript, Python, HTML, C++, and English — real syntax, real logic |
| 📊 Live Metrics HUD | Watch your WPM, accuracy, and errors update in real-time as you type |
| ⏱️ Flexible Timers | Choose between 15s, 30s, 60s, or 120s sessions to match your mood |
| 🎯 3 Difficulty Levels | From gentle console.log() to async class architectures — pick your poison |
| 🔐 Secure Auth System | JWT tokens in httpOnly cookies + bcrypt hashing — your data stays yours |
| 📈 Personal Dashboard | WPM trends, language breakdowns, test history — track your growth over time |
| 🏆 Global Leaderboard | See how you stack up against other developers worldwide |
| 🎨 Cyberpunk UI | Dark theme with neon accents, glass panels, GSAP animations, and glow effects |
| ⌨️ Smart Shortcuts | Start typing to begin • Tab + Enter to instantly restart |
| 🔄 600+ Snippets | Procedurally generated content means you rarely see the same snippet twice |
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router) |
| Frontend | React 19, TypeScript, Tailwind CSS 4, GSAP, Framer Motion, Zustand |
| Backend | Next.js API Routes, Prisma ORM, MongoDB |
| Auth | Jose (JWT) + Bcrypt.js, httpOnly Cookies |
| Icons | Lucide React |
devtype/
├── 📁 prisma/
│ ├── 📄 schema.prisma # Data models (User, Snippet, TestResult)
│ └── 🌱 seed.ts # Generates 600+ unique code snippets
├── 📁 src/
│ ├── 🛡️ middleware.ts # JWT verification, route protection
│ ├── 📁 app/
│ │ ├── 🎨 globals.css # Cyberpunk theme, neon utilities, glow effects
│ │ ├── 📐 layout.tsx # Root layout (Geist font, dark mode)
│ │ ├── 🏠 page.tsx # Home — typing arena + settings + nav
│ │ ├── 📁 login/ # 🔐 Login page
│ │ ├── 📁 signup/ # 📝 Registration page
│ │ ├── 📁 dashboard/ # 📊 Personal stats & analytics
│ │ └── 📁 api/
│ │ ├── 📁 auth/ # 🔑 login, signup, logout, me
│ │ ├── 📁 snippets/ # 📜 Random snippet fetcher
│ │ ├── 📁 scores/ # 🏆 Submit results + leaderboard
│ │ └── 📁 dashboard/ # 📈 Aggregated user analytics
│ ├── 📁 components/
│ │ ├── ⌨️ TypingArena.tsx # Core typing interface
│ │ ├── 📊 MetricsHUD.tsx # Live WPM / accuracy / timer
│ │ ├── 🎉 PostTestModal.tsx # Results & performance rating
│ │ └── 🏆 LeaderboardModal.tsx
│ ├── 📁 lib/
│ │ ├── 🔐 auth.ts # JWT + bcrypt helpers
│ │ ├── 💾 prisma.ts # Singleton Prisma client
│ │ └── 🔧 utils.ts # cn() tailwind merge utility
│ └── 📁 store/
│ ├── 👤 authStore.ts # Auth state (login, signup, logout)
│ └── ⌨️ typingStore.ts # Test lifecycle, keystrokes, metrics
└── 📄 package.json
Before you begin, make sure you have:
- Node.js
v18+— Download here - MongoDB connection string — Get a free cluster
# 1️⃣ Clone the repo
git clone https://github.com/yash23082007/dev-type.git
cd dev-type
# 2️⃣ Install dependencies
npm install
# 3️⃣ Set up your environment
# Create a .env file in the root:DATABASE_URL="mongodb+srv://<username>:<password>@cluster0.mongodb.net/devtype-db?retryWrites=true&w=majority"
JWT_SECRET="your-super-secret-key-change-this-in-production"# 4️⃣ Generate Prisma client
npx prisma generate
# 5️⃣ Seed the database with 600+ snippets
npx ts-node prisma/seed.ts
# 6️⃣ Launch the dev server
npm run devThen open http://localhost:3000 and start typing! 🎉
- Pick your settings — language, difficulty, and time limit
- Start typing — just press any key. Correct chars glow green, errors flash red with a screen shake
- See your results — WPM, accuracy, CPM, and a performance rating. Scores auto-save for logged-in users
| Method | Endpoint | Auth | Description |
|---|---|---|---|
POST |
/api/auth/signup |
🔓 | Create a new account |
POST |
/api/auth/login |
🔓 | Sign in with email & password |
POST |
/api/auth/logout |
🔓 | Clear session cookie |
GET |
/api/auth/me |
🔓 | Get current user profile |
GET |
/api/snippets |
🔓 | Fetch random snippet (?language=&difficulty=) |
POST |
/api/scores |
🔓 | Submit a test result |
GET |
/api/scores |
🔓 | Get leaderboard (top 20) |
GET |
/api/dashboard |
🔒 | User stats, trends & history |
🔓 = Public 🔒 = Requires authentication
model User {
id String @id @default(auto()) @map("_id") @db.ObjectId
username String @unique
email String @unique
password String // bcrypt hashed
level Int @default(1)
totalTests Int @default(0)
avgWpm Float @default(0)
highestWpm Float @default(0)
avgAccuracy Float @default(0)
streak Int @default(0)
testResults TestResult[]
}
model Snippet {
id String @id @default(auto()) @map("_id") @db.ObjectId
content String // The code to type
language String // js, python, html, cpp, english
difficulty String // beginner, intermediate, advanced
category String // coding or text_typing
}
model TestResult {
id String @id @default(auto()) @map("_id") @db.ObjectId
userId String @db.ObjectId
user User @relation(fields: [userId], references: [id])
wpm Int
cpm Int
accuracy Float
timeTaken Int // seconds
mistakes Json // error positions
}- Typing Arena — Char-by-char rendering with live cursor, green glow on correct, red shake on error
- Metrics HUD — Live WPM, accuracy, and error count updating in real-time
- Post-Test Modal — Performance ratings: 🥉 Good → 🥈 Great → 🥇 Excellent → 👑 Legendary
- Dashboard — WPM trend chart, language breakdown, full test history
- Leaderboard — Top 20 global scores with medal system 🥇🥈🥉
- Why Zustand over Redux? — Minimal boilerplate. Two small stores handle everything without provider hell
- Why GSAP over CSS animations? — The screen-shake on typing errors needs programmatic control that CSS
@keyframescan't easily provide - Why JWT in cookies? — httpOnly cookies prevent XSS token theft. The middleware layer handles verification without client-side token management
- Why procedural snippet generation? — 5 languages × 3 difficulties × randomized vocabulary = 600+ unique snippets without manually writing each one
Contributions are always welcome! Here's how you can help:
- 🍴 Fork the repository
- 🌿 Create a feature branch (
git checkout -b feature/amazing-feature) - 💾 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the branch (
git push origin feature/amazing-feature) - 🔃 Open a Pull Request
This project is open source and available under the MIT License.
If DevType helped you type faster, consider giving it a ⭐
"The fastest way to type code... is to practice typing code."