DEV Community: Taki

Essential developer utility tools

Taki — Thu, 27 Aug 2026 09:43:34 +0000

1. Crypto & Security Tools

Crucial for authentication setup, payload verification, and security testing.

JWT Parser / Decoder: Decodes JSON Web Tokens (Header, Payload, and Signature) without transmitting secret keys over the internet.
Token & Password Generator: Generates cryptographically secure random passwords and API tokens with customizable character sets, lengths, and complexity rules.
Hash Text Generator: Computes cryptographic hashes (MD5, SHA-1, SHA-256, SHA-512) for strings to verify integrity or check signature matching.
Bcrypt Hash / Verifier: Hashes plain-text passwords or checks plain text against an existing hash using the bcrypt algorithm.
UUID / ULID Generator: Creates universally unique identifiers (v4 UUIDs) or time-sortable lexicographically sortable unique identifiers (ULIDs).
BIP39 Mnemonic Generator: Generates seed phrases and cryptographic keys used in wallet initialization and HD key generation.
RSA Key Pair Generator: Generates public and private RSA key pairs directly in the browser for local testing of asymmetric encryption systems.
Basic Auth Generator: Quickly constructs Authorization: Basic <base64> HTTP header credentials from a username and password.

2. Formatters & Prettifiers (Development)

Saves hours when dealing with messy logs, API responses, or raw system configurations.

JSON Prettify & Minify: Formats unformatted API JSON strings with customizable indentation or compresses them into a single line to reduce payload sizes.
JSON Diff: Highlights additions, deletions, and structural changes between two JSON payloads.
SQL Prettify: Formats raw SQL queries into clean, readable multi-line statements with capitalized keywords.
YAML / XML Formatter: Cleans up indentation, validates structure, and formats raw XML and YAML files.
Docker Run to Docker Compose: Translates single CLI flags (docker run -d -p 80:80 ...) into a structured docker-compose.yml file.
Cron Expression Generator & Parser: Provides human-readable schedules from crontab syntax (* * * * *) and generates cron strings based on selected intervals.
Chmod Calculator: Calculates Unix file permission flags visually (e.g., matching 755 or 644 to rwxr-xr-x).

3. Converters & Data Transformations

Eliminates manual scripts when translating data between standards.

Tool	Common Developer Use Case
JSON ↔ YAML / TOML	Converting configurations between framework standards (e.g., Kubernetes, Hugo, Node.js).
JSON ↔ CSV	Exporting structured API responses directly into tabular formats for business analysis.
Base64 String & File Converter	Encoding binary assets into strings for data URIs or decoding raw payload strings.
Integer Base Converter	Converting numbers seamlessly between Binary, Octal, Decimal, and Hexadecimal.
Date / Timestamp Converter	Converting Unix epoch timestamps (seconds/milliseconds) into ISO 8601 human dates and vice versa.
Case Converter	Converting string variables between `camelCase`, `snake_case`, `kebab-case`, `PascalCase`, and `CONSTANT_CASE`.
Color Converter	Translating color spaces between HEX, RGB, HSL, and CSS variable definitions.

4. Web & Network Utilities

Essential for API integration, network configuration, and SEO metadata debugging.

IPv4 Subnet Calculator: Calculates CIDR notation ranges, usable host ranges, broadcast addresses, and subnet masks.
URL Encoder / Decoder: Escapes parameters safely for query strings or decodes URI-encoded payloads (%20, %2F, etc.).
URL Parser: Breaks a complete URL down into protocol, host, port, path, parameters, and hash components.
Open Graph (OG) Meta Generator: Generates preview meta tags (og:title, og:image, twitter:card) for web page social media previews.
HTTP Status Codes Quick Reference: Detailed listing of response codes (1xx through 5xx) with descriptions of standard behavior.
User-Agent / Keycode Info: Inspects browser user-agent parameters and outputs JavaScript event.key / event.keyCode values for event listener development.

5. Text & Asset Generators

Quickly mock UI assets, data structures, and layout items without leaving the browser.

Lorem Ipsum Generator: Produces configurable placeholder paragraphs, words, or lists for UI prototyping.
QR Code & WiFi QR Generator: Generates downloadable vector/image QR codes for URLs, text, or automatic Wi-Fi network credentials.
SVG Placeholder Generator: Creates lightweight inline SVG image placeholders with dynamic dimensions and colors.
Text Diff / Statistics: Performs character-by-character or word-by-word diffs and calculates word count, character count, and reading time.
Slugify String: Converts raw article titles or strings into SEO-friendly web URL slugs (e.g., turning "Hello World!" into hello-world).

Key Architectural Strengths of IT-Tools

Local Browser Processing (Zero Telemetry): Built as a client-side Single Page Application (Vue.js), meaning no confidential keys, credentials, or production payload fragments leave your local machine.
Self-Hostable with Docker: Can be easily run locally on an internal network via containerization:

docker run -d --name it-tools -p 8080:80 corentinth/it-tools:latest

Frictionless Workflow: Omnibox search allowing instant navigation across all 80+ tools using keyboard shortcuts.

How and why you learn code has completely shifted

Taki — Mon, 24 Aug 2026 07:21:52 +0000

The content is written by Gemini but I want to share for everyone to know Should We learn code in AI era?

The single most important skill for a software engineer in the AI era is System Architecture & Problem Decomposition—shifting your role from a code writer to a technical director and reviewer.

Because AI tools handle syntax generation, boilerplate code, and basic implementation instantly, pure typing speed and language syntax mastery are no longer primary competitive advantages. Value has moved from writing code to specifying, evaluating, and connecting components.

Core Competencies to Master

Problem Decomposition & Context Articulation: Breaking complex business requirements into clear, isolated, and structured components. If you can precisely articulate context, architectural constraints, and edge cases, AI can generate optimal code.
Code Review & Strategic Audit: Treating AI outputs as contributions from a junior engineer. You must critically review generated code for hidden security flaws, inefficient memory usage, subtle logic bugs, and maintainability issues.
System & Data Integration: Understanding how disparate services, databases, APIs, and AI models communicate reliably at scale.
Domain & Product Thinking: Understanding why a feature is being built and ensuring the technical decisions directly solve user and business needs.

Key Technical Shifts

Traditional Software Focus	AI-Era Software Focus
Writing syntax & boilerplate code	Defining system architecture & specs
Memorizing library functions	Auditing code for edge cases & security
Manual debugging line-by-line	Orchestrating multi-agent AI workflows
Feature-level implementation	Product-level value and validation

How to Adapt Your Daily Workflow

Shift to "Spec-First" Thinking: Practice writing thorough functional and technical specifications before writing code.
Master AI Tool Orchestration: Learn to use IDE-integrated AI coding assistants and multi-agent workflows to handle repetitive scaffolding tasks.
Deepen Core Fundamentals: Focus heavily on security principles, distributed systems, database design, and algorithmic complexity, as these are necessary to catch subtle AI errors.

Surveys and industry studies on whether to learn coding in the AI era reveal a clear consensus: Yes, you still need to learn coding, but how and why you learn it has completely shifted.

While high-profile execs (like Nvidia CEO Jensen Huang) famously argued that "human language is the new programming language", data from developer surveys and tech education studies push back against the idea that manual coding knowledge is obsolete.

1. Stack Overflow Developer Survey (2025)

The Data: Over 60% of professional developers use AI tools daily, but 46% actively distrust the accuracy of AI code (compared to only 33% who trust it).
Key Finding: Developers stress that without foundational coding knowledge, you cannot spot "hallucinations," security flaws, or edge-case bugs generated by AI.
Takeaway: AI tools act as productivity multipliers for skilled developers, but they create fragile, broken systems when used by non-coders.

2. Developer Sentiment & Education Studies (2025–2026)

The Analogy: Research frequently compares AI coders to scientific calculators. Owning a calculator doesn't make you a mathematician, and having AI generate Python doesn't make you a software engineer.
Shifting Focus: Learning to code is no longer about memorizing syntax, boilerplates, or APIs. It’s about building computational thinking, understanding data structures, debugging, and system design.

3. Tech Industry vs. Enterprise Realities

The Vision (Exec View): Non-engineers can use natural language prompts to automate basic tasks and build simple tools without writing raw code.
The Reality (Engineering View): AI struggle heavily with complex business architecture, legacy integration, and scalability. Humans are required to hold the domain context, review code, and maintain production systems.

Summary of What Matters vs. What Doesn't

Skills Declining in Value	Skills Rising in Value
Memorizing exact syntax & functions	System architecture & database design
Typing repetitive boilerplate code	Code review, auditing & security testing
Basic CRUD application generation	Prompt engineering & AI tool orchestration
Solo line-by-line implementation	Problem decomposition & domain expertise

The core difference between learning software engineering "before AI" vs. learning today boils down to where you invest your cognitive energy.

Previously, you spent 80% of your time mastering manual execution (syntax, APIs, setup) and 20% on high-level design. Today, that ratio is flipped: AI tools like Claude Code, Cursor, and Copilot handle boilerplate and syntax generation, forcing engineers to master architecture, verification, and system integration from day one.

