Mayumi Cards
A Japanese flashcard app built around a client-side SRS algorithm. The hard part wasn't the UI — it was tuning the review-interval policy so daily study actually compounds.
- TypeScript
- Next.js
- React
- Tailwind CSS
- Zustand
- Framer Motion
Problem
Existing flashcard apps are often cluttered, complex, or lack specific features for Japanese learners like built-in kana support. I wanted a study tool that felt calm and inviting, encouraging daily consistency without overwhelming the user with settings.
Approach
I built Mayumi Cards with a 'Japanese Zen' aesthetic in mind, using soft colors and minimalist UI. Key engineering efforts went into the client-side Spaced Repetition System (SRS) algorithm to optimize review intervals. I also implemented a flexible CSV importer to allow users to bring their own decks, and a contribution heatmap to visualize study streaks.
Technical Decisions
Local-First Architecture
To ensure the app feels instant and works offline, I implemented a robust local storage strategy. Decks and study progress are persisted in the browser, making the app immediately usable without a backend/login requirement for new users.
Zustand for State Management
Used Zustand for managing the global state of decks and study sessions. Its minimal boilerplate compared to Redux or Context implementation allowed for cleaner code and rapid iteration on state-heavy features like the CSV importer.
Tradeoffs
Client-Side Only Persistence
Currently, data lives only in the user's browser (LocalStorage). This simplifies privacy and cost but means progress doesn't sync across devices yet.
What I learned
- 01
Implementing spaced repetition algorithms in JavaScript.
- 02
Parsing and validating CSV data on the client side.
- 03
Creating fluid animations with Framer Motion for better UX.