A flashcards webapp
I recently built a flashcards web application to help people learn and review various topics. The project combines several technologies I’m passionate about - React, FastAPI, MongoDB and AI - into a practical learning tool.
The core functionality is simple: users can review flashcards on different topics, with multiple choice questions and explanations. But under the hood, there are some interesting technical aspects that made this a fun project to work on.
The frontend is built with React and Tailwind CSS, deployed on Vercel. I used custom hooks for state management and focused on making it mobile-responsive with a dynamic sidebar. The backend API is powered by FastAPI and hosted on Digital Ocean, using Uvicorn and Nginx for handling requests efficiently.
One of the more interesting parts is the AI-powered content generation system. It uses OpenAI’s models with some careful prompt engineering to generate flashcards, explanations, and even emojis for topics. To keep costs reasonable while maintaining quality, I implemented a two-tier approach:
- For flashcard generation, it uses a more capable model (gpt-4o) with comprehensive validation and duplicate detection
- For explanations, it uses a smaller, cost-effective model (gpt-4o mini) enhanced with RAG (Retrieval Augmented Generation), pulling in relevant context from Wikipedia and other sources
The explanation system was particularly fun to implement - it not only explains why the correct answer is right but also why the incorrect options are wrong. This helps create a more complete learning experience.
For data storage, I went with MongoDB hosted on Digital Ocean. While this required more complex setup compared to SQLite, it gives better scalability and performance. The document-based structure works well for storing flashcard metadata and user progress.
Some other notable features include:
- Local storage optimization for better performance
- Progressive loading of content (infinite scroll)
- Celebration effects for correct answers
- Support for multiple languages
- Daily quiz functionality
The project is open source and you can check it out at cards.samu.space. I’m continuously adding new features and improvements, so feel free to try it out and let me know what you think!
