Flashcard Maker Project Report
1. The Concept
Flashcard Maker is a mobile-first educational web application designed for Cambodian students, university learners, and English-language learners. It helps users study and improve their memory through short multiple-choice flashcard quizzes in English and Khmer.
Users can choose a subject deck, answer up to 10 non-repeating questions, receive immediate feedback, and view their results after completing a quiz. The application includes ready-made decks for subjects such as Physics, Mathematics, Chemistry, Psychology, English, Technology, Geography, Biology, and Food.
The long-term concept is to let users upload lessons, images, or documents and use AI to generate clear English–Khmer flashcards automatically. The current prototype uses local question banks and JavaScript templates; it is not yet connected to a live AI API.
2. The Stack
The Stack: HTML, CSS, JavaScript, Node.js, browser localStorage, and WebP image assets.
The project does not use a frontend framework or external package. The interface, quiz system, deck management, search, settings, dark mode, language selection, and card direction are implemented with plain JavaScript. A small Node.js server serves the project locally at http://127.0.0.1:5173.
The AI Assist: AI assisted with product planning, target-user definition, UI/UX review, bilingual content preparation, question-bank creation, code implementation, debugging, and project documentation. The application's card-generation screen currently simulates generation locally. A secure backend and AI API integration remain future work.
3. The 1 Day Sprint
Morning (Hours 1–3): Defined the product concept, selected Cambodian university students and English learners as the primary target users, reviewed the Sakurai planning notes, and identified the core experience: choose a deck, answer clear questions, receive feedback, and return to continue learning. The first mobile interface and basic study flow were created.
Afternoon (Hours 4–6): Redesigned the interface as a clean mobile learning application using HTML, CSS, and JavaScript. Added the 9:16 layout, Home screen, progress summary, subject decks, quiz screen, result screen, Store, Search, Settings, language controls, dark mode, and persistent browser storage. Deck artwork was organized under the assets directory.
The Finish Line (Hours 7–8): Expanded the main subject decks to 10 unique questions, removed repeated-question behavior, improved generated questions so they are easier to understand, added English–Khmer content, verified JavaScript syntax, cleaned unused project files, reorganized assets, and completed the README and project report.
4. The Roadblocks
Roadblocks: The first design rules were written for a commercial mobile game and required image-based UI assets, while the final product needed to be a maintainable HTML/CSS/JavaScript web application. The project therefore retained useful UX principles—clear actions, readable text, immediate feedback, and focused screens—without following game-only asset restrictions.
Another challenge was that the initial local card generator created unclear template questions and repeated cards when a deck contained fewer than 10 questions. This was addressed by adding larger subject-specific question banks, limiting each question to one appearance per quiz, and replacing confusing placeholder answers such as “Wrong A/B/C” with readable choices.
Local development also required a small server because opening the HTML file directly could cause asset-path and browser-security problems. The server.mjs and open-app.cmd files were retained to make local startup easier.
5. Key Takeaways
A strong target user makes product decisions clearer. Focusing on Cambodian learners studying English-language material helped define the bilingual interface, question style, and deck subjects.
The most important value is not the number of features. It is helping users start a useful quiz quickly and understand every question and answer without confusion.
Simple UI feedback, non-repeating questions, readable Khmer text, and subject-relevant content are essential for trust. An AI-generated flashcard is only valuable when it is accurate, easy to understand, and connected to the user's lesson.
The current prototype demonstrates the complete learning flow, but production AI generation will require a secure backend, document extraction, output validation, and protection of the API key.
My final thought: Flashcard Maker has a clear foundation as an English–Khmer learning tool. Its next major step should be connecting a reliable AI backend and testing the experience with real Cambodian students using their own lessons and exam materials.