TypingBanana

TypingBanana is a modern typing test web app built with React + Vite. It tracks typing accuracy in real time, records timestamped progress, pauses timer on mouse movement, and shows a complete performance report at the end of a test.

What This Project Does

• Starts a 60-second typing test when the user begins typing.
• Pauses timer when the mouse moves and resumes on next keyboard input.
• Tracks total correct and incorrect letters live.
• Prevents browser default key behaviors that interfere with typing flow:
  • Spacebar page scroll
  • Backspace browser navigation
• Locks fully correct words to prevent accidental edits.
• Allows going back to fix previous words that still contain mistakes.
• Automatically switches to a report view when time reaches zero.
• Displays chart-based stats:
  • Line chart for timestamped progress (correct vs incorrect)
  • Pie chart for final accuracy distribution

Tech Stack

• React 19
• Vite 8
• Tailwind CSS 3
• Recharts
• ESLint

Project Structure

src/
	App.jsx                      # App shell and view composition
	main.jsx                     # React entry point
	index.css                    # Global styles + Tailwind layers
	components/
		Navbar.jsx                 # Top navigation and view switching
		Timer.jsx                  # Timer UI (running/paused/idle state)
		DisplayWords.jsx           # Typing prompt + live score panel
		StatsDashboard.jsx         # Final report section
		LineChartComponent.jsx     # Timestamped progress chart
		PieChartComponent.jsx      # Correct vs incorrect distribution
	hooks/
		useTypingSession.js        # Core typing engine + timer + state machine

Getting Started

1. Install dependencies

npm install

2. Start development server

npm run dev

3. Build for production

npm run build

4. Preview production build

npm run preview

Available Scripts

• npm run dev: Run local dev server.
• npm run build: Create optimized production build.
• npm run preview: Preview built app locally.
• npm run lint: Run lint checks.

How The Typing Session Works

The session logic lives in src/hooks/useTypingSession.js and is organized as a single custom hook.

Core states:

• isTimerRunning: countdown active or paused
• hasStarted: whether user has begun typing
• isPausedByMouse: whether latest pause was caused by mouse movement
• currentView: test or stats

Flow summary:

1. User types first valid key -> timer starts.
2. Mouse movement -> timer pauses.
3. User types again -> timer resumes.
4. Every timestamp stores cumulative values:
   • uv = total correct
   • pv = total incorrect
5. On timeout -> app switches to stats view.

Responsive Design

• Mobile-first layout with fluid containers.
• Stats cards and charts adapt to screen size.
• Typing text wraps safely for long passages.

Future Improvements

• Multiple difficulty levels and test lengths.
• User profiles and persistent test history.
• WPM/CPM trends across sessions.
• Keyboard shortcuts for restart and navigation.

License

This project is currently for personal/learning use. Add a LICENSE file if you want to publish it publicly.