DEV Community

Cover image for Overview: Build FullStack GenAI - Flash AI English Card
Taki
Taki

Posted on

Overview: Build FullStack GenAI - Flash AI English Card

#webdev #javascript #nextjs #nestjs

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]
Enter fullscreen mode Exit fullscreen mode

✨ 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. `;
Enter fullscreen mode Exit fullscreen mode

🔍 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.

Top comments (0)