A typing practice app built with Next.js 15 and TypeScript. Pick a difficulty, type the prompt against an on-screen keyboard, and get your WPM and accuracy at the end of the run.
Live: https://typingweb-two.vercel.app
- Three difficulty levels — easy / medium / hard, selected from the control
panel. Prompts are loaded from
public/paragraphs.jsonand picked at random. - On-screen keyboard — the practice view renders a full keyboard layout and
highlights keys on
keydown/keyupas you type. - WPM and accuracy — both are computed at the end of a run and shown in the results panel.
- Firebase email/password auth — sign up, log in, log out. The header
switches to your name and a generated avatar (via
ui-avatars.com) once you are signed in. - Guest mode — "Try as Guest" skips auth entirely and goes straight to practice.
These are ideas, not features — there is no code for them in this repo: leaderboards, saved run history, progress analytics, streaks, and multi-language prompts. Nothing is persisted; results live in component state for the duration of the run.
| Area | Tech |
|---|---|
| Framework | Next.js 15 (App Router) + TypeScript |
| UI | Tailwind CSS, react-icons, framer-motion |
| Auth | Firebase Authentication |
| Prompt data | Static public/paragraphs.json |
| Hosting | Vercel |
git clone https://github.com/vipinsao/typingweb.git
cd typingweb
npm install
cp .env.example .env.local # works as-is; fill in real values for sign-in
npm run devOpen http://localhost:3000.
A Firebase config is required — lib/firebase.ts calls initializeApp at
module scope, so an empty NEXT_PUBLIC_FIREBASE_API_KEY fails npm run build
at prerender with auth/invalid-api-key, and in npm run dev every page that
loads the shared layout (/login, /signup, /practice, /about) answers
500 — only / survives. .env.example therefore ships a syntactically valid
placeholder key: copied as-is it is enough for the whole UI, including
"Try as Guest", to run with no Firebase account. Nobody can sign in with it,
so replace it with your own values before using email/password auth:
NEXT_PUBLIC_FIREBASE_API_KEYNEXT_PUBLIC_FIREBASE_AUTH_DOMAINNEXT_PUBLIC_FIREBASE_PROJECT_ID
Create a project at console.firebase.google.com, enable Email/Password under Authentication → Sign-in method, and copy the values from your web app config.
Personal project, still rough in places. Issues and PRs are welcome.