The Evolution of the Learning Path

Phase	Pre-AI Engineering Roadmap	2026 AI-Augmented Engineering Roadmap
1. Languages & Syntax	Memorize language APIs, build-tool configurations, and exact code syntax line-by-line.	Learn core language mechanics (typing, concurrency models) to read, audit, and debug code efficiently.
2. Problem Solving	Solve 200+ LeetCode style algorithmic puzzles by writing raw code from scratch.	Understand Data Structures & Algorithms conceptually to evaluate time/space complexity of generated solutions.
3. Project Building	Build tutorial apps (to-do lists, clone apps) to practice syntax and state management.	Build production-ready, deployed systems with complex data flows, security constraints, and third-party API integrations.
4. AI Integration	Non-existent / Optional	Master prompt engineering, context-passing, and agentic tools (Cursor, Claude Code, GitHub Copilot).
5. Architecture & Ops	Deferred until mid-to-senior levels (system design, cloud, CI/CD, database schemas).	Accelerated to day one: System design, microservices, containerization (Docker), vector search, and edge deployments.

Step-by-Step Roadmap for 2026

Phase 1: Fundamental Mechanics & Reading Code: Focus on reading and auditing rather than rote memorization.
- Primary Languages: Learn TypeScript (web/full-stack) or Python/Go (backend/AI integration). Focus on reading standard syntax, understanding type systems, and async processing.
- Computer Science Core: Learn basic data structures (arrays, trees, maps) and execution models (memory management, threads, HTTP lifecycle).
- Code Auditing: Practice taking raw AI-generated code snippets and manually stepping through them to spot logic bugs, edge cases, and security vulnerabilities.
Phase 2: Modern AI-Assisted Tooling: Learn to direct AI models like a technical lead.
- AI-Native IDEs & Agents: Work fluently inside AI-first environments like Cursor, Windsurf, or terminal agents like Claude Code.
- Context Specification: Learn how to write clear, structured context files (.cursorrules, technical design docs) so AI models generate production-grade code that matches your architecture.
- Testing-Driven Directing: Write unit tests first, then direct AI agents to generate code until all tests pass automatically.
Phase 3: System Design, Databases & DevOps: Where human judgment is irreplaceable by AI.
- Databases: Schema design, SQL optimization (PostgreSQL), and AI-era storage like Vector Databases (for semantic search & RAG applications).
- System Architecture: REST vs. WebSockets, microservices vs. monoliths, caching (Redis), rate-limiting, and auth systems.
- Deployment Pipeline: Containerize applications with Docker, configure CI/CD pipelines via GitHub Actions, and deploy to cloud platforms.
Phase 4: Proof-of-Work (Deployed Production Projects): Stop building tutorial clones; build live products.
- Build 1–2 end-to-end, deployed web apps featuring real-world integration (e.g., payment processing, auth, dynamic caching, vector search).
- Include a documented Design Doc explaining why you chose specific architectural patterns, trade-offs, and security safeguards.

Local Free Claude & Codex with Ollama

Taki — Tue, 03 Mar 2026 05:26:13 +0000

Prerequisites

A machine with at least 16GB RAM (32GB+ recommended for better performance with larger models).
Operating system: macOS, Linux, or Windows (Ollama supports all).
Node.js installed (for installing CLI tools like Claude Code and Codex). You can download it from the official Node.js website if not already installed.
Sufficient storage for models (models can be several GB in size).
For optimal performance, a GPU (NVIDIA or Apple Silicon) is helpful but not required; CPU-only works.

Step 1: Install Ollama

Ollama is the core tool for running local AI models. Download and install it using the following command in your terminal:

curl -fsSL https://ollama.com/install.sh | sh

Verify the installation by running:

ollama -v

