Overview: Build FullStack GenAI - Flash AI English Card

Building a GenAI-powered English learning assistant with contextual explanations — a mix of dictionary, translator, and language tutor.
My github for this Project: https://github.com/Taki089Linux/flashGenAiCard

---

🔧 Tech Stack Overview

• Frontend (Next.js): UI for inputting phrases, displaying structured explanations.
• Backend (NestJS): API orchestration, model call, data storage, and caching.
• Vector DB (MongoDB + Atlas Search): Store and retrieve similar phrases/meanings.
• AI Model (Gemini / OpenRouter / Claude / Mistral): Phrase explanation generation.

---

🧠 Architecture Flow

[User Input] --> [Next.js Frontend] --> [NestJS API]
                                       |
                [MongoDB Vector Search] (Check if phrase was processed before)
                                       |
                              [AI Model Call via Gemini/OpenRouter]
                                       |
                          [Response Parsing + Caching in MongoDB]
                                       |
                          --> [Next.js Renders Structured Output]

---

✨ Output Format (from AI)

Use a system prompt template in your backend like:

const systemPrompt = `
You're an expert English tutor. Given a word or phrase, explain it like the following format, using only English. Keep a friendly, clear, and structured tone.

---

🔤 Phrase:
{{input}}

📘 Explanation:
- Definition:
- Phrase breakdown:
- Meaning (in simple English):
- Usage context:

🧠 Examples:
English sentence | Simple meaning
-----------------|------------------
Example 1        | Meaning 1
Example 2        | Meaning 2

🔁 Similar phrases:
- Phrase A
- Phrase B

📌 Memory tip:
Give a useful mental image, mnemonic, or pattern.

🧩 Field usage (e.g., Business, Project Management):
Example sentence with note.
`;

---

🔍 MongoDB Vector Search Usage

• Store each phrase with embedding (use Gemini Embeddings).

• Use Atlas Search to:

  • Find semantically similar phrases to avoid redundant calls.
  • Improve response suggestion (auto-related phrases).

---

⚙️ NestJS Backend Modules

• PhraseModule: Handle input processing and retrieval.
• AIService: Wrapper for Gemini / OpenRouter API call.
• MongoService: CRUD + vector search logic.
• CacheService: Optionally Redis to speed up repeat queries.

---

🖼️ Frontend Features (Next.js)

• Clean input field + explanation display.
• Example table formatter.
• Copy to clipboard, share links, bookmark phrase.
• Optional login to store user phrase history.

---

🔑 Free AI Option

• Use OpenRouter with a free tier model like Claude Haiku, Mistral, or Gemini 1.5 Flash.
• If budget allows, use Gemini Pro 1.5 via Vertex AI or API Key (limited free tier).

---

🧩 Develop Steps

1. Design frontend layout and explanation format.
2. **Create NestJS modules to:

• Accept phrase
• Check MongoDB for cache
• Call AI if not cached
• Save structured result
  1. Create prompt structure + test multiple models for best results.
  2. Vectorize and store responses for semantic search later.

---