Full-Stack Web App, Python/Flask, Developer Tool, CS50x Capstone

CodeType: Programming Typing Practice Web App

CompletedFull Stack DeveloperCS50x Final Project

Duration: Aug 2026 – Sep 2026

Affiliation: Harvard University (CS50x Final Project)

Live Site: View Live

Repository: GitHub

Project Overview

CodeType is a specialized web application built as the final project for Harvard University's CS50x: Introduction to Computer Science (2026). It is designed specifically to help programmers and developers practice typing real, syntax-heavy code instead of standard natural language prose.

While traditional typing practice platforms focus on sentences and paragraphs, programmers type brackets, semicolons, nested indentation, operators, keywords, and language-specific syntax constructs. CodeType bridges this gap with 90 real-world code snippets across C, Python, SQL, HTML, and JavaScript across Easy, Medium, and Hard difficulty tiers.

The application features a responsive dark-themed user interface, live character-by-character typing verification engine, real-time WPM, accuracy, and mistake tracking, Tab key indentation support, and persistent user attempt history stored in an SQLite database via a Python Flask backend.

Video Demonstration

CodeType: Programming Typing Practice Web App - CS50x Final Project Demo

Watch on YouTube

Languages supported (C, Python, SQL, HTML, JS)

Real-world syntax code snippets

100%

Real-time keystroke accuracy tracking

CS50x

Capstone Final Project approved

Key Features

Multi-language code practice supporting C, Python, SQL, HTML, and JavaScript
Three difficulty levels (Easy, Medium, Hard) across 90 real code snippets
Real-time character-by-character syntax highlighting (green for correct, red for incorrect, blinking cursor)
Live HUD calculating elapsed time, Words Per Minute (WPM), typing accuracy percentage, and mistake count
Code-friendly input mechanics: auto-timer start on first keystroke, Tab key 4-space indentation, and paste prevention
Session completion analytics modal displaying detailed score cards and performance metrics
Persistent practice history with SQLite database storing attempts, averages, best WPM, and language breakdowns
History management with per-language performance analysis and clear history confirmation

Contributions & Outcomes

Designed and implemented the complete full-stack web application from architectural design to deployment
Engineered the custom JavaScript typing engine with high-precision keystroke evaluation and real-time DOM feedback
Curated and formatted a library of 90 syntactically valid code snippets preserving exact whitespace and indentation
Developed the Flask backend API handling test session validation, dynamic routing, and database interactions
Built database schema and query routines in SQLite for tracking typing test attempts and calculating statistical summaries
Authored comprehensive project documentation, presentation slides, and video demonstration for CS50x evaluation

Learning Outcomes

Mastered full-stack Python/Flask web development with server-side Jinja2 templating and RESTful API endpoints
Gained deep hands-on experience in low-latency event-driven DOM manipulation and keystroke handling in Vanilla JavaScript
Implemented relational database persistence and aggregate statistical reporting with SQLite
Practiced UX design tailored for developer productivity, keyboard accessibility, and dark mode ergonomics
Successfully delivered a complete capstone project meeting Harvard University CS50x rigorous engineering standards