RecipeAI
AI Recipe Generator · TypeScript / React 19 / Next.js 16.2.5 (App Router) · Tailwind CSS v4
RecipeAI is an AI-powered recipe generator built as a Next.js App Router SPA. It generates recipes via the Groq LLM (with a predefined dataset fallback), persists saved recipes in browser localStorage, and loads recipe imagery from the Unsplash CDN.
Generated 4 Jun 2026 · 57 files · 8 components · 5 flows
File Architecture
The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.
System Design
Runtime topology across the five zones — client, edge, application, data and external services.
Flow Graph
The five most significant application flows, step by step — startup, auth, write, read and error recovery.
Technology
| Component | Technology | Version | Source of Detection |
|---|---|---|---|
| Framework | Next.js (App Router) | 16.2.5 | package.json |
| UI library | React / React DOM | 19.2.4 | package.json |
| Language | TypeScript | ^5 | package.json, tsconfig.json |
| Styling | Tailwind CSS | ^4 | package.json, postcss.config.mjs |
| UI primitives | Radix UI / shadcn | ^1.4.3 / ^4.7.0 | package.json, components.json |
| Animation | Framer Motion | ^12.38.0 | package.json |
| Icons | lucide-react | ^1.14.0 | package.json |
| Forms / validation | react-hook-form + Zod + @hookform/resolvers | ^7.75.0 / ^4.4.3 / ^5.2.2 | package.json, src/lib/validations.ts |
| Class utilities | clsx + tailwind-merge + class-variance-authority | ^2.1.1 / ^3.5.0 / ^0.7.1 | package.json, src/lib/utils.ts |
| AI provider | Groq Chat Completions (OpenAI-compatible) | llama-3.1-8b-instant | src/app/api/generate-recipe/route.ts |
| Image source | Unsplash (next/image remote) | *[unresolved]* | next.config.ts |
| Persistence | Browser localStorage | n/a | src/lib/recipe-storage.ts |
| Lint | ESLint + eslint-config-next | ^9 / 16.2.5 | eslint.config.mjs |