How shurshalo/foodgram-project-react works
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: api/index.js API client · App.js SPA router · single-card/index.js Recipe detail · recipe-create/index.js Recipe publishing
Components 21
Web client
- SPA router
frontend/src/App.js - API client
frontend/src/api/index.js
Recipe domain
- Recipe browsing
frontend/src/pages/main/index.js - Recipe detail
frontend/src/pages/single-card/index.js - Recipe publishing
frontend/src/pages/recipe-create/index.js - Recipe editing
frontend/src/pages/recipe-edit/index.js - Ingredient search
frontend/src/components/ingredients-search/index.js - Favorites
frontend/src/pages/favorites/index.js - Shopping list
frontend/src/pages/cart/index.js
Accounts and community
- Sign-in and signup
frontend/src/pages/signin/index.js - Registration
frontend/src/pages/signup/index.js - Author profile
frontend/src/pages/user/index.js - Subscriptions
frontend/src/pages/subscriptions/index.js - User and auth state
frontend/src/contexts/index.js
API service
- API routes
backend/api/urls.py - API handlers
backend/api/views.py - Validation and serialization
backend/api/serializers.py
Persistence
- Recipe data models
backend/food/models.py - User data models
backend/users/models.py - PostgreSQL
backend/backend/settings.py
Other components
- User
Connections 36
- 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