# vishal-jadoun/cleancook architecture

> Architecture diagram of the GitHub repository vishal-jadoun/cleancook, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vishal-jadoun/cleancook
- Repository: https://github.com/vishal-jadoun/cleancook

## Overview

CleanCook is a React meal-planning and healthy-eating web app. Users can browse recipes and open cooking details, plan meals by week, manage a shopping list, and view profile and nutrition-oriented dashboard screens. The README describes shopping-list generation from planned meals, but the sampled shopping implementation uses local sample items; no runtime connection between those features is evidenced. The graph follows documented routes and sampled imports, and does not assume persistence or backend authentication.

Main entry points: [`src/App.jsx`](https://github.com/vishal-jadoun/cleancook/blob/main/src/App.jsx) (App Router), [`src/pages/Planner/Planner.jsx`](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Planner/Planner.jsx) (Weekly Planner), [`src/pages/Recipes/Recipes.jsx`](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Recipes/Recipes.jsx) (Recipe Browse), [`src/pages/Shopping/Shopping.jsx`](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Shopping/Shopping.jsx) (Shopping List)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_router["App Router<br/>[App.jsx]"]
  node_navigation["Navigation<br/>[Navbar.jsx]"]
  node_footer["Site Footer<br/>[Footer.jsx]"]
  node_home["Home<br/>[Home.jsx]"]
end

subgraph group_recipes["Recipe Discovery"]
  node_recipe_browse["Recipe Browse<br/>[Recipes.jsx]"]
  node_search["Recipe Search<br/>[SearchBar.jsx]"]
  node_recipe_details["Recipe Details<br/>[RecipeDetails.jsx]"]
  node_recipe_data["Recipe Collection<br/>[recipes.js]"]
end

subgraph group_planning["Meal Planning"]
  node_planner["Weekly Planner<br/>[Planner.jsx]"]
  node_meal_data["Sample Meal Plan<br/>[mealPlan.js]"]
  node_day_column["Day Column<br/>[DayColumn.jsx]"]
  node_planner_slot["Planner Slot<br/>[PlannerSlot.jsx]"]
  node_meal_card["Meal Card<br/>[MealCard.jsx]"]
end

subgraph group_wellness["Account and Wellness"]
  node_dashboard["Wellness Dashboard<br/>[Dashboard.jsx]"]
  node_profile["User Profile<br/>[Profile.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_signup["Signup<br/>[Signup.jsx]"]
end

subgraph group_groceries["Grocery Shopping"]
  node_shopping["Shopping List<br/>[Shopping.jsx]"]
  node_shopping_item["Shopping Item<br/>[ShoppingItem.jsx]"]
  node_shopping_list_page["Shopping List Page<br/>[Shoppinglist.jsx]"]
end

node_visitor(("User"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_router
node_router -->|"renders"| node_navigation
node_router -->|"renders"| node_footer
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_recipe_browse
node_router -->|"routes to"| node_recipe_details
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_signup
node_router -->|"routes to"| node_profile
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_planner
node_router -->|"routes to"| node_shopping
node_recipe_browse -->|"renders"| node_search
node_recipe_browse -->|"links to"| node_recipe_details
node_planner -->|"reads"| node_meal_data
node_planner -->|"renders"| node_day_column
node_planner -->|"renders"| node_planner_slot
node_planner_slot -->|"uses"| node_meal_card
node_shopping -->|"renders"| node_shopping_item
node_visitor -->|"discovers recipes"| node_recipe_browse
node_visitor -->|"plans meals"| node_planner
node_visitor -->|"manages groceries"| node_shopping
node_visitor -->|"sets preferences"| node_profile
node_visitor -->|"follows cooking steps"| node_recipe_details
node_meal_data -.->|"may inform list"| node_shopping

click node_entry "https://github.com/vishal-jadoun/cleancook/blob/main/src/main.jsx"
click node_router "https://github.com/vishal-jadoun/cleancook/blob/main/src/App.jsx"
click node_navigation "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/Navbar/Navbar.jsx"
click node_footer "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/Footer/Footer.jsx"
click node_home "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Home/Home.jsx"
click node_recipe_browse "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Recipes/Recipes.jsx"
click node_search "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/SearchBar/SearchBar.jsx"
click node_recipe_details "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/RecipeDetails/RecipeDetails.jsx"
click node_recipe_data "https://github.com/vishal-jadoun/cleancook/blob/main/src/data/recipes.js"
click node_planner "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Planner/Planner.jsx"
click node_meal_data "https://github.com/vishal-jadoun/cleancook/blob/main/src/data/mealPlan.js"
click node_day_column "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/DayColumn/DayColumn.jsx"
click node_planner_slot "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/PlannerSlot/PlannerSlot.jsx"
click node_meal_card "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/MealCard/MealCard.jsx"
click node_dashboard "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Dashboard/Dashboard.jsx"
click node_profile "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Profile/Profile.jsx"
click node_login "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Login/Login.jsx"
click node_signup "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Signup/Signup.jsx"
click node_shopping "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Shopping/Shopping.jsx"
click node_shopping_item "https://github.com/vishal-jadoun/cleancook/blob/main/src/components/ShoppingItem/ShoppingItem.jsx"
click node_shopping_list_page "https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/ShoppingList/Shoppinglist.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_router,node_navigation,node_footer,node_home,node_visitor toneBlue
class node_recipe_browse,node_search,node_recipe_details,node_recipe_data toneAmber
class node_planner,node_meal_data,node_day_column,node_planner_slot,node_meal_card toneMint
class node_dashboard,node_profile,node_login,node_signup toneRose
class node_shopping,node_shopping_item,node_shopping_list_page toneIndigo
```

## Components

### Application Shell

- [React Entry](https://github.com/vishal-jadoun/cleancook/blob/main/src/main.jsx): `src/main.jsx`
- [App Router](https://github.com/vishal-jadoun/cleancook/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Site Footer](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`
- [Home](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`

### Recipe Discovery

- [Recipe Browse](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Recipes/Recipes.jsx): `src/pages/Recipes/Recipes.jsx`
- [Recipe Search](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/SearchBar/SearchBar.jsx): `src/components/SearchBar/SearchBar.jsx`
- [Recipe Details](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/RecipeDetails/RecipeDetails.jsx): `src/pages/RecipeDetails/RecipeDetails.jsx`
- [Recipe Collection](https://github.com/vishal-jadoun/cleancook/blob/main/src/data/recipes.js): `src/data/recipes.js`

### Meal Planning

- [Weekly Planner](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Planner/Planner.jsx): `src/pages/Planner/Planner.jsx`
- [Sample Meal Plan](https://github.com/vishal-jadoun/cleancook/blob/main/src/data/mealPlan.js): `src/data/mealPlan.js`
- [Day Column](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/DayColumn/DayColumn.jsx): `src/components/DayColumn/DayColumn.jsx`
- [Planner Slot](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/PlannerSlot/PlannerSlot.jsx): `src/components/PlannerSlot/PlannerSlot.jsx`
- [Meal Card](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/MealCard/MealCard.jsx): `src/components/MealCard/MealCard.jsx`

### Account and Wellness

- [Wellness Dashboard](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Dashboard/Dashboard.jsx): `src/pages/Dashboard/Dashboard.jsx`
- [User Profile](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Profile/Profile.jsx): `src/pages/Profile/Profile.jsx`
- [Login](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Login/Login.jsx): `src/pages/Login/Login.jsx`
- [Signup](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Signup/Signup.jsx): `src/pages/Signup/Signup.jsx`

### Grocery Shopping

- [Shopping List](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/Shopping/Shopping.jsx): `src/pages/Shopping/Shopping.jsx`
- [Shopping Item](https://github.com/vishal-jadoun/cleancook/blob/main/src/components/ShoppingItem/ShoppingItem.jsx): `src/components/ShoppingItem/ShoppingItem.jsx`
- [Shopping List Page](https://github.com/vishal-jadoun/cleancook/blob/main/src/pages/ShoppingList/Shoppinglist.jsx): `src/pages/ShoppingList/Shoppinglist.jsx`

### Other components

- **User**

## Connections

- User → React Entry: opens app (evidence: `src/main.jsx`)
- React Entry → App Router: renders (evidence: `src/main.jsx`)
- App Router → Navigation: renders (evidence: `src/App.jsx`)
- App Router → Site Footer: renders (evidence: `src/App.jsx`)
- App Router → Home: routes to (evidence: `src/App.jsx`)
- App Router → Recipe Browse: routes to (evidence: `src/App.jsx`)
- App Router → Recipe Details: routes to (evidence: `src/App.jsx`)
- App Router → Login: routes to (evidence: `src/App.jsx`)
- App Router → Signup: routes to (evidence: `src/App.jsx`)
- App Router → User Profile: routes to (evidence: `src/App.jsx`)
- App Router → Wellness Dashboard: routes to (evidence: `src/App.jsx`)
- App Router → Weekly Planner: routes to (evidence: `src/App.jsx`)
- App Router → Shopping List: routes to (evidence: `src/App.jsx`)
- Recipe Browse → Recipe Search: renders (evidence: `src/pages/Recipes/Recipes.jsx`)
- Recipe Browse → Recipe Details: links to (evidence: `src/pages/Recipes/Recipes.jsx`)
- Weekly Planner → Sample Meal Plan: reads (evidence: `src/pages/Planner/Planner.jsx`)
- Weekly Planner → Day Column: renders (evidence: `src/pages/Planner/Planner.jsx`)
- Weekly Planner → Planner Slot: renders (evidence: `src/pages/Planner/Planner.jsx`)
- Planner Slot → Meal Card: uses (evidence: `src/components/PlannerSlot/PlannerSlot.jsx`)
- Shopping List → Shopping Item: renders (evidence: `src/pages/Shopping/Shopping.jsx`)
- User → Recipe Browse: discovers recipes (evidence: `README.md`)
- User → Weekly Planner: plans meals (evidence: `README.md`)
- User → Shopping List: manages groceries (evidence: `README.md`)
- User → User Profile: sets preferences (evidence: `README.md`)
- User → Recipe Details: follows cooking steps (evidence: `README.md`)
- Sample Meal Plan → Shopping List: may inform list