Next.js application with SSG/ISR for 95+ Lighthouse performance. Real-time SSE streaming UI shows meals being generated live. Responsive design with shadcn/ui components and smooth animations.
Key Features
- Next.js App Router with SSG/ISR achieving 95+ Lighthouse performance
- Real-time SSE streaming UI showing meals generated live with progressive rendering
- Responsive design with shadcn/ui component library
- Smooth animations and transitions for meal plan interactions
- SEO-optimized pages with structured data and meta tags
- Mobile-first layout with accessible form controls
Tech Stack
Frontend
Infrastructure
Backend
AI
Challenges & Solutions
Real-Time Streaming Across Services
Meal generation takes 10-30s through the AI pipeline. Users need immediate feedback, but the response crosses 3 service boundaries (Python → NestJS → Next.js).
SSE streaming pipeline where Python FastAPI streams tokens to NestJS, which proxies them to the Next.js frontend. Users see meals being generated in real-time.
Recipe Retrieval Quality
Simple keyword search returned irrelevant recipes. Users with specific dietary needs (keto, vegan, allergen-free) got poor matches.
RAG pipeline with Qdrant vector DB for semantic recipe retrieval. USDA nutritional data validates macro targets. Retrieval quality improved significantly over keyword-based search.
Reliable AI Meal Generation
LLM outputs are non-deterministic — generated meals could have invalid nutritional data, duplicate recipes, or fail dietary constraints.
LangGraph StateGraph with dedicated nodes for generation, validation, and diversity enforcement. Each node validates structured output against schemas before passing to the next stage.