memonemo

Inspiration

Classic rote memorization is outdated and boring. We wanted to transform vocabulary learning by turning AI into a personal "memory champion." The inspiration struck when we realized that standard AI models often fail at "false friends" across languages (e.g., the word "merak" means "curiosity" in Turkish, but "peacock" in Indonesian). We wanted to build a system that understands true linguistic context and generates visual memory hooks instantly.

What it does

memonemo is a serverless, AI-powered flashcard application.

• Contextual AI: Users input a word and select a target language. The system uses Gemini 3.6 Flash to output a strict JSON containing the accurate translation and a mnemonic story.
• Serverless SVG Rendering: Instead of fetching images from external APIs or storing heavy files, the AI generates raw, minimalist SVG code. This code is rendered instantly on the client-side, resulting in zero backend rendering costs.
• Spaced Repetition: Words are reviewed using the Leitner system algorithm.
• Global Dictionary Architecture: Once an SVG and story are generated for a specific word, they are stored in a global pool. Future users learning the same word pull the data instantly without triggering another API call, maximizing token efficiency.

How we built it

We built memonemo using a completely serverless architecture to ensure high speed and scalability.

• Frontend: React.js powered by Vite for lightning-fast module bundling.
• Backend & Database: Firebase Authentication for secure Google Sign-in and Cloud Firestore for our two-tier database (Global Words Pool and User Progress).
• AI Engine: Google's gemini-3.6-flash model, utilized with advanced prompt engineering to enforce strict JSON outputs and prevent linguistic biases.

Challenges we ran into

The biggest challenge was overcoming the AI's translation bias. Initially, the model would get confused by inter-lingual homonyms (the "false friend" trap). We solved this by engineering a strict prompt structure that forces the model to isolate the target language's context. Additionally, managing asynchronous React states with Firestore's real-time updates for the Spaced Repetition logic required careful hook management to prevent infinite rendering loops.

What we learned

We mastered advanced prompt engineering to force LLMs to output structural UI elements (like raw SVG code). We also deepened our understanding of serverless NoSQL database architectures, specifically designing a dual-layer system (Global vs. User-specific data) to save API costs.

What's next for memonemo

We plan to expand the "Global Dictionary" into a community-driven platform where users can vote on the most effective SVG memory hooks. We also want to implement a gamified leaderboard and support audio pronunciations.

Built With

• firebase
• firestore
• gemini-api
• google-cloud
• javascript
• react
• serverless
• tailwind
• vite