KanjiLearner – Full-Stack Spaced Repetition App

Date: July 2025 – Sept 2025

KanjiLearner is a full-stack web application I developed to help learners study kanji using a spaced repetition system (SRS). It includes lessons, reviews, mistake tracking, and customizable mnemonics.

🚀 Tech Stack

React (TypeScript, Vite) + Tailwind CSS
Django + PostgreSQL
Deployed to Vercel (frontend) and Render (backend + DB)

📸 Screenshots

Dashboard view showing available lessons, reviews, and recent mistakes.

Radical entry view showing components and related kanji dependencies.

Kanji entry page displaying readings, mnemonics, and associated vocabulary.

Vocabulary entry details, including readings, meaning, and example usage.

Dictionary search view for quickly finding radicals, kanji, or vocabulary.

Review runner in progress before flipping the card.

Review runner after flipping the card, showing the correct answer and allowing the user to mark whether they got it right or wrong.

KanjiLearner Backend Tags for Highlighting

Tagging sections of text in the backend....

KanjiLearner Frontend Tags with Highlighting

...results in these pretty highlights on the frontend! This is great for a colorcoded learning experience!

📌 Outcome

Within three months I shipped a production-ready MVP that I continue to use for my own Japanese studies. The project demonstrates end-to-end ownership of data modeling, API design, frontend development, and production deployment.

⚙️ Development Highlights

Responsive UI Design: Styled the frontend with Tailwind CSS, using Flexbox and CSS Grid layouts for clean, responsive pages. The dashboard adapts across screen sizes, presenting lessons, reviews, and mistakes in a balanced layout.
Pitch Accent Graph: Implemented an interactive SVG component that splits Japanese words into morae and plots their pitch pattern (low/high). This allows learners to visualize pronunciation patterns such as LHH or LH(L), which are critical for sounding natural in spoken Japanese.
Efficient Pagination: Integrated React Query to handle server-side pagination of dictionary entries. The client caches responses and seamlessly fetches the next page, ensuring smooth navigation even across thousands of kanji, radicals, and vocabulary items.
Highlighting System: Built a custom text highlighter that parses <radical>, <kanji>, <vocab>, and <reading> tags from API responses. These tags are rendered with distinct styles, making it easy for learners to quickly distinguish between character types and readings in mnemonics and explanations.
Review Runner State Machine: Designed the review flow as a React reducer with action/state dispatch, functioning as a lightweight state machine. This controls card flipping, answer validation, success/failure logging, and SRS progression updates, ensuring consistent behavior across study sessions.
Authentication & Security: Used Axios with Django’s CSRF protection and sessionId cookies for secure, cookie-based authentication. This ensures that user sessions remain persistent and protected without exposing tokens.

Overall, KanjiLearner combines proven Japanese learning methods with robust engineering: from data modeling and spaced repetition logic to React-driven interactivity and production deployment. It serves both as a personal study tool and as a demonstration of full-stack development.

⬅ Back to Portfolio Home