TypeVibe Typing Speed Test
CASE STUDY

TypeVibe — Glassmorphic Mechanical Typing Test

GitHubVisit Site
Next.js 16React 19TypeScriptTailwind CSSMotion.devWeb Audio APIUpstash RedisDrizzle ORMPWAVercel

A modern, glassmorphic typing speed test engineered with Next.js 16, React 19, and Tailwind CSS. It pairs realistic mechanical keyboard audio feedback with real-time WPM tracking, interactive virtual 3D keyboard visualizers, Upstash Redis serverless analytics, dynamic favicons, and offline PWA capabilities.

⌨️Project Overview

TypeVibe is an open-source, high-performance typing speed application designed to elevate daily typing practice into a captivating sensory experience. Built with a visual-first glassmorphic UI, TypeVibe replicates the tactical satisfaction of typing on physical mechanical keyboards using real-time Web Audio synthesis.

Whether practicing raw speed (WPM), accuracy percentage, consistency, or timed speed runs, TypeVibe provides instant visual keypress feedback, live sound wave visualizers, interactive performance charts, and social shareables.

🏗️Architecture & Technical Stack

TypeVibe is engineered on top of Next.js 16 (App Router & Turbopack) and React 19, taking full advantage of React Server Components, Turbopack builds, and the new Babel React Compiler for sub-millisecond component re-renders.

The backend architecture is serverless and edge-ready, utilizing Upstash Redis for global visitor counter tracking and low-latency analytics, alongside Drizzle ORM and LibSQL for type-safe database schemas.

Web Audio API Synthesis

Rather than relying on laggy pre-recorded audio files, TypeVibe incorporates a custom Web Audio API synthesis engine (sound.ts and audio-preloader.ts). It dynamically generates keypress frequencies, switch actuation clicks, and release resonance with zero main-thread audio delay.

The audio engine is paired with a live Sound Visualizer component that renders real-time frequency waveforms as keys are actuated.

Real-Time Typing Telemetry (`use-typing-test.ts`)

A dedicated state hook manages raw keypress streams, calculating WPM, uncorrected Raw Speed, Accuracy %, and keystroke Consistency dynamically.

Results are plotted on an interactive chart powered by Recharts and animated with @number-flow/react for smooth digit counters. High scores trigger celebration canvas confetti and calculate personal best records stored in LocalStorage/IndexedDB.

Dynamic Tab Favicons & Theme Engine

TypeVibe features a dynamic client-side SVG favicon generator (favicon-client.ts) that modifies the browser tab favicon in real time based on active color themes, light/dark state, and live typing activity.

Progressive Web App (PWA) & Offline Capability

Integrated with Serwist (@serwist/next), TypeVibe functions as a zero-dependency offline PWA. Users can install TypeVibe directly onto desktop or mobile environments with full caching for offline practice sessions.

✨Key Features & Test Modes

  • 🎵 Mechanical Sound Profiles: Realistic switch sound profiles with volume control sliders and live sound visualizer.
  • ⏱️ Flexible Test Modes: Timed challenges (15s, 30s, 60s, 120s), Word count targets, Inspirational Quotes mode, and Zen free-form mode.
  • ⌨️ Interactive Virtual 3D Keyboard: Real-time on-screen keyboard highlighting active physical keypresses with glowing key actuation effects.
  • 🎨 Customizable Aesthetics: Glassmorphic design system with built-in theme picker and Google Fonts selector.
  • 📊 Comprehensive Results Screen: Live WPM graphs, accuracy breakdown, error count, and one-click formatted score card sharing.
  • 🗄️ Serverless Analytics: Global visit counter powered by Upstash Redis edge database.

FROM CONCEPT TO CODE </>

LET'S TURN IDEAS INTO SOLUTIONS

I'm available for full-time roles & freelance projects.

I thrive on crafting dynamic web applications
and delivering seamless user experiences.