Component Architecture of Frontend and Backend
The component architecture of this monorepo follows a modern full-stack pattern with a decoupled frontend and backend.
The Frontend is built with React and uses TanStack Router for client-side navigation. Data fetching and state management are handled by API Communication Layer, which interacts with an auto-generated API Client (SDK). This SDK is produced from the backend's OpenAPI specification, ensuring type safety across the network boundary.
The Backend is a FastAPI application. It organizes logic into API Routes which handle incoming HTTP requests. These routes utilize FastAPI's dependency injection system for authentication and database session management. The CRUD Layer contains reusable logic for database interactions, while SQLModel serves a dual purpose: defining the database schema (SQLAlchemy) and the API data transfer objects (Pydantic).
The system persists data in a PostgreSQL database and includes utility services for tasks like sending emails. The entire stack is containerized using Docker Compose for consistent development and deployment environments.
Key Architectural Findings:
- The project uses SQLModel to unify SQLAlchemy models and Pydantic schemas, reducing boilerplate.
- Frontend data fetching is powered by TanStack Query, which consumes an auto-generated TypeScript SDK.
- FastAPI dependencies (SessionDep, CurrentUser) are used to inject database sessions and authenticated users into routes.
- The frontend uses TanStack Router for type-safe routing and Shadcn UI for component styling.
- Alembic is used for database migrations, while the CRUD layer provides a clean abstraction for data operations.