This should display the Ollama version (ensure it's v0.15 or later for ollama launch support).

Step 2: Pull a Suitable Coding Model

Ollama needs a local model to power Claude Code and Codex. Choose a model based on your hardware (RAM/VRAM). Here are recommendations for coding tasks:

For 16-32GB RAM (smaller models, faster on CPU): qwen2.5-coder:7b (good balance of speed and quality).

  ollama pull qwen2.5-coder:7b

For 32GB+ RAM (larger models, better accuracy): devstral-small-2 (24B parameters) or qwen3-coder:30b.

  ollama pull devstral-small-2

High-performance option (quantized for efficiency): glm-4.7-flash:q8_0 (requires ~19-24GB VRAM for best speed).

  ollama pull glm-4.7-flash:q8_0

If a download fails (e.g., checksum error), remove the model and retry:

ollama rm <model-name>
ollama pull <model-name>

Larger models provide better coding assistance but may run slower on limited hardware.

Step 3: Set Up and Use Claude Code with Ollama

Claude Code is an AI coding assistant from Anthropic, but you can run it locally with Ollama's models instead of paying for API access.

Installation

Install the Claude Code CLI globally via npm:

npm install -g @anthropic-ai/claude-code

Configuration

Option 1: Use ollama launch for easy setup (recommended):

ollama launch claude --model <model-name>  # e.g., ollama launch claude --model qwen2.5-coder:7b

This starts Claude Code, configures it to use your local model, and prompts you to confirm trust (type "yes").

Option 2: Manual configuration (add to your ~/.bashrc or ~/.zshrc file):

export ANTHROPIC_AUTH_TOKEN="ollama"
export ANTHROPIC_API_KEY=""
export ANTHROPIC_BASE_URL="http://localhost:11434/v1"

Reload your shell:

source ~/.bashrc  # or ~/.zshrc

Then launch:

claude --model <model-name>  # e.g., claude --model devstral-small-2

Usage

Once launched, you'll enter an interactive session. Type your coding query (e.g., "Write a Python function to sort a list").
Use Tab to switch modes (e.g., planning vs. building code).
Press Ctrl+P for options like sharing sessions or switching models.
Exit with Ctrl+C.
It runs fully offline and privately on your machine.

Step 4: Set Up and Use Codex with Ollama

Codex (inspired by OpenAI's original code model, often used in tools like GitHub Copilot) can be run locally via a CLI tool integrated with Ollama.

Installation

Install the Codex CLI globally via npm:

npm install -g codex

Configuration

Use ollama launch for setup:

ollama launch codex --model <model-name>  # e.g., ollama launch codex --model glm-4.7-flash:q8_0

This configures and launches Codex with your local model. Confirm trust if prompted.

For configuration without launching:

ollama launch codex config

Select your model and save.

Usage

In the interactive session, enter prompts like "Generate a JavaScript function for API calls."
Navigate with Tab, use Ctrl+P for menu options.
It supports code completion, explanation, and generation.
Fully local and free, no API keys needed.
Exit with Ctrl+C.

Tips and Troubleshooting

Performance: Start with smaller models if your machine is slower. Quantized models (e.g., ending in :q8_0) are faster.
Switching Models: Relaunch with a different --model flag.
Cloud Hybrid: If local is too slow, try cloud models like minimax-m2.1:cloud (pull with ollama pull minimax-m2.1:cloud), but note potential costs after free tier.
Errors: Ensure Ollama is running (ollama serve if needed). Check RAM usage with system tools.
Updates: Keep Ollama updated for new features and model support.
This setup replaces paid services like Anthropic or OpenAI APIs, keeping everything private and cost-free.

Developer-focused prompting tricks to use Cursor

Taki — Mon, 02 Mar 2026 06:48:31 +0000

developer-focused prompting tricks to use Cursor (especially Composer / Agent / Chat) more effectively while burning fewer credits/tokens in 2026. The goal is to get better results in fewer turns, with smaller context, and by preferring cheaper models when possible.

Core Mindset Shifts for Saving Money

One good prompt > many mediocre ones — Invest time crafting a strong first prompt (even outside Cursor in plain ChatGPT/Claude.ai first).
Context is expensive — Every file/reference sent repeatedly costs tokens. Minimize it.
Cheap models first, frontier models last — Use them for 70-80% of tasks.

Prompting Tricks & Patterns That Actually Save Credits

Start new chats aggressively (biggest single saver)

Long chat histories re-send massive context every turn → explodes costs.
- Rule: New feature / bug / refactor = new chat.
- Paste only the relevant snippet + 1-3 @file references.
- Pro users: This alone can cut monthly usage 30-50%.
Use ultra-specific @references instead of @codebase

@codebase pulls huge context → very expensive and often noisy.

Good:

   Fix the auth flow bug here:
   @src/auth/login.ts
   @src/middleware/auth.ts
   The token refresh fails with 401 when refresh_token is expired but access_token is still valid. Add proper handling + tests.

Bad: @codebase fix auth bug

Demand a plan first (Plan Mode or explicit) Shift+Tab → Plan Mode (or write it). Example starter prompt:

   Before writing any code:
   1. Think step-by-step and output a clear, numbered plan of changes (files affected, approach, potential risks).
   2. Ask me 1-3 clarifying questions if anything is ambiguous.
   3. Only proceed to code after I approve the plan.

→ Avoids 3–10 wasteful "oops, wrong approach" iterations.

"Be concise" + output format constraints LLMs love to ramble → force short, usable output.

   Respond only with:
   - Brief explanation (max 4 sentences)
   - Code changes as SEARCH/REPLACE blocks
   - No chit-chat, no markdown fluff, no repeating the prompt

Or for Composer:

   Make minimal diff. Only change what's necessary. Keep existing style & comments. Output clean SEARCH/REPLACE.

Test-first or verify loop (reduces blind edits) For complex changes:

   1. First, write Jest/Vitest unit tests that would pass if the feature works correctly.
   2. Then implement the minimal code to make those tests pass.
   3. Output tests + code separately.

→ You run tests → paste failing output → AI fixes → fewer full re-runs.

Reuse .cursorrules + custom .mdc files heavily Put permanent context there (style, architecture rules, "never use X", "prefer Y pattern", Tailwind rules, etc.). → Saves pasting the same 300–800 tokens in every prompt. Keep rules <500 lines total, focused & composable.

Here: you can refer to rules in cursor directory:

https://cursor.directory/blazor-aspnetcore-cursor-rules

"YOLO small" + incremental asks

Instead of: "Implement full user dashboard with charts, auth, dark mode"

Do:
- Prompt 1: "Plan the component tree for user dashboard"
- Prompt 2: "Create skeleton + layout @dashboard/page.tsx"
- Prompt 3: "Add auth guard + loading state" → Cheaper per step, easier to correct early.
Chain of verification / pros-cons when unsure

For decisions (lib choice, architecture):

   Evaluate adding Zustand vs Redux Toolkit for state:
   - List pros/cons of each in this project (Next.js App Router, server components heavy)
   - Recommend one + justify
   - Show minimal code example if I choose your recommendation

→ One prompt often replaces 5–6 back-and-forths.

Model switching cheat sheet (2026 reality)
- Daily work (80%): Composer 1.5 (50%+ cheaper than newest, fast) or Claude 4.x Sonnet / Gemini 2.5 Flash / GPT-5 mini equivalents.
- Hard problems only: Claude Opus 4.6 no-thinking (cheaper than with thinking) or newest frontier.
- Reactivate Composer 1 if available — often ~3× cheaper + faster for many tasks. Settings → Models → add / prioritize cheaper variants.
Pre-refine prompts outside Cursor

Craft complex prompts in free Claude.ai / ChatGPT → copy-paste into Cursor when ready.

→ You burn expensive Cursor credits only on final execution.

Quick Copy-Paste Starter Templates

Minimal bug fix

@buggy-file.ts
This throws "Cannot read property 'name' of undefined" on line 42 when user is null.
Fix it safely + add guard + unit test snippet.
Be concise. Only SEARCH/REPLACE blocks + 1–2 sentence explanation.

Refactor request

Refactor @src/services/api.ts to use TanStack Query instead of raw fetch.
Keep the same public API.
Plan first:
1. List files to change
2. Migration steps
Then implement minimal changes.

Apply these → many heavy Cursor users report cutting their effective monthly spend 40–70% while getting better code faster.

LLM, RAG, AGENT And MCP

Taki — Sat, 24 Jan 2026 16:22:39 +0000

🧠 Modern AI Systems — A Practical, End-to-End Mental Model

Goal: Understand how LLMs, RAG, AI Agents, and MCP fit together to build real production AI systems, not demos.

Modern AI is not one model.
It is a system of responsibilities.

LLM   → understands & reasons with language
RAG   → retrieves correct knowledge
Agent → decides & performs actions
MCP   → standardizes context & tools

Each layer exists because the previous one cannot solve real-world problems alone.

1️⃣ LLM (Large Language Model) — The Brain

What an LLM actually is (no marketing)

An LLM is a probabilistic model trained to predict:

“What token comes next?”

That’s it.

It does not:

think like a human
reason independently
“know” facts by default

It predicts patterns extremely well.

Mental model (important)

🧠 A very powerful autocomplete engine

Example:

"The capital of France is ___"

→ “Paris”

Not because it understands geography,
but because that sequence appears frequently in training data.

What LLMs are good at

✅ Natural language understanding
✅ Writing & summarization
✅ Translation
✅ Code generation
✅ Reasoning within provided context

Critical weaknesses

❌ Hallucination (confidently wrong answers)
❌ No access to private/company data
❌ No long-term memory
❌ Knowledge cutoff
❌ Cannot take actions (no APIs, no workflows)

👉 LLMs alone are not usable in production systems.

This leads to the next layer.

2️⃣ RAG (Retrieval-Augmented Generation) — Giving the Brain Memory

Problem RAG solves

“How can the LLM answer questions using our private, up-to-date data without retraining it?”

Core idea (simple)

Instead of:

User → LLM → Answer (may hallucinate)

We do:

User → Retrieve relevant data → LLM → Answer grounded in data

LLM = language & reasoning
RAG = knowledge retrieval

How RAG works (step by step)

1. Prepare data

Split documents into chunks
Convert text → vectors (embeddings)
Store in a vector database

2. User asks a question

Question → vector

3. Similarity search

Retrieve the most relevant chunks

4. Prompt the LLM

SYSTEM:
Answer only using the provided context.

CONTEXT:
[retrieved documents]

USER:
What is the refund policy?

5. LLM answers

Grounded
Auditable
Much lower hallucination risk

Why RAG is mandatory in real systems

Without RAG:

AI makes things up
Legal and compliance risk
Users lose trust

With RAG:

Accurate answers
Data can be updated anytime
No model retraining

RAG tooling ecosystem

Embedding models

OpenAI embeddings
Cohere
SentenceTransformers
BGE / E5 / Instructor

Vector databases

Pinecone
Weaviate
Qdrant
Milvus
FAISS
MongoDB Atlas Vector Search
Elasticsearch (vector)

Frameworks

LangChain
LlamaIndex
Haystack

RAG limitation

RAG can:
✔ answer questions

RAG cannot:
❌ decide what to do
❌ call APIs
❌ run workflows

That requires the next layer.

3️⃣ AI Agent — Giving the Brain Hands & Goals

Problem agents solve

“I don’t just want answers — I want the AI to do things.”

Example:

“Check my order, see if it’s delayed, open a ticket, notify me.”

This is multi-step work.

What an AI Agent is

An AI Agent =

LLM
+ tools
+ memory
+ decision loop

Core agent loop (critical concept)

1. Observe (input & state)
2. Reason (LLM)
3. Choose action
4. Execute tool
5. Observe result
6. Repeat until goal achieved

This is often called a ReAct loop (Reason + Act).

Example agent tools

Tool	Purpose
search_docs	RAG search
get_order_status	Backend API
create_ticket	CRM / Support
send_email	Notification
write_db	Memory / Logging

When to use (and not use) agents

Use agents when:

Multi-step reasoning is required
Tools must be orchestrated
Decisions depend on outcomes

Do NOT use agents for:

Static FAQs
Simple Q&A
Single-step tasks

Agents are:

Slower
More expensive
Harder to debug

Agent tooling ecosystem

Frameworks

LangChain Agents
OpenAI Assistants
AutoGen
CrewAI
Semantic Kernel

Execution

REST / gRPC
Function calling
Webhooks

Memory

Redis
PostgreSQL
Vector databases
In-memory stores

4️⃣ MCP (Model Context Protocol) — The Nervous System

This is architecture-level, not prompt engineering.

The scaling problem MCP solves

As systems grow:

Prompts duplicated everywhere
Tools defined inconsistently
Context assembled differently per service
Agents break when tools change
Models tightly coupled to apps

This becomes prompt spaghetti 🍝

What MCP is (plain English)

MCP is a protocol that standardizes how models:

discover tools
receive context
access resources

Think of it as:

📡 A REST API for LLM context and capabilities

Mental model

LLM / Agent
   ↓
MCP Server
   ↓
Tools | Data | Memory | Capabilities

The model does not guess what it can do.
It discovers capabilities via MCP.

Why MCP matters

With MCP:

Clean architecture
Tool discoverability
Model-agnostic systems
Easier testing & maintenance

Without MCP:

Hidden coupling
Fragile agents
Hard-to-replace models

MCP ecosystem

OpenAI MCP
Anthropic MCP
Custom MCP servers
Integrations: databases, filesystems, APIs, GitHub

5️⃣ Real-World Project — End-to-End System

Project: AI Customer Support Assistant (E-commerce)

Requirements

Answer policy questions
Check order status
Handle refunds
Escalate to humans when needed

Architecture

Chat UI
  ↓
Backend API (e.g. NestJS)
  ↓
MCP Server
  ↓
Agent
  ↓
RAG + Business Tools

Component responsibilities

LLM

Language understanding & reasoning

RAG

Product docs
Refund & shipping policies
FAQs in vector DB

Agent

Decide when to search
Call order APIs
Create tickets
Escalate issues

MCP

Defines tools:
- search_knowledge_base
- get_order_status
- create_support_ticket
Provides clean, consistent context

Example user flow

User:

“My order hasn’t arrived. What should I do?”

Agent:

Retrieve shipping policy (RAG)
Call order status API
Evaluate delay
Decide next action
Respond or open ticket

No hallucination
No hardcoded prompts
Fully scalable

🧠 Final Mental Model (memorize this)

LLM   → understands language
RAG   → retrieves truth
Agent → performs actions
MCP   → organizes everything

🎯 Target Project (One Project, Many Levels)

AI Knowledge & Action Assistant for a Company

Answers questions from internal docs

Can take actions (create tickets, generate reports)

Safe, auditable, scalable

Stack:

Frontend: Next.js
Backend: NestJS
AI: LLM + RAG + Agents + MCP
Infra: Docker, Env-based config

PHASE 0 — Mental Model (Day 0)

Before writing code, understand this flow:

UI → API → AI Core → Tools → Result → UI

Everything you build later fits somewhere here.

If you don’t know where a piece belongs, don’t code it.

PHASE 1 — LLM Basics (Beginner)

⏱ Time: 1–2 days
🎯 Goal: “I can talk to an LLM safely via backend”

1.1 What you build

A simple chat API:

POST /chat
{
  "message": "Explain SOLID principles"
}

Response:

LLM text

1.2 Architecture (minimal but correct)

Next.js
  ↓
NestJS Controller
  ↓
AI Service
  ↓
LLM Provider (OpenAI / Gemini / Claude)

1.3 Key lessons here (VERY important)

✅ Backend owns AI calls

Never call LLM directly from Next.js.

Why:

API key security
Rate limiting
Observability
Cost control

✅ Prompt ≠ Message

Start separating:

system prompt
user prompt

This prepares you for agents later.

1.4 Common beginner mistakes

❌ Hardcoding API keys
❌ No timeout handling
❌ No token limits
❌ Trusting LLM output blindly

Exit criteria

✔ You can explain what an LLM can & cannot do
✔ You understand tokens & costs
✔ You never expose LLM keys to frontend

PHASE 2 — RAG (Intermediate Foundation)

⏱ Time: 3–5 days
🎯 Goal: “My AI answers using MY data”

2.1 What you add

Document ingestion
Embeddings
Vector search

2.2 Architecture upgrade

User Question
  ↓
Vector Search
  ↓
Relevant Chunks
  ↓
LLM (context injected)
  ↓
Answer + Sources

2.3 What you actually build

Backend

/documents/upload
/documents/index
/ask

Storage

Raw files (S3 / local)
Vector DB

2.4 Chunking (don’t skip this)

Bad chunking = bad AI.

Rules:

300–800 tokens per chunk
Overlap ~10–20%
Keep semantic meaning intact

2.5 Prompt discipline (critical)

Your prompt should say:

“Answer ONLY using provided context.
If missing, say you don’t know.”

This single rule prevents 80% hallucinations.

Common RAG failures

❌ Stuffing too much context
❌ No metadata filtering
❌ No source citation
❌ Treating vector DB as magic

Exit criteria

✔ AI answers correctly from internal docs
✔ Hallucination rate is low
✔ You can swap vector DB without rewriting logic

PHASE 3 — Structured AI Core (Pre-Agent)

⏱ Time: 2–3 days
🎯 Goal: “AI logic is modular and testable”

3.1 Why this phase exists

If you jump straight to agents:

💥 You will create an un-debuggable mess

So first: structure the AI core.

3.2 Introduce these concepts

Prompt templates
Output schemas (JSON)
AI “use cases”

Example:

AnswerQuestionUseCase
SummarizeDocUseCase
ExtractTasksUseCase

Each one:

Has input
Has prompt
Has expected output

3.3 This unlocks later

Tool calling
Agents
Validation
Retries

Exit criteria

✔ AI responses are structured
✔ You can validate outputs
✔ You can test AI logic without UI

PHASE 4 — AI Agents (Action Layer)

⏱ Time: 4–7 days
🎯 Goal: “AI can plan and act, not just talk”

4.1 What changes conceptually

From:

Request → LLM → Response

To:

Goal → Think → Act → Observe → Repeat

4.2 What you build

Agent with:

Goal
Memory
Tool registry
Stop conditions

4.3 Example Agent

Goal:

“Create a weekly report and open tasks”

Tools:

search_docs
create_jira_ticket
generate_markdown

4.4 Critical safety rules

Max steps
Max tokens
Tool allowlist
Read-only vs write tools

This is non-negotiable in production.

Common agent failures

❌ Infinite loops
❌ Too much autonomy
❌ No human approval
❌ No logs

Exit criteria

✔ Agent completes tasks reliably
✔ You can stop it at any time
✔ Every action is logged

PHASE 5 — MCP (Production Tooling Layer)

⏱ Time: 3–5 days
🎯 Goal: “Safe, scalable tool integration”

5.1 What MCP gives you

Tool discovery
Strong schemas
Permission control
Replaceable tools

5.2 Architecture

Agent
 ↓
MCP Client
 ↓
MCP Server
 ↓
Tool Implementations

5.3 Why MCP matters in production

Without MCP:

Hardcoded tools
Unsafe execution
Tight coupling

With MCP:

Clean contracts
Auditing
Enterprise-ready

Exit criteria

✔ Tools are schema-defined
✔ Permissions are enforced
✔ Agents can’t “invent” tools

PHASE 6 — Production Hardening

⏱ Time: ongoing
🎯 Goal: “This won’t wake me up at 3AM”

6.1 Mandatory production features

🔐 Security

API auth
Tool permissions
Input sanitization

📊 Observability

Prompt logs
Token usage
Agent step traces

💰 Cost control

Token budgets
Rate limits
Model tiers

6.2 Human-in-the-loop

For risky actions:

Show plan
Ask approval
Then execute

PHASE 7 — Scaling & Multi-Agent

⏱ Time: advanced
🎯 Goal: “AI team, not AI bot”

Examples:

Planner agent
Executor agent
Reviewer agent

Each has one responsibility.

FINAL MENTAL MODEL (Memorize This)

Phase 1: LLM → Brain
Phase 2: RAG → Knowledge
Phase 3: Structure → Discipline
Phase 4: Agent → Action
Phase 5: MCP → Safety
Phase 6: Production → Survival

Developer can write unit test by cypress prompt

Taki — Wed, 26 Nov 2025 08:24:51 +0000

🚀 TECHNICAL DOCUMENT: Cypress Prompt – Natural Language Test Automation (2025)

1. OBJECTIVE

This document explains:

What Cypress Prompt is and how NLP-based test automation works.
How Cypress converts natural language → test execution.
How to integrate it into our TypeScript + POM + SOLID Cypress framework.
A complete example using your code.
Comparison with Microsoft Playwright MCP Agent.

2. INTRODUCTION TO CYPRESS PROMPT (NLP)

🔍 What is Cypress Prompt?

Cypress Prompt is a new feature (2024–2025) that allows engineers to write Cypress tests in natural language, for example:

cy.prompt([
  "visit https://todomvc.com/examples/react/dist/",
  'type "Daily Report" into the new todo field',
  'type {enter} into the new todo field',
  'verify "Daily Report" todo is created successfully',
])

Cypress will:

Parse the natural language instructions
Identify intents (visit, click, type, verify)
Execute the steps automatically in the browser
Generate a full run log in Cypress Cloud
Optionally export code into traditional Cypress test syntax

🔥 Strengths

Create tests extremely fast (up to 80% faster for simple flows)
QA with basic English can participate
Very useful for prototyping and rapid regression test creation
Integrates directly into Cypress Cloud

⚠️ Limitations

Not a replacement for real automation architecture
Not suitable for highly dynamic or complex UI flows
Not good for API tests or data-driven scenarios
Requires strong English instruction clarity
Should be paired with POM for maintainability

3. NLP WORKFLOW OF CYPRESS PROMPT

🧠 1. User writes test instructions in English

Example:

“visit home page → add todo → verify new item exists”

⚙️ 2. Cypress parses the instructions

Detects action intent
Extracts selector context
Interprets entities (text input, button name, field)

🤖 3. Executes the test in the browser

Timelines
Snapshots
Screenshots
Logs

🧪 4. (Optional) Export to real code

You can generate Cypress .cy.ts code from the executed actions.

4. INTEGRATING CYPRESS PROMPT INTO OUR TYPESCRIPT + SOLID FRAMEWORK

Below is your code, reorganized cleanly using common SDET design patterns.

4.1 BasePage (abstract class)

export abstract class BasePage {
  abstract visit(): void;

  protected find(selector: string) {
    return cy.get(selector);
  }
}

4.2 DashboardTodoPage

import { BasePage } from "./BasePage";

export class DashboardTodoPage extends BasePage {
  visit(): void {
    cy.visit("/");
  }

  loginWithPrompt() {
    cy.prompt([
      'visit https://todomvc.com/examples/react/dist/',
      'type "Daily Report" into the new todo field',
      'type {enter} into the new todo field',
      'verify "Daily Report" todo is created successfully',
    ]);
  }
}

4.3 Test spec

import { DashboardTodoPage } from "../pages/DashboardTodoPage";

describe("Create new todo app by prompt", () => {
  const dashboard = new DashboardTodoPage();

  it("create todo using cy prompt", () => {
    dashboard.visit();
    dashboard.loginWithPrompt();
  });
});

4.4 cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://todomvc.com/',
    supportFile: 'cypress/support/e2e.ts',
    specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
    env: {
      CYPRESS_PROMPT_ENABLED: true,
    },
    experimentalPromptCommand: true,
  },
  projectId: '...',
})

