Skip to content

lulzseq/fullstack-fastapi-react

Repository files navigation

πŸš€ Fullstack Template FastAPI + React Typescript

Production-ready full-stack template with enterprise-grade features, comprehensive monitoring, and modern development practices.

CI Backend CI Frontend codecov Lint Mypy

Python FastAPI React License

  • πŸ—οΈ Enterprise Architecture - Clean architecture with proper separation of concerns
  • πŸ”’ Security First - JWT authentication, rate limiting, CORS, security headers
  • πŸ“Š Full Observability - Prometheus metrics, Grafana dashboards, structured logging
  • πŸ§ͺ Testing Excellence - Unit, integration, performance, and load testing
  • πŸš€ DevOps Ready - Docker, CI/CD, automated deployments
  • 🎨 Modern Frontend - React 19, TypeScript, Chakra UI, Redux Toolkit

Homepage

API docs

Authentication

API docs

User Info

API docs

Healthcheck

API docs

Calling an API Endpoint

API docs

πŸ› οΈ Technology Stack

Backend (Python 3.13+)

  • ⚑ FastAPI - High-performance async API framework
  • πŸ—„οΈ SQLAlchemy + Alembic - Advanced ORM with migrations
  • πŸ” Pydantic - Data validation and settings management
  • πŸ’Ύ PostgreSQL - Robust relational database
  • πŸš€ Redis - High-performance caching and sessions
  • 🐰 RabbitMQ - Message queue for async processing
  • πŸ“§ Email Integration - Password reset and notifications
  • πŸ” JWT Authentication - Secure token-based auth with refresh tokens

Frontend (React 19)

  • βš›οΈ React 19 - Latest React with modern features
  • πŸ“˜ TypeScript - Type-safe development
  • 🎨 Chakra UI - Beautiful, accessible components
  • πŸ”„ Redux Toolkit - Predictable state management
  • 🌐 React Router - Client-side routing
  • πŸ“± React Hook Form - Performance forms
  • ⚑ Vite - Lightning-fast build tool
  • πŸŒ™ Dark Mode - Built-in theme switching

DevOps & Monitoring

  • πŸ‹ Docker + Docker Compose - Containerized deployment
  • πŸ“Š Prometheus - Metrics collection and alerting
  • πŸ“ˆ Grafana - Monitoring dashboards
  • πŸ“ Loki + Promtail - Centralized logging
  • πŸ”§ GitHub Actions - CI/CD pipelines
  • πŸ§ͺ Pytest - Comprehensive testing suite
  • 🎭 Playwright - E2E testing
  • πŸ‹οΈ Locust - Load testing and performance monitoring

πŸš€ Quick Start

Prerequisites

  • Python 3.13+ and uv package manager
  • Node.js 18+ and npm
  • Docker and Docker Compose

1. Clone and Setup

git clone https://github.com/lulzseq/fullstack-fastapi-react.git
cd fullstack-fastapi-react

2. Configure Environment

Edit .env file with your settings:

# Security
SECRET_KEY=your-super-secret-key-here
FIRST_SUPERUSER_PASSWORD=your-admin-password

# Database
POSTGRES_PASSWORD=your-db-password

# Email (optional)
SMTP_HOST=smtp.domain.com
SMTP_USER=your-email@domain.com
SMTP_PASSWORD=your-app-password
...

3. Launch with Docker

# Start all services locally with docker-compose.override.yml
docker compose up -d --build

# Or start production mode with docker-compose.yml
docker compose -f docker-compose.yml up -d --build

# Check status
docker compose ps

4. Access Your Application

πŸ—οΈ Architecture Highlights

Clean Architecture

backend/
β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ api/           # API endpoints and routing
β”‚   β”œβ”€β”€ core/          # Configuration and core functionality
β”‚   β”œβ”€β”€ models/        # Domain models and schemas
β”‚   β”œβ”€β”€ repositories/  # Data access layer
β”‚   β”œβ”€β”€ services/      # Business logic layer
β”‚   β”œβ”€β”€ utils/         # Utility functions
β”‚   └── validators/    # Input validation

Advanced Features

