Weekly Meal Planner - Documentation Summary

A comprehensive documentation suite covering the Weekly Meal Planner application - an AI-powered web app for planning weekly meals with breakfast, lunch, and dinner options.

Documentation Overview

Quick Reference

Application Core Features

1. AI Meal Generation - One-click weekly plan creation (21 meals)
2. Recipe Bookmarking - Save favorites for future reference
3. Plan Management - Save, load, edit, and delete weekly plans
4. Cross-Device Sync - Access plans from any device
5. Responsive Design - Usable on desktop, tablet, and mobile

Tech Stack Summary

Problem-Solution Mapping

User Flow Summary

┌─────────────────────────────────────────────────────────────┐
│                        USER ENTRY                         │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Google Sign-In (Optional)               │
│               Anonymous: 3 generations                  │
│               Authenticated: 7 generations               │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Generate Weekly Plan                  │
│               AI generates 21 meals (7 days × 3)          │
│               Streaming UI updates in real-time           │
└─────────────────────────────────────────────────────────────┘
                              │
                    ┌────────┴────────┐
                    ▼                 ▼
         ┌──────────────┐    ┌──────────────┐
         │ View Recipes │    │ Save Plan    │
         │   Details   │    │ (Auth only)  │
         └──────────────┘    └──────────────┘
                                    │
                                    ▼
                             ┌──────────────┐
                             │  Manage      │
                             │  Saved Plans │
                             └──────────────┘

Architecture Highlights

State Management Strategy

Server State ──► React Query ──► Cached & Synced
     │
UI State ──► Local useState ──► Ephemeral
     │
Cross-cutting ──► React Context ──► Minimal Scope
     │
Persistence ──► IndexedDB ──► Offline Ready
     │
Remote ──► Clerk + API ──► Cloudflare Edge

Key Design Decisions

Quality Metrics

File Structure

docs/
├── USE_CASES.md       # Functional requirements
├── PROBLEMS.md        # Problem domain analysis
├── SOLUTIONS.md       # Technical architecture
└── SUMMARY.md         # This document

src/
├── components/
│   ├── meal-planner/  # Core meal planning UI
│   └── ui/           # Shadcn component library
├── hooks/            # Custom React hooks
├── lib/              # Utilities, storage, Redux
├── contexts/         # React Context providers
├── schemas/          # Zod validation schemas
└── server/           # API routes, agent, database

app/
├── api/v1/           # Typed API endpoints
├── page.tsx          # Main application
└── saved/            # Saved plans page

Key Endpoints

Getting Started

# Clone the repository
git clone https://github.com/achmadk/weekly-meal-planner.git
cd weekly-meal-planner

# Install dependencies
pnpm install

# Set up environment
cp .env.example .env
# Edit .env with required API keys

# Run development server
pnpm dev

# Run tests
pnpm test

# Build for production
pnpm build

Live Application

• URL: https://weeklymealplanner.achmadk.com
• Author: Achmad Kurnianto

Further Reading

• Full README
• Architecture Case Study