5. CYPRESS CLOUD WORKFLOW (WITH PROMPT)

Code pushed to GitHub
GitHub Action triggers Cypress Cloud
Tests run in real browsers
Cypress Cloud processes NLP steps
Cloud provides:

* screenshots
* video
* snapshots
* execution timeline
* AI-generated summary

6. WHEN TO USE CYPRESS PROMPT

✔ Ideal use cases:

Quickly validating new features
Creating UI tests rapidly
Helping manual testers write automation
Rapid prototyping
Simple end-to-end flows

❌ Not recommended for:

Complex UI with dynamic selectors
Large-scale regression suites
API chained tests
Data-driven scenarios
Performance, security, or load testing
Scenarios requiring high stability & consistency

7. CYPRESS PROMPT vs PLAYWRIGHT MCP AGENT (2025)

🎯 Overview

Playwright MCP Agent (Microsoft AI Agent) is a significantly more advanced AI automation model compared to Cypress Prompt.

Capability	Cypress Prompt	Playwright MCP Agent
NLP quality	Good	Excellent (Azure AI + MCP)
Code generation	Medium	Extremely strong
AI Decision Making	Basic	Multi-agent reasoning
Selector engine	Medium	Best in class (AI Locator 2.0)
API support	Weak	Strong
Parallel execution	Good	Enterprise-grade
Cross-browser	Yes	Yes (better)
Convert NLP → code	Yes	Yes (much better)
Designed for	Rapid test creation	Enterprise AI automation
Multi-step chaining	Limited	Strong (agent-to-agent reasoning)
Error recovery	Weak	Advanced self-healing

