A structured knowledge base with an interactive web interface. Built for efficient learning, quick reference, and interview preparation.
View Online: haoweichan.github.io/study-notes
π Knowledge Base β Notes on Algorithms, System Design, Machine Learning (AdTech focus), and Agentic AI.
π§ Active Learning β 120+ Flashcards and Quizzes with real-time search, category filtering, dark mode, bookmarks, and spaced repetition.
β‘ Clean Architecture β Markdown-first notes with auto-extracted flashcards/quizzes, automated linting, and GitHub Pages deployment via React/Vite.
study-notes/
βββ web/ # React + Vite Web Application
β βββ src/ # Frontend source code
β βββ public/ # Static assets
βββ docs/ # Deployment target (GitHub Pages)
β βββ artifacts/ # Auto-generated JSON data
β βββ notes/ # Copied markdown content
βββ notes/ # Source Markdown notes
β βββ algorithm/ # Algorithms & data structures
β βββ devops/ # DevOps & infrastructure
β βββ system-design/ # System architecture
β βββ machine-learning/ # ML (AdTech, RecSys)
β βββ leetcode/ # Coding problem solutions
β βββ agentic/ # AI Agents, RAG, GenAI
βββ templates/ # Note templates
βββ scripts/ # Automation scripts
β βββ new_note.sh # Create new notes
β βββ deploy_web.sh # Build & Deploy script
β βββ export_notes_index.py # Index notes for WebUI
β βββ ...
βββ .github/workflows/ # CI/CD for linting
Use the provided helper script to create new notes from the template:
./scripts/new_note.sh "Title of note" <category> [slug]Available Categories:
algorithmβ Algorithms & data structuresdevopsβ Infrastructure & DevOpssystem-designβ System architecturemachine-learningβ ML & AIleetcodeβ Coding problemsagenticβ AI agents & automation
Examples:
./scripts/new_note.sh "Binary Search Tree" algorithm
./scripts/new_note.sh "Design Real-Time Bidding" system-design
./scripts/new_note.sh "RAG Architectures" agenticFlashcards:
- What is the time complexity of binary search? ::: O(log n)Quizzes:
## Quizzes
Q: Question?
Options:
- A) Option 1
- B) Option 2
Answers: A
Explanation: ...All notes should follow this structure:
- Location:
notes/{category}/short-slug.md - Frontmatter: Required fields are
title,date, andcategory - Sections: Include
Summary,Details,Flashcards,Quizzes
1. Install Dependencies
# Python dependencies for generation scripts
pip install python-frontmatter
# Web dependencies
cd web
npm install2. Deploy Locally (Build & Copy)
# Builds the React app and generates artifacts into docs/
./scripts/deploy_web.sh3. Serve Locally
# Verify the build
python -m http.server 8000 -d docsThe repository includes multiple layers of linting:
- GitHub Actions: Run linting on all pull requests and pushes
- Manual checking: Run
npx remark .andnpx markdownlint "**/*.md"locally