Algorithm Guide Website

Project Overview

A React + TypeScript SPA that serves as a comprehensive algorithm study guide. Covers 159 LeetCode problems across 16 categories (Array & Hashing, Two Pointers, Sliding Window, Stack, Binary Search, Linked List, Trees, Heaps, Backtracking, Graphs, Dynamic Programming, Greedy, Intervals, Bit Manipulation, Design, Appendix). Problem content is loaded from Markdown files at runtime. Features a flashcard mode for active recall, a dashboard for progress overview, and per-problem status tracking (not started / in progress / mastered) persisted via Zustand.

Technical Challenges & Solutions

Dynamic Markdown Content Loading

159 problem pages need to render Markdown with syntax-highlighted code blocks without pre-baking each page at build time.

Solution:

Stored all problem content as raw Markdown files in public/data/. At runtime, the React component fetches the relevant .md file, passes it through react-markdown with rehype-highlight, and renders it. This keeps the content editable without needing a rebuild.

Progress Persistence Without a Backend

Users need their problem status (not started / in progress / mastered) to persist across sessions without requiring login or a server.

Solution:

Used Zustand with a localStorage persistence middleware. Problem status is stored as a flat map of (problemId → status) in localStorage, restored on app load, and updated in real time as users change status — zero backend required.

Learnings

This project reinforced my skills in building content-rich SPAs with dynamic Markdown rendering. Designing the Zustand store for progress tracking taught me how to keep client state minimal and localStorage-persisted. Building the flashcard mode gave me insight into spaced repetition UX patterns.

Algorithm Guide Website

Project Overview

Technical Challenges & Solutions

Dynamic Markdown Content Loading

Progress Persistence Without a Backend

Learnings

Tech Stack

Frontend Framework

State Management

Tools

Deployment