Vite for React SPA

Taki — Sun, 27 Jul 2025 14:09:48 +0000

🔥 Why Vite is Great for SPA React Projects

1. Blazing Fast Dev Experience

ESM-based Hot Module Replacement (HMR): Vite uses native ES Modules, so dev server startup is instant, and code changes reflect nearly instantly.
Unlike older tools like Create React App (CRA), Vite doesn't bundle everything upfront—only what’s needed.

2. Minimal Config, Extensible When Needed

Out of the box: ✅ JSX support, ✅ TypeScript, ✅ CSS Modules/PostCSS, ✅ Environment variables.
Need more? It uses Rollup under the hood for production, so you can customize or add plugins easily.

3. First-Class TypeScript + React Support

npm create vite@latest my-app --template react-ts

It scaffolds a clean project in seconds. You’re ready to go with full TypeScript and React setup.

4. Lightweight & SPA-Ready

Vite is perfect for SPAs because:
- It supports React Router easily.
- You don’t get the overhead of a backend framework like Next.js or Remix.
- You can control routing and deployment exactly how you want (e.g., with static hosting on Vercel, Netlify, etc.).

5. Built-in Features

Code splitting
Tree shaking
Built-in dev server
Easy static asset handling

⚖️ When to Choose Vite Over Next.js or CRA

Use Case	Choose Vite
Pure SPA (no SSR or API layer)	✅ Best Choice
Want fast startup & dev speed	✅ Ideal
Full control over routing/build	✅ Preferable
Don’t need server-side rendering	✅ Good fit
Need backend/API integration	❌ Consider NestJS + Vite or Next.js

If you want a frontend-only app that fetches from APIs (like a NestJS backend), Vite is excellent.

💡 Example: Create Vite + React + TypeScript Project

npm create vite@latest my-app --template react-ts
cd my-app
npm install
npm run dev

📁 Folder Structure Preview

my-app/
├─ src/
│  ├─ App.tsx
│  ├─ main.tsx
│  └─ assets/
├─ public/
├─ index.html
├─ vite.config.ts

🧠 Best Practices with Vite in SPA

Use React Router DOM for client-side routing.
Use .env files for API keys, base URLs.
Keep Vite’s config minimal unless you need advanced Rollup behavior.
For production: run vite build and deploy the dist folder to static hosting.

⚠️ When Vite isn't Ideal

If you need:

SSR (Server-side rendering) → Use Next.js
Incremental static regeneration (ISR) or hybrid SSR → Use Next.js
Backend + frontend in one → Use NestJS + Vite with Vite as frontend

✅ Verdict

Yes, Vite is arguably the best option today for building a modern, fast, and clean React SPA if:

You don’t need SSR.
You want fast builds and DX.
You’re building a frontend-only client (e.g., talking to a NestJS API).

vite.config.ts for a React SPA using Vite that proxies API requests to a NestJS backend (which might run at http://localhost:3000).

🛠 Vite Proxy Config for NestJS Backend

✅ Goals:

Vite runs on http://localhost:5173
NestJS runs on http://localhost:3000
All requests to /api are proxied to NestJS
Avoid CORS issues in development

📄 `vite.config.ts`

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173, // Frontend port
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // NestJS backend
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

📁 Frontend Call Example (e.g., using Axios or Fetch)

// This call from React (port 5173) will be proxied to NestJS (port 3000)
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data))

Behind the scenes:
/api/users → proxied to → http://localhost:3000/users

💡 Bonus: Handling Environment Variables

Add a .env file at the root of your Vite project:

VITE_API_BASE_URL=/api

Then in your code:

const apiUrl = import.meta.env.VITE_API_BASE_URL;
fetch(`${apiUrl}/users`);

🔒 Don't forget for Production

In production:

You need to handle the /api routing via reverse proxy (e.g., Nginx, Vercel rewrites, or within your backend).
Or configure your frontend to use the full backend URL directly if they're deployed separately.

The full `NestJS + Vite` Docker dev setup as well:

complete Docker-based development setup for a fullstack Vite (React) + NestJS app. This includes:

✅ Yarn workspaces or separate folders
✅ Live reload in both apps
✅ Vite proxy to NestJS for /api
✅ Docker + docker-compose dev setup

🏗️ Folder Structure (Monorepo or Parallel)

You can go with one of the following:

Option A – Monorepo-style:

fullstack-app/
├── client/       # Vite + React
├── server/       # NestJS
├── docker-compose.yml
└── README.md

1️⃣ Vite (React) Frontend Setup

client/vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // Allow Docker access
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://server:3000', // use Docker service name
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

client/package.json

{
  "name": "client",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^5.0.0"
  }
}

2️⃣ NestJS Backend Setup

server/main.ts

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  app.setGlobalPrefix('api') // Base path for APIs
  await app.listen(3000, '0.0.0.0')
}
bootstrap()

server/package.json

{
  "name": "server",
  "version": "1.0.0",
  "scripts": {
    "start:dev": "nest start --watch"
  },
  "dependencies": {
    "@nestjs/common": "^10.0.0",
    "@nestjs/core": "^10.0.0",
    "@nestjs/platform-express": "^10.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@nestjs/cli": "^10.0.0",
    "@nestjs/schematics": "^10.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.0"
  }
}

3️⃣ Docker Setup

`client/Dockerfile`

# --- React Dev ---
FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 5173
CMD ["yarn", "dev"]

`server/Dockerfile`

# --- NestJS Dev ---
FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start:dev"]

Root `docker-compose.yml`

version: '3.8'

services:
  client:
    build:
      context: ./client
    ports:
      - "5173:5173"
    volumes:
      - ./client:/app
      - /app/node_modules
    depends_on:
      - server

  server:
    build:
      context: ./server
    ports:
      - "3000:3000"
    volumes:
      - ./server:/app
      - /app/node_modules
    command: yarn start:dev

✅ Usage

🔧 1. Start the Dev Stack

docker-compose up --build

Frontend: http://localhost:5173
Backend: http://localhost:3000/api

⚙️ 2. Make a test route in NestJS

server/src/app.controller.ts

@Get('hello')
getHello(): string {
  return 'Hello from NestJS';
}

Then test in your React app:

useEffect(() => {
  fetch('/api/hello')
    .then(res => res.text())
    .then(console.log)
}, []);

📦 Optional: Add MongoDB to Compose

Want to persist data? Add this to docker-compose.yml:

  mongo:
    image: mongo:6
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

Then in NestJS, connect to mongodb://mongo:27017.

🧠 Recap

Layer	Tool	Purpose
Frontend	Vite	Fast React SPA
Backend	NestJS	Modular API w/ TypeScript
Proxy	Vite Dev	`/api → NestJS`
Runtime	Docker	Isolated Dev Envs

