How esde-seai8/fe07_recipebook works
Recipe Book is a recipe discovery, creation, and personal-cookbook web app. Users browse or filter recipes, open a recipe for cooking instructions, and can register or sign in to save recipes and manage notes and ratings. The dashboard presents saved recipes; recipe and cookbook operations are handled by server actions and recipe APIs, with SQL persistence through a shared PostgreSQL pool. The graph follows documented routes and indexed imports; where implementation excerpts were unavailable, edges rely on README statements or SOURCE INDEX references.
Main entry points: server.js Recipe data access · page.jsx Recipe search · page.tsx Recipe detail · CookbookManager.jsx Cookbook manager
Components 25
App experience
- Home page
src/app/page.tsx - Cookbook dashboard
src/app/dashboard/page.jsx - Session-aware navigation
src/components/Navbar.jsx
Recipe discovery
- Recipe search
src/app/search/page.jsx - Recipe detail
src/app/recipes/[id]/page.tsx - Ingredient checklist
src/features/recipes/components/InteractiveIngredients.tsx - Recipe cards
src/features/recipes/components/RecipeCard.jsx - Recipe list
src/features/recipes/components/RecipesList.jsx - Add recipe form
src/features/recipes/components/AddRecipeForm.jsx - Cookbook save
src/features/recipes/components/DetailCookbookSave.jsx - Cookbook manager
src/features/recipes/components/CookbookManager.jsx - Cookbook item
src/features/recipes/components/CookbookItemCard.jsx - Recipe queries
src/features/recipes/queries.js - Recipe mutations
src/features/recipes/mutations.js - Recipe actions
src/features/recipes/actions.js - Recipe data access
src/features/recipes/server.js - Recipe API routes
src/app/api/recipes/route.js
Identity
- Sign-in and registration
src/app/(auth)/login/page.jsx - Auth forms
src/features/auth/components/FormSignIn.jsx - Auth actions
src/features/auth/actions.js - Auth services
src/features/auth/server.js - Auth API routes
src/app/api/auth/[...all]/route.js
Persistence
- PostgreSQL pool
src/lib/db.js - Neon PostgreSQL
Other components
- Visitor
Connections 31
- Visitor → Home page: opens
- Visitor → Recipe search: searches
- Visitor → Recipe detail: views
- Visitor → Sign-in and registration: signs in
- Home page → Recipe data access: loads recipes
src/app/page.tsx - Home page → Recipe cards: renders
src/app/page.tsx - Recipe search → Recipe queries: queries
src/app/search/page.jsx - Recipe search → Recipe mutations: mutates
src/app/search/page.jsx - Recipe search → Recipe list: renders
src/app/search/page.jsx - Recipe search → Add recipe form: opens
src/app/search/page.jsx - Recipe list → Recipe cards: renders
src/features/recipes/components/RecipesList.jsx - Recipe detail → Recipe data access: loads recipe
src/app/recipes/[id]/page.tsx - Recipe detail → Ingredient checklist: renders
src/app/recipes/[id]/page.tsx - Recipe detail → Cookbook save: renders
src/app/recipes/[id]/page.tsx - Cookbook save → Recipe mutations: saves recipe
src/features/recipes/components/DetailCookbookSave.jsx - Cookbook dashboard → Recipe data access: loads cookbook
src/app/dashboard/page.jsx - Cookbook dashboard → Cookbook manager: renders
src/app/dashboard/page.jsx - Cookbook manager → Cookbook item: renders
src/features/recipes/components/CookbookManager.jsx - Cookbook manager → Add recipe form: opens
src/features/recipes/components/CookbookManager.jsx - Cookbook manager → Recipe mutations: creates recipe
src/features/recipes/components/CookbookManager.jsx - Sign-in and registration → Auth forms: renders
src/app/(auth)/login/page.jsx - Auth forms → Auth actions: submits
src/features/auth/components/FormSignIn.jsx - Auth actions → Auth services: authenticates
src/features/auth/actions.js - Auth API routes → Auth services: uses
src/app/api/auth/[...all]/route.js - Session-aware navigation → Auth API routes: fetches session
src/components/Navbar.jsx - Recipe API routes → Recipe data access: calls
src/app/api/recipes/route.js - Recipe mutations → Recipe actions: dispatches
src/features/recipes/mutations.js - Recipe actions → Recipe data access: updates data
src/features/recipes/actions.js - Recipe data access → PostgreSQL pool: queries
src/features/recipes/server.js - Auth services → PostgreSQL pool: queries
src/features/auth/server.js - PostgreSQL pool → Neon PostgreSQL: connects