# shurshalo/foodgram-project-react architecture

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

- Interactive diagram: https://gitdiagram.com/shurshalo/foodgram-project-react
- Repository: https://github.com/shurshalo/foodgram-project-react

## Overview

Foodgram is a recipe-sharing and meal-planning web app. Users browse recipes, inspect ingredients, and can publish or edit recipes, save favorites, follow authors, and add recipes to a shopping list for download. The React SPA routes these workflows through a shared API client to a Django REST API; recipe and user data are backed by PostgreSQL. The README documents the product capabilities, while the sampled source confirms the SPA/API interactions and recipe actions; backend endpoint wiring is not sampled, so detailed internal call links are limited.

Main entry points: [`frontend/src/api/index.js`](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/api/index.js) (API client), [`frontend/src/App.js`](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/App.js) (SPA router), [`frontend/src/pages/single-card/index.js`](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/single-card/index.js) (Recipe detail), [`frontend/src/pages/recipe-create/index.js`](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/recipe-create/index.js) (Recipe publishing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["SPA router<br/>[App.js]"]
  node_clientapi["API client<br/>[index.js]"]
end

subgraph group_recipe["Recipe domain"]
  node_browse["Recipe browsing<br/>[index.js]"]
  node_detail["Recipe detail<br/>[index.js]"]
  node_create["Recipe publishing<br/>[index.js]"]
  node_edit["Recipe editing<br/>[index.js]"]
  node_ingredients["Ingredient search<br/>[index.js]"]
  node_favorites["Favorites<br/>[index.js]"]
  node_cart["Shopping list<br/>[index.js]"]
end

subgraph group_community["Accounts and community"]
  node_signin["Sign-in and signup<br/>[index.js]"]
  node_signup["Registration<br/>[index.js]"]
  node_profile["Author profile<br/>[index.js]"]
  node_subscriptions["Subscriptions<br/>[index.js]"]
  node_contexts["User and auth state<br/>[index.js]"]
end

subgraph group_service["API service"]
  node_apiurls["API routes<br/>[urls.py]"]
  node_views["API handlers<br/>[views.py]"]
  node_serializers["Validation and serialization<br/>[serializers.py]"]
end

subgraph group_persistence["Persistence"]
  node_foodmodels["Recipe data models<br/>[models.py]"]
  node_usermodels["User data models<br/>[models.py]"]
  node_postgres[("PostgreSQL<br/>[settings.py]")]
end

node_visitor(("User"))

node_visitor -->|"uses"| node_app
node_app -->|"routes to"| node_browse
node_app -->|"routes to"| node_detail
node_app -->|"routes to"| node_create
node_app -->|"routes to"| node_edit
node_app -->|"routes to"| node_favorites
node_app -->|"routes to"| node_cart
node_app -->|"routes to"| node_signin
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_subscriptions
node_app -->|"provides state"| node_contexts
node_browse -->|"requests recipes"| node_clientapi
node_detail -->|"loads recipe"| node_clientapi
node_detail -->|"changes favorites"| node_clientapi
node_detail -->|"updates cart"| node_clientapi
node_detail -->|"follows author"| node_clientapi
node_create -->|"publishes recipe"| node_clientapi
node_create -->|"loads tags"| node_clientapi
node_create -->|"searches ingredients"| node_clientapi
node_edit -->|"loads and updates"| node_clientapi
node_edit -->|"searches ingredients"| node_clientapi
node_favorites -->|"loads favorites"| node_clientapi
node_cart -->|"manages and downloads"| node_clientapi
node_signin -->|"authenticates"| node_clientapi
node_signup -->|"registers"| node_clientapi
node_profile -->|"loads author recipes"| node_clientapi
node_profile -->|"manages subscription"| node_clientapi
node_subscriptions -->|"loads subscriptions"| node_clientapi
node_clientapi -->|"HTTP requests"| node_apiurls
node_apiurls -->|"dispatches"| node_views
node_views -->|"validates and formats"| node_serializers
node_views -->|"reads and writes"| node_foodmodels
node_views -->|"reads and writes"| node_usermodels
node_foodmodels -->|"persists recipe data"| node_postgres
node_usermodels -->|"persists account data"| node_postgres

click node_app "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/App.js"
click node_clientapi "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/api/index.js"
click node_browse "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/main/index.js"
click node_detail "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/single-card/index.js"
click node_create "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/recipe-create/index.js"
click node_edit "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/recipe-edit/index.js"
click node_ingredients "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/components/ingredients-search/index.js"
click node_favorites "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/favorites/index.js"
click node_cart "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/cart/index.js"
click node_signin "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/signin/index.js"
click node_signup "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/signup/index.js"
click node_profile "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/user/index.js"
click node_subscriptions "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/subscriptions/index.js"
click node_contexts "https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/contexts/index.js"
click node_apiurls "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/urls.py"
click node_views "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/views.py"
click node_serializers "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/serializers.py"
click node_foodmodels "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/food/models.py"
click node_usermodels "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/users/models.py"
click node_postgres "https://github.com/shurshalo/foodgram-project-react/blob/master/backend/backend/settings.py"

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_app,node_clientapi,node_visitor toneBlue
class node_browse,node_detail,node_create,node_edit,node_ingredients,node_favorites,node_cart toneAmber
class node_signin,node_signup,node_profile,node_subscriptions,node_contexts toneMint
class node_apiurls,node_views,node_serializers toneRose
class node_foodmodels,node_usermodels,node_postgres toneIndigo
```

## Components

### Web client

- [SPA router](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/App.js): `frontend/src/App.js`
- [API client](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/api/index.js): `frontend/src/api/index.js`

### Recipe domain

- [Recipe browsing](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/main/index.js): `frontend/src/pages/main/index.js`
- [Recipe detail](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/single-card/index.js): `frontend/src/pages/single-card/index.js`
- [Recipe publishing](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/recipe-create/index.js): `frontend/src/pages/recipe-create/index.js`
- [Recipe editing](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/recipe-edit/index.js): `frontend/src/pages/recipe-edit/index.js`
- [Ingredient search](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/components/ingredients-search/index.js): `frontend/src/components/ingredients-search/index.js`
- [Favorites](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/favorites/index.js): `frontend/src/pages/favorites/index.js`
- [Shopping list](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/cart/index.js): `frontend/src/pages/cart/index.js`

### Accounts and community

- [Sign-in and signup](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/signin/index.js): `frontend/src/pages/signin/index.js`
- [Registration](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/signup/index.js): `frontend/src/pages/signup/index.js`
- [Author profile](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/user/index.js): `frontend/src/pages/user/index.js`
- [Subscriptions](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/pages/subscriptions/index.js): `frontend/src/pages/subscriptions/index.js`
- [User and auth state](https://github.com/shurshalo/foodgram-project-react/blob/master/frontend/src/contexts/index.js): `frontend/src/contexts/index.js`

### API service

- [API routes](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/urls.py): `backend/api/urls.py`
- [API handlers](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/views.py): `backend/api/views.py`
- [Validation and serialization](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/api/serializers.py): `backend/api/serializers.py`

### Persistence

- [Recipe data models](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/food/models.py): `backend/food/models.py`
- [User data models](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/users/models.py): `backend/users/models.py`
- [PostgreSQL](https://github.com/shurshalo/foodgram-project-react/blob/master/backend/backend/settings.py): `backend/backend/settings.py`

### Other components

- **User**

## Connections

- User → SPA router: uses
- SPA router → Recipe browsing: routes to
- SPA router → Recipe detail: routes to
- SPA router → Recipe publishing: routes to
- SPA router → Recipe editing: routes to
- SPA router → Favorites: routes to
- SPA router → Shopping list: routes to
- SPA router → Sign-in and signup: routes to
- SPA router → Registration: routes to
- SPA router → Author profile: routes to
- SPA router → Subscriptions: routes to
- SPA router → User and auth state: provides state
- Recipe browsing → API client: requests recipes
- Recipe detail → API client: loads recipe
- Recipe detail → API client: changes favorites
- Recipe detail → API client: updates cart
- Recipe detail → API client: follows author
- Recipe publishing → API client: publishes recipe
- Recipe publishing → API client: loads tags
- Recipe publishing → API client: searches ingredients
- Recipe editing → API client: loads and updates
- Recipe editing → API client: searches ingredients
- Favorites → API client: loads favorites
- Shopping list → API client: manages and downloads
- Sign-in and signup → API client: authenticates
- Registration → API client: registers
- Author profile → API client: loads author recipes
- Author profile → API client: manages subscription
- Subscriptions → API client: loads subscriptions
- API client → API routes: HTTP requests
- API routes → API handlers: dispatches
- API handlers → Validation and serialization: validates and formats
- API handlers → Recipe data models: reads and writes
- API handlers → User data models: reads and writes
- Recipe data models → PostgreSQL: persists recipe data
- User data models → PostgreSQL: persists account data