AI Flashcard: Set up basic local docker with fullstack project

Taki — Fri, 27 Jun 2025 17:39:47 +0000

Docker concept and command in a friendly, beginner-friendly way. Think of this like you're setting up a virtual workspace for each part of your app.

🐳 What Is Docker? (in plain terms)

Imagine you're a chef and you want to cook a recipe that needs:

Specific tools
Specific ingredients
A special oven

Docker is like a sealed cooking station with everything already prepped: ingredients, tools, oven — all packed into a neat box. You just plug it in anywhere, and boom! It works exactly the same.

In dev terms:

A container = an isolated workspace with everything your app needs
A Dockerfile = the recipe for building that container
Docker Compose = the cookbook that runs multiple containers together (like frontend and backend)

👷‍♂️ Step-by-Step: Understanding Docker Setup

Let’s walk through the setup of a NestJS backend and a Next.js frontend, and how Docker helps us run them together on your local machine.

🔹 Step 1: The `Dockerfile` – Your App’s Recipe

Let’s start with NestJS (backend).

Here’s the backend/Dockerfile again — now with beginner-friendly explanation:

# 1. Start from an official Node image (like installing Node.js on a fresh computer)
FROM node:18-alpine

# 2. Set the directory inside the container where code will live
WORKDIR /app

# 3. Copy dependency files into the container
COPY package.json yarn.lock ./

# 4. Install dependencies inside the container using yarn
RUN yarn install

# 5. Copy all the rest of your backend code into the container
COPY . .

# 6. Tell Docker we’ll use port 3000 for this app
EXPOSE 3000

# 7. Run the app in dev mode (just like yarn start:dev on your own computer)
CMD ["yarn", "start:dev"]

👀 So in short:

Think of this as setting up a little dev computer just for NestJS
When you docker build, it runs this step-by-step to create that environment

Do the same for the frontend/Next.js, just change the port and command:

FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 3001
CMD ["yarn", "dev"]

🔸 Step 2: `docker-compose.yml` – The Team Manager

This file lives at the root of your project and brings both frontend and backend containers to life together.

Here's what it looks like, again with full beginner-friendly explanation:

version: "3.9" # Version of Docker Compose

services: # You can think of "services" as your different apps (like backend and frontend)
  backend: # Name of the service
    build: ./backend # Tells Docker to look in backend/ and use its Dockerfile
    ports:
      - "3000:3000" # Maps local port 3000 to container's port 3000
    volumes:
      - ./backend:/app # Syncs your local backend folder into the container (for live updates!)
      - /app/node_modules # Exclude node_modules to avoid conflicts
    command: yarn start:dev # What to run when the container starts
    restart: unless-stopped # Restart if it crashes

  frontend:
    build: ./frontend
    ports:
      - "3001:3001"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    command: yarn dev
    restart: unless-stopped
    depends_on:
      - backend # Make sure backend starts first

💡 Think of docker-compose.yml as the orchestra conductor — it starts both backend and frontend, makes sure they talk to the right ports, and even restarts them if they crash.

🏁 Step 3: Build & Run Everything

Just open your terminal and run:

docker-compose up --build

🔍 What’s happening here?

--build: Builds containers from your Dockerfiles.
Starts both backend and frontend
Maps their ports so you can visit:

🧠 http://localhost:3000 → NestJS
🎨 http://localhost:3001 → Next.js

🚀 Step 4: Live Code Changes (Hot Reload)

Because of this line in docker-compose.yml:

volumes:
  - ./frontend:/app

It means:

Any changes you make on your local machine inside frontend/ or backend/ are instantly visible inside the container.

So you can code like normal, and the app will auto-reload (just like without Docker).

🧹 Step 5: Stop Everything

To stop the containers:

docker-compose down

💡 Think of this as unplugging the cooking stations when you're done.

🔍 Quick Reference

Concept	Meaning (Friendly)
`Dockerfile`	A recipe for building an app container
`docker build`	Build the image based on the recipe
`docker-compose`	A way to start multiple containers together
`volumes`	Keeps your code changes synced in real time
`ports`	Makes your app accessible on `localhost`
`CMD`	The command that runs when the container starts

🧠 Final Thoughts

You’re not just “installing stuff in Docker” — you’re creating tiny, isolated computers for each part of your app. This is great because:

It works exactly the same on every computer (or server)
You avoid the “it works on my machine” problem
Easy to scale to production later

APPLY BASIC DOCKER TO PROJECT

Local development environment with Docker for a fullstack app using Next.js (frontend) and NestJS (backend).

🧱 App Architecture

Frontend: Next.js app runs on http://localhost:3001
Backend: NestJS app runs on http://localhost:3000
Package manager: yarn
Docker: Each app runs in its own container for isolation.

📁 Folder Structure

my-fullstack-app/
├── backend/         # NestJS app
│   ├── src/
│   └── ...
├── frontend/        # Next.js app
│   ├── pages/
│   └── ...
├── docker-compose.yml

You’ll have:

frontend/: your Next.js app
backend/: your NestJS app
docker-compose.yml: controls how containers work together

✅ Step-by-Step Setup

1. Scaffold Both Apps (using `yarn`)

🔧 Create backend (NestJS):

npm i -g @nestjs/cli
nest new backend
# Choose yarn

🎨 Create frontend (Next.js):

npx create-next-app frontend --use-yarn
# Choose TypeScript if you want

2. Set Up Docker for Each App

🔸 `backend/Dockerfile`

# Use Node image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package and install deps
COPY package.json yarn.lock ./
RUN yarn install

# Copy all files
COPY . .

# Open port 3000
EXPOSE 3000

# Start NestJS in dev mode
CMD ["yarn", "start:dev"]

🔸 `frontend/Dockerfile`

FROM node:18-alpine

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install

COPY . .

EXPOSE 3001

CMD ["yarn", "dev"]

3. Create `docker-compose.yml`

At root (my-fullstack-app/):

version: "3.9"
services:
  backend:
    build: ./backend
    ports:
      - "3000:3000"
    volumes:
      - ./backend:/app
      - /app/node_modules
    command: yarn start:dev
    restart: unless-stopped

  frontend:
    build: ./frontend
    ports:
      - "3001:3001"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    command: yarn dev
    restart: unless-stopped
    depends_on:
      - backend

📝 Explanation:

volumes: Syncs local files → container (for live code change).
restart: unless-stopped: Restart if crashed.
depends_on: Makes sure backend starts first.

4. Update App Ports

In NestJS `main.ts`:

// backend/src/main.ts
await app.listen(3000);

In Next.js, default dev port is 3000. Change it in `package.json`:

// frontend/package.json
"scripts": {
  "dev": "next dev -p 3001"
}

5. Add `.dockerignore` (optional but recommended)

For both backend/ and frontend/:

node_modules
.dockerignore
Dockerfile
docker-compose.yml

6. Run the Apps

At the root of your project (my-fullstack-app/), run:

docker-compose up --build

✅ After Running

🌐 Frontend: http://localhost:3001
⚙️ Backend: http://localhost:3000

When you update your code (thanks to volumes), it reloads automatically 🎉

🧪 Test it

Create a simple API route in backend/src/app.controller.ts:

@Get('hello')
getHello(): string {
  return 'Hello from NestJS!';
}

Call it in frontend/pages/index.tsx using fetch('http://localhost:3000/hello')

🔄 Stop Everything

docker-compose down

🛠 Tips

Use .env for managing environment variables
Mount volume node_modules as anonymous to avoid conflicts
If you're on Windows, Docker Desktop is required
If you want hot reload to work better with NestJS, install ts-node-dev

yarn add --dev ts-node-dev
# And in package.json
"start:dev": "ts-node-dev --respawn --transpile-only src/main.ts"

AI Flashcard: NextJs (Basic)

Taki — Thu, 19 Jun 2025 07:06:43 +0000

1. Create a FlashCard Component

Create a file called components/FlashCard.tsx:

import React from 'react';

export interface FlashCard {
  phrase: string;
  meaning: string;
  breakdown: string[];
  simpleMeaning: string;
  usageContext: string;
  examples: {
    sentence: string;
    explanation: string;
  }[];
  similarPhrases: string[];
  tip: string;
  domainUsage: string;
}

interface FlashCardProps {
  card: FlashCard;
}