πŸ”’ Security

  • JWT tokens with automatic refresh
  • Rate limiting with Redis
  • CORS configuration
  • Security headers middleware
  • Password hashing with bcrypt
  • Input validation and sanitization

πŸ“Š Monitoring & Observability

  • Metrics: Custom Prometheus metrics for API performance
  • Logging: Structured JSON logging with request tracing
  • Dashboards: Pre-configured Grafana dashboards
  • Health Checks: Comprehensive health monitoring
  • Performance Profiling: Built-in profiler for optimization

πŸ§ͺ Testing Strategy

  • Unit Tests: 95%+ code coverage
  • Integration Tests: Database and API testing
  • Performance Tests: Benchmarking and memory profiling
  • Load Tests: Locust-based stress testing
  • E2E Tests: Playwright browser automation

πŸš€ Performance

  • Async/Await: Non-blocking I/O operations
  • Connection Pooling: Optimized database connections
  • Caching: Redis-based response caching
  • Compression: Gzip response compression
  • CDN Ready: Static asset optimization

πŸ“± Frontend Features

Modern React Development

  • API Explorer: Interactive endpoint testing interface
  • Authentication Flow: Complete login/register/reset password
  • Token Refresh: Autoupdate refresh and access tokens
  • User Management: Profile management and admin features
  • Responsive Design: Mobile-first approach
  • Error Handling: Comprehensive error boundaries
  • Loading States: Skeleton screens and spinners

Developer Experience

  • Hot Reload: Instant development feedback
  • TypeScript: Full type safety
  • ESLint + Prettier: Code formatting and linting
  • Bundle Analysis: Webpack bundle analyzer
  • Performance Monitoring: Web vitals tracking

πŸ”§ Development

Backend Development

cd backend

# Install dependencies
uv sync --all-extras --dev

# Database migrations
uv run alembic upgrade head

# Run development server
uv run fastapi dev

# Run tests with xdist
uv run pytest -n auto -v

# Run with coverage
uv run pytest -n auto --cov=. --cov-report=html

Frontend Development

cd frontend

# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm run test

# Build for production
npm run build

Performance Testing

# Load testing
cd backend/tests/performance/load
locust -f locustfile.py --host=http://localhost:8000

# Memory profiling
cd backend
uv run python -m memory_profiler app/main.py

# Database performance
cd backend/scripts
uv run python analyze_queries.py

🚒 Deployment

Production Deployment

# Build and deploy
docker compose -f docker-compose.yml up -d --build

# Scale services
docker compose up -d --scale backend=3 --scale frontend=2

# Monitor deployment
docker compose logs -f

Environment Configuration

  • Development: .env.local
  • Production: .env.production

πŸ“Š Monitoring & Metrics

Key Metrics Tracked

  • API Performance: Response times, error rates, throughput
  • Database: Query performance, connection pool usage
  • System: CPU, memory, disk usage
  • Business: User registrations, login success rates
  • Security: Failed authentication attempts, rate limit hits

Grafana Dashboards

  • Application Overview: High-level system health
  • API Performance: Detailed endpoint metrics
  • Database Monitoring: PostgreSQL performance
  • Infrastructure: Docker container metrics
  • Business Intelligence: User activity and growth

πŸ§ͺ Testing

Test Coverage

  • Unit Tests: Core business logic and utilities
  • Integration Tests: Database operations and API endpoints
  • Performance Tests: Load testing and benchmarking
  • Security Tests: Authentication and authorization
  • E2E Tests: Complete user workflows

Running Tests

# Backend tests
cd backend
uv run pytest tests/ -v --cov=app

# Frontend tests
cd frontend
npm run test

# E2E tests
npm run test:e2e

# Performance tests
cd backend/tests/performance
uv run python -m pytest benchmark/

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


⭐ Star this repository if it helped you build something awesome!

About

πŸš€ Fullstack Template FastAPI + React Typescript. Using FastAPI with JWT auth and fingerprinting, PostgreSQL, Redis, RabbitMQ, React Typescript withRedux Toolkit and ChakraUI, GIthub Actions, Docker and more.

Topics

Resources

License

Stars

Watchers

Forks

Packages

Β 
Β 
Β 

Contributors