Algotype

Algotype helps developers internalize algorithm implementations by typing them out repeatedly. The app includes 9 algorithms (binary search, DFS, BFS, sliding window, two pointers, dynamic programming, backtracking, hashing, merge sort) with both Python and JavaScript versions.

Two practice modes are available: drill mode shows a reference panel alongside the typing editor, while challenge mode asks users to type the implementation from memory. A custom character-by-character typing engine tracks WPM and accuracy, with personal best comparisons shown on completion.

The app uses tiered access. Anonymous users get one attempt per day, free accounts get five, and premium subscribers get unlimited access. A waitlist collects emails for the premium tier launch. User preferences let authenticated users set a default programming language and manage their password.

Progress tracking surfaces WPM and accuracy as primary metrics with trend indicators. An onboarding guide explains the difference between drill and challenge modes. The UI uses an emerald accent palette with responsive mobile navigation, skeleton loading states, and memoized rendering in the typing editor.

Why

Knowing how to implement common algorithms is a core skill for technical interviews and everyday engineering, but reading implementations is different from being able to reproduce them. Algotype takes the approach that muscle memory and repetition build recall, giving developers a focused environment to practice typing algorithms until the patterns stick.

How

Built with Next.js 15 and the App Router in TypeScript. The typing engine renders code character by character and measures WPM and accuracy in real time using a Zustand store. Authentication is handled by NextAuth.js v5 with email/password credentials and planned OAuth support. The data layer uses Drizzle ORM against NeonDB with programmatic migrations. Stripe is wired in for premium subscriptions, Resend handles transactional email, and PostHog provides analytics. The frontend is styled with Tailwind CSS and includes skeleton loading states and memoized rendering for performance.