const FlashCard: React.FC<FlashCardProps> = ({ card }) => {
  return (
    <div className="max-w-3xl mx-auto bg-white shadow-lg rounded-lg p-6 my-6">
      {/* Phrase Header */}
      <h2 className="text-2xl font-bold mb-4">🔤 {card.phrase}</h2>

      {/* Explanation Section */}
      <section className="mb-4">
        <h3 className="text-xl font-semibold mb-2">📘 Explanation</h3>
        <p className="mb-2"><strong>Definition:</strong> {card.meaning}</p>
        <p className="mb-2">
          <strong>Phrase Breakdown:</strong>
          <ul className="list-disc list-inside">
            {card.breakdown.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </p>
        <p className="mb-2"><strong>Meaning (in simple English):</strong> {card.simpleMeaning}</p>
        <p className="mb-2"><strong>Usage Context:</strong> {card.usageContext}</p>
      </section>

      {/* Examples Section */}
      {card.examples.length > 0 && (
        <section className="mb-4">
          <h3 className="text-xl font-semibold mb-2">🧠 Examples</h3>
          <table className="table-auto border-collapse w-full">
            <thead>
              <tr>
                <th className="border p-2 text-left">English Sentence</th>
                <th className="border p-2 text-left">Simple Meaning</th>
              </tr>
            </thead>
            <tbody>
              {card.examples.map((ex, index) => (
                <tr key={index}>
                  <td className="border p-2">{ex.sentence}</td>
                  <td className="border p-2">{ex.explanation}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      )}

      {/* Similar Phrases */}
      {card.similarPhrases.length > 0 && (
        <section className="mb-4">
          <h3 className="text-xl font-semibold mb-2">🔁 Similar Phrases</h3>
          <ul className="list-disc list-inside">
            {card.similarPhrases.map((phrase, index) => (
              <li key={index}>{phrase}</li>
            ))}
          </ul>
        </section>
      )}

      {/* Memory Tip */}
      {card.tip && (
        <section className="mb-4">
          <h3 className="text-xl font-semibold mb-2">📌 Memory Tip</h3>
          <p>{card.tip}</p>
        </section>
      )}

      {/* Field / Domain Usage */}
      {card.domainUsage && (
        <section>
          <h3 className="text-xl font-semibold mb-2">🧩 Field Usage</h3>
          <p>{card.domainUsage}</p>
        </section>
      )}
    </div>
  );
};

export default FlashCard;

2. Create a Next.js Page to Consume the API

Here’s an example of a simple page in the app directory (if you’re using the Next.js App Router) or pages/index.tsx if you’re on the Pages Router.

If using App Router (Next.js 13+ with `/app`):

Create or update app/page.tsx:

'use client';

import { useState } from 'react';
import FlashCard, { FlashCard as FlashCardType } from '../components/FlashCard';

export default function Home() {
  const [input, setInput] = useState('');
  const [flashCard, setFlashCard] = useState<FlashCardType | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setFlashCard(null);

    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/phrase/explain`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: input }),
      });
      if (!res.ok) {
        throw new Error(`Error: ${res.statusText}`);
      }
      const data: FlashCardType = await res.json();
      setFlashCard(data);
    } catch (err: any) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-4xl font-bold mb-6 text-center">🧠 AI Dictionary Flashcard</h1>
      <form onSubmit={handleSubmit} className="flex gap-4 mb-8">
        <input
          className="flex-1 border rounded-md p-3"
          type="text"
          placeholder="Enter an English phrase..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button
          className="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700"
          type="submit"
          disabled={loading || !input.trim()}
        >
          {loading ? 'Loading...' : 'Generate Flashcard'}
        </button>
      </form>

      {error && <p className="text-red-600">{error}</p>}

      {flashCard && <FlashCard card={flashCard} />}
    </main>
  );
}

If using Pages Router (create `pages/index.tsx`):

import { useState } from 'react';
import FlashCard, { FlashCard as FlashCardType } from '../components/FlashCard';

export default function Home() {
  const [input, setInput] = useState('');
  const [flashCard, setFlashCard] = useState<FlashCardType | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setFlashCard(null);

    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/phrase/explain`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: input }),
      });
      if (!res.ok) {
        throw new Error(`Error: ${res.statusText}`);
      }
      const data: FlashCardType = await res.json();
      setFlashCard(data);
    } catch (err: any) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-4xl font-bold mb-6 text-center">🧠 AI Dictionary Flashcard</h1>
      <form onSubmit={handleSubmit} className="flex gap-4 mb-8">
        <input
          className="flex-1 border rounded-md p-3"
          type="text"
          placeholder="Enter an English phrase..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button
          className="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700"
          type="submit"
          disabled={loading || !input.trim()}
        >
          {loading ? 'Loading...' : 'Generate Flashcard'}
        </button>
      </form>

      {error && <p className="text-red-600">{error}</p>}

      {flashCard && <FlashCard card={flashCard} />}
    </div>
  );
}

3. Environment Variables

Ensure you have a .env.local file in your Next.js project with:

NEXT_PUBLIC_API_URL=http://localhost:3000

Replace http://localhost:3000 with your backend URL as needed.

✅ 4. Enable CORS in NestJS (for local testing)

In main.ts (NestJS):

app.enableCors({
  origin: 'http://localhost:3000',
});

✅ 5. Run Both Apps

# Backend
npm run start:dev  # (port 3000)

# Frontend
npm run dev        # (port 3000 default → change one to 3001)

AI Flashcard: NestJs (Basic) And Gemini (Free)

Taki — Wed, 18 Jun 2025 17:48:06 +0000

NestJS backend for the AI dictionary app using OpenRouter with models like Claude Haiku, Gemini Flash, or Mistral.

🔧 Project Setup (NestJS + OpenRouter (create account and select free model)

In my project I use Gemini 2.0 ( google/gemma-3-27b-it:free )

1. Scaffold NestJS Project

nest new ai-dictionary-backend
cd ai-dictionary-backend
npm install axios dotenv class-validator @nestjs/config

2. Configure `.env`

Create a .env file:

OPENROUTER_API_KEY=your_openrouter_key_here
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
DEFAULT_MODEL=google/gemma-3-27b-it:free  # or gemini, mistral, etc.

Get an API key from OpenRouter.ai.

3. OpenRouter Module

`ai/openrouter.service.ts`

import { Injectable } from '@nestjs/common';
import {ConfigService} from "@nestjs/config";
import {systemPrompt} from "../constant/system-prompt";
import OpenAI from 'openai';

@Injectable()
export class OpenRouterService {
    private readonly baseUrl: string;
    private readonly apiKey: string;
    private readonly defaultModel: string;
    private openai: OpenAI;

    constructor(private configService: ConfigService) {
        this.baseUrl = this.configService.get<string>('OPENROUTER_BASE_URL');
        this.apiKey = this.configService.get<string>('OPENROUTER_API_KEY');
        this.defaultModel = this.configService.get<string>('DEFAULT_MODEL');
        this.openai = new OpenAI({
            baseURL: this.baseUrl,
            apiKey: this.apiKey,
        });
    }

    async getExplanation(prompt: string): Promise<string>{
        const completion = await this.openai.chat.completions.create({
            model: this.defaultModel,
            messages: [
                {
                    "role": "system",
                    "content": [
                        {
                            "type": "text",
                            "text": systemPrompt
                        },
                    ]
                },
                {
                    role: 'user',
                    content: prompt,
                },
            ],

        },);
        return completion.choices[0].message.content;
    }
}

4. Phrase Controller & Service

`phrase/phrase.controller.ts`

import { Controller, Post, Body } from '@nestjs/common';
import { PhraseService } from './phrase.service';

@Controller('phrase')
export class PhraseController {
  constructor(private readonly phraseService: PhraseService) {}

  @Post('explain')
  async explain(@Body('text') text: string) {
    return this.phraseService.explainPhrase(text);
  }
}

`phrase/phrase.service.ts`

import { Injectable } from '@nestjs/common';
import {OpenRouterService} from "../openrouter/open-router.service";
import {FlashcardFormatterService} from "../flashcard/flashcard-formatter.service";

@Injectable()
export class PhraseService {
    constructor(private readonly openRouterService: OpenRouterService,
                private readonly flashCardFormatter: FlashcardFormatterService,) {
    }

    async explainPhrase(phrase:string) {
        const result = await this.openRouterService.getExplanation(phrase);
        return this.flashCardFormatter.format(result);
    }
}

5. AppModule Setup

`app.module.ts`

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { PhraseController } from './phrase/phrase.controller';
import { PhraseService } from './phrase/phrase.service';
import { OpenRouterService } from './ai/openrouter.service';

@Module({
  imports: [ConfigModule.forRoot({ isGlobal: true })],
  controllers: [PhraseController],
  providers: [PhraseService, OpenRouterService],
})
export class AppModule {}

6. Test the API

Run the app:

npm run start:dev

Test with POST /phrase/explain using curl, Postman, or Next.js frontend:

curl -X POST http://localhost:3000/phrase/explain \
  -H "Content-Type: application/json" \
  -d '{"text": "are bound to come up"}'

here the result:

✅ Next Steps (After Build Frontend)

[ ] Add caching with MongoDB
[ ] Store previous explanations for re-use
[ ] Add vector search later for semantic lookup
[ ] Rate limit per user/IP if deployed

Overview: Build FullStack GenAI - Flash AI English Card

Taki — Wed, 18 Jun 2025 17:40:26 +0000

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

Design frontend layout and explanation format.
**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.

Exception Handling Overview

Taki — Wed, 18 Jun 2025 06:11:24 +0000

Handling exceptions effectively is crucial for writing robust, maintainable, and secure applications, especially in a fullstack architecture like Next.js (frontend) and NestJS (backend).

🌐 GENERAL CONCEPTS

✅ What is Exception Handling?

Exception handling is the process of catching errors at runtime and responding to them gracefully without crashing the app.

🔥 CORE THINGS YOU NEED TO KNOW

1. Types of Errors

Type	Description	Example
Syntax Error	Code can’t run	Missing bracket `if (...) {`
Runtime Error	Code crashes while running	Null reference
Logic Error	Code runs but wrong result	Wrong conditional check

📦 NESTJS – BACKEND EXCEPTION HANDLING

NestJS is built on Express (or optionally Fastify), and has powerful tools for error handling.

🔹 1. Use Built-in Exceptions

NestJS provides a set of HTTP exception classes.

import { BadRequestException, NotFoundException } from '@nestjs/common';

throw new BadRequestException('Invalid input');

Exception	HTTP Code
`BadRequestException`	400
`UnauthorizedException`	401
`ForbiddenException`	403
`NotFoundException`	404
`InternalServerErrorException`	500

🔹 2. Use Filters (`@Catch`) for Custom Handling

import {
  ExceptionFilter, Catch, ArgumentsHost, HttpException, Logger,
} from '@nestjs/common';

@Catch()
export class AllExceptionsFilter implements ExceptionFilter {
  catch(exception: unknown, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();

    const status = exception instanceof HttpException
      ? exception.getStatus()
      : 500;

    const message = exception instanceof HttpException
      ? exception.getResponse()
      : 'Internal server error';

    Logger.error(`[Exception]: ${JSON.stringify(message)}`);

    response.status(status).json({
      statusCode: status,
      message,
      timestamp: new Date().toISOString(),
    });
  }
}

Then use it globally:

// main.ts
app.useGlobalFilters(new AllExceptionsFilter());

🔹 3. Best Practices for NestJS

❗ Throw, don’t return errors: throw new BadRequestException(...)
✅ Centralize error formatting with global filter
🎯 Use try/catch in services if working with external APIs or DB

⚛️ NEXT.JS – FRONTEND EXCEPTION HANDLING

🔹 1. Handle Client-Side Errors

try {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('Failed to fetch');
} catch (err) {
  console.error(err.message);
}

🔹 2. Handle API Route Errors (e.g., `/api/xyz`)

export default async function handler(req, res) {
  try {
    // logic here
    res.status(200).json({ data: 'ok' });
  } catch (err) {
    console.error('API Error:', err);
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

🔹 3. Use Error Boundaries for UI Crashes

// ErrorBoundary.tsx
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught in boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <p>Something went wrong.</p>;
    }
    return this.props.children;
  }
}

