How techwithtim/fastapi-react-integration works
The repository contains two separate applications: an authentication service with a React client, and a fruit-management app with a React client and backend. The auth workflow covers registration, token login, and fetching a protected profile; the fruit app displays fruits and submits additions. Dashed links mark relationships whose HTTP wiring is not visible in the supplied excerpts. The README is empty, and the Simple backend implementation was not excerpted.
Main entry points: auth.py Auth Routes · auth_handler.py Auth Logic · AuthContext.jsx Auth State · App.jsx Auth App
Components 20
Authentication UI
- Auth App
Auth/frontend/src/App.jsx - Registration Form
Auth/frontend/src/components/Register.jsx - Login Form
Auth/frontend/src/components/Login.jsx - User Profile
Auth/frontend/src/components/UserProfile.jsx - Auth State
Auth/frontend/src/contexts/AuthContext.jsx - Auth API Client
Auth/frontend/src/api.js
Authentication Service
- API App
Auth/main.py - Auth Routes
Auth/backend/routers/auth.py - Profile Route
Auth/backend/routers/user.py - Auth Logic
Auth/backend/auth/auth_handler.py - User Model
Auth/backend/models.py - Auth Schemas
Auth/backend/schemas.py - SQLite Database
Auth/backend/database.py
Fruit Management UI
- Fruit App
Simple/frontend/src/App.jsx - Fruit List
Simple/frontend/src/components/Fruits.jsx - Add Fruit Form
Simple/frontend/src/components/AddFruitForm.jsx - Fruit API Client
Simple/frontend/src/api.js
Fruit Service
- Fruit Backend
Simple/backend/main.py
Other components
- User
- User
Connections 24
- Auth App → Registration Form: renders
Auth/frontend/src/App.jsx - Auth App → Login Form: renders
Auth/frontend/src/App.jsx - Auth App → User Profile: renders
Auth/frontend/src/App.jsx - Registration Form → Auth State: uses
Auth/frontend/src/components/Register.jsx - Login Form → Auth State: uses
Auth/frontend/src/components/Login.jsx - User Profile → Auth State: uses
Auth/frontend/src/components/UserProfile.jsx - Auth State → Auth API Client: calls
Auth/frontend/src/contexts/AuthContext.jsx - Auth API Client → API App: HTTP requests
- API App → Auth Routes: registers
Auth/main.py - API App → Profile Route: registers
Auth/main.py - Auth Routes → Auth Logic: calls
Auth/backend/routers/auth.py - Auth Routes → SQLite Database: gets session
Auth/backend/routers/auth.py - Auth Routes → User Model: creates
Auth/backend/routers/auth.py - Auth Routes → Auth Schemas: validates
Auth/backend/routers/auth.py - Profile Route → Auth Logic: authenticates
Auth/backend/routers/user.py - Profile Route → Auth Schemas: returns profile
Auth/backend/routers/user.py - Auth Logic → SQLite Database: queries
Auth/backend/auth/auth_handler.py - Auth Logic → User Model: queries
Auth/backend/auth/auth_handler.py - Auth Logic → Auth Schemas: builds token data
Auth/backend/auth/auth_handler.py - SQLite Database → User Model: creates tables
Auth/backend/database.py - Fruit App → Fruit List: renders
Simple/frontend/src/App.jsx - Fruit List → Add Fruit Form: renders
Simple/frontend/src/components/Fruits.jsx - Fruit List → Fruit API Client: calls
Simple/frontend/src/components/Fruits.jsx - Fruit API Client → Fruit Backend: HTTP requests