Then wrap your component:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

🚨 CATEGORIES OF EXCEPTIONS TO HANDLE

Category	Examples	Layer
Validation	Missing fields, wrong formats	Backend
Auth	JWT expired, unauthorized	Both
External API	Timeout, invalid key	Backend
Server Crash	Unhandled exception	Backend
UI Error	Render crash	Frontend
Network	Fetch fail, offline	Frontend

⚙️ TOOLING TIPS

✅ Use Zod or class-validator for schema/DTO validation
✅ Integrate Sentry for real-time exception logging
✅ Use Axios interceptors (client + server) to standardize error format
✅ Write unit tests to simulate exceptions

🔐 SECURITY ADVICE

❌ Never expose raw errors or stack traces to users
✅ Mask sensitive error messages (e.g., DB error → “Something went wrong”)
✅ Log full details internally with request context

✅ SUMMARY CHECKLIST

Area	What to Ensure
✅ Throw exceptions properly in NestJS	Use built-in `HttpException` classes
✅ Format all errors in consistent structure	Use `ExceptionFilter`
✅ Handle both client-side and API fetch errors in Next.js	Try/catch, `.ok` checks
✅ Prevent UI crashes	Use `<ErrorBoundary />`
✅ Add observability	Use logs, alerts, tools like Sentry
✅ Protect from info leaks	Sanitize messages shown to user

⚙️ PART 1: ERROR HANDLING PATTERN OVERVIEW

We'll standardize errors across the entire stack using the following pattern:

🧱 Standard Error Structure

Every error from backend should follow a consistent shape:

interface AppErrorResponse {
  statusCode: number;
  error: string; // e.g., "Bad Request"
  message: string | string[];
  timestamp: string;
  path?: string;
}

This will ensure the frontend can expect and format errors consistently.

🧠 PART 2: NESTJS CUSTOM EXCEPTION PATTERN

✅ 1. Base App Exception Class

Create a base exception to extend:

// src/common/exceptions/app.exception.ts
import { HttpException, HttpStatus } from '@nestjs/common';

export class AppException extends HttpException {
  constructor(message: string, statusCode: number = HttpStatus.INTERNAL_SERVER_ERROR, error = 'Application Error') {
    super(
      {
        statusCode,
        message,
        error,
        timestamp: new Date().toISOString(),
      },
      statusCode,
    );
  }
}

✅ 2. Custom Exception Examples

// src/common/exceptions/invalid-input.exception.ts
import { AppException } from './app.exception';
import { HttpStatus } from '@nestjs/common';

export class InvalidInputException extends AppException {
  constructor(message = 'Invalid input provided') {
    super(message, HttpStatus.BAD_REQUEST, 'Bad Request');
  }
}

// src/common/exceptions/resource-not-found.exception.ts
import { AppException } from './app.exception';
import { HttpStatus } from '@nestjs/common';

export class ResourceNotFoundException extends AppException {
  constructor(resource = 'Resource') {
    super(`${resource} not found`, HttpStatus.NOT_FOUND, 'Not Found');
  }
}

You can now throw meaningful errors:

if (!user) throw new ResourceNotFoundException('User');

✅ 3. Global Exception Filter (Formatter)

// src/common/filters/global-exception.filter.ts
import {
  ExceptionFilter,
  Catch,
  ArgumentsHost,
  HttpException,
  HttpStatus,
} from '@nestjs/common';

@Catch()
export class GlobalExceptionFilter implements ExceptionFilter {
  catch(exception: unknown, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    const request = ctx.getRequest();

    const status =
      exception instanceof HttpException
        ? exception.getStatus()
        : HttpStatus.INTERNAL_SERVER_ERROR;

    const errorResponse =
      exception instanceof HttpException
        ? exception.getResponse()
        : {
            statusCode: HttpStatus.INTERNAL_SERVER_ERROR,
            message: 'Internal server error',
            error: 'Internal Server Error',
          };

    const finalError =
      typeof errorResponse === 'string'
        ? {
            statusCode: status,
            message: errorResponse,
            error: 'Error',
          }
        : errorResponse;

    response.status(status).json({
      ...finalError,
      timestamp: new Date().toISOString(),
      path: request.url,
    });
  }
}

➕ Register Globally

// main.ts
import { GlobalExceptionFilter } from './common/filters/global-exception.filter';
app.useGlobalFilters(new GlobalExceptionFilter());

🧑‍🎨 PART 3: NEXT.JS FRONTEND PATTERN

✅ 1. Shared Error Interface

// types/ErrorResponse.ts
export interface AppErrorResponse {
  statusCode: number;
  message: string | string[];
  error: string;
  timestamp: string;
  path?: string;
}

✅ 2. Fetch Wrapper

// lib/fetcher.ts
import { AppErrorResponse } from '@/types/ErrorResponse';

export async function safeFetch<T>(url: string, options?: RequestInit): Promise<T> {
  const res = await fetch(url, options);

  if (!res.ok) {
    const err: AppErrorResponse = await res.json();
    throw err;
  }

  return res.json();
}

✅ 3. Example Usage

import { useEffect, useState } from 'react';
import { safeFetch } from '@/lib/fetcher';
import { AppErrorResponse } from '@/types/ErrorResponse';

export default function UserDetails() {
  const [error, setError] = useState<AppErrorResponse | null>(null);
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    safeFetch('/api/user/me')
      .then(setUser)
      .catch(setError);
  }, []);

  if (error) return <p className="text-red-600">⚠️ {error.message}</p>;

  return <pre>{JSON.stringify(user, null, 2)}</pre>;
}

📦 BONUS: DTO Validation Exception Integration

Use class-validator and map ValidationException to our structure:

// In validation pipe
app.useGlobalPipes(new ValidationPipe({
  exceptionFactory: (errors) => {
    const messages = errors.map(err => `${err.property} - ${Object.values(err.constraints).join(', ')}`);
    return new AppException(messages, 400, 'Validation Failed');
  }
}));

✅ Summary

Component	Role
`AppException`	Base for custom exceptions
`GlobalExceptionFilter`	Standardize structure
`safeFetch()`	Ensure frontend receives predictable errors
`AppErrorResponse`	Shared error interface
`class-validator` → `AppException`	Hook DTO validation into custom errors