A full-stack containerized application featuring a FastAPI backend, PostgreSQL database, and React frontend with Tailwind CSS.

• 🔐 JWT Authentication with User Registration
• 🐳 Fully Dockerized with Multi-Container Architecture
• 🚀 FastAPI Backend with Async Database Support
• ⚛️ React Frontend with Modern UI (Tailwind CSS)
• 🐘 PostgreSQL Database with Automatic Migrations
• 🔄 Hot Reload for Development
• 📝 Interactive API Documentation (Swagger UI)
• 🌐 Nginx for Production-Grade Static File Serving

• Docker Desktop (Windows/Mac) or Docker Engine (Linux)
• Git
• 4GB RAM minimum
• 10GB free disk space

docker-fastapi/
├── backend/
│   ├── app/
│   │   └── main.py          # FastAPI application
│   ├── requirements.txt     # Python dependencies
│   └── Dockerfile          # Backend container configuration
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   │   ├── Login.js    # Login component
│   │   │   └── Register.js # Registration component
│   │   ├── App.js         # Main React component
│   │   └── index.css      # Tailwind CSS styles
│   ├── nginx.conf         # Nginx configuration
│   ├── package.json       # Node.js dependencies
│   └── Dockerfile        # Frontend container configuration
├── docker-compose.yml    # Container orchestration
└── README.md            # Documentation

1. Clone the repository:

   git clone <repository-url>
   cd docker-fastapi

2. Set up environment variables:

   # Backend
   cp backend/.env.example backend/.env
   # Edit backend/.env with your configurations
   
   # Frontend
   cp frontend/.env.example frontend/.env
   # Edit frontend/.env with your configurations

3. Start the application:

   docker-compose up --build

4. Access the applications:

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:8000
   • API Documentation: http://localhost:8000/docs

• FastAPI framework for high-performance API
• SQLAlchemy for database ORM
• Pydantic for data validation
• JWT for authentication
• Automatic OpenAPI documentation

• React with functional components and hooks
• React Router for client-side routing
• Tailwind CSS for styling
• Nginx for static file serving and reverse proxy

• Persistent storage with Docker volumes
• Automatic table creation on startup
• Asynchronous database operations

• Source code in backend/app/
• Hot reload enabled for Python files
• Database models in main.py
• Authentication logic with JWT

• Source code in frontend/src/
• Component-based architecture
• Responsive design with Tailwind CSS
• Protected routes with authentication

The application uses environment variables for configuration. Sample .env.example files are provided for both frontend and backend.

# Database Configuration
DATABASE_URL=postgresql://user:password@db:5432/mydatabase

# JWT Configuration
SECRET_KEY=your-super-secret-key-change-this-in-production
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30

# API Configuration
API_V1_STR=/api/v1
PROJECT_NAME=FastAPI Backend
BACKEND_CORS_ORIGINS=["http://localhost:3000","http://localhost:8000"]

# First Superuser
FIRST_SUPERUSER=admin
FIRST_SUPERUSER_PASSWORD=admin_password
[email protected]

# Postgres
POSTGRES_USER=user
POSTGRES_PASSWORD=password
POSTGRES_DB=mydatabase
POSTGRES_HOST=db
POSTGRES_PORT=5432

# API Configuration
REACT_APP_API_URL=http://localhost:8000
REACT_APP_API_TIMEOUT=5000

# Feature Flags
REACT_APP_ENABLE_AUTH=true
REACT_APP_ENABLE_REGISTRATION=true

# UI Configuration
REACT_APP_SITE_NAME=FastAPI React App
REACT_APP_COMPANY_NAME=Your Company
[email protected]

# Development
PORT=3000
GENERATE_SOURCEMAP=false
BROWSER=none  # Prevent auto-opening browser

1. Copy the example files:

   cp backend/.env.example backend/.env
   cp frontend/.env.example frontend/.env

2. Update the values in both .env files:

   • Change sensitive values like SECRET_KEY and database credentials
   • Adjust timeouts and feature flags as needed
   • Configure CORS origins for your deployment

3. Never commit .env files to version control:

   • The .gitignore file is configured to exclude .env files
   • Only commit .env.example files with sample values

4. For production:

   • Use strong, unique values for all secrets
   • Set appropriate CORS origins
   • Configure proper API timeouts
   • Enable HTTPS-only cookies
   • Set reasonable token expiration times

1. Container Build Failures

   • Issue: npm install fails during build

   # Solution: Clean npm cache
   docker-compose down
   docker volume prune
   docker-compose up --build

2. Database Connection Issues

   • Issue: "role does not exist" or "database does not exist"

   # Solution: Reset database volume
   docker-compose down -v
   docker-compose up --build

3. Frontend 404 Errors

   • Issue: Routes not working after refresh
   • Solution: Check nginx.conf configuration
   • Verify the try_files directive is correct

4. Backend Authentication Errors

   • Issue: "Could not validate credentials"
   • Solution: Check if JWT token is being sent correctly
   • Verify token expiration time

5. Hot Reload Not Working

   • Issue: Changes not reflecting

   # Solution: Restart containers
   docker-compose restart

1. View Container Logs

   # All containers
   docker-compose logs
   
   # Specific container
   docker-compose logs backend
   docker-compose logs frontend
   docker-compose logs db

2. Check Container Status

   docker-compose ps

3. Access Container Shell

   # Backend
   docker-compose exec backend sh
   
   # Frontend
   docker-compose exec frontend sh
   
   # Database
   docker-compose exec db psql -U user -d mydatabase

4. Database Verification

   # Connect to database
   docker-compose exec db psql -U user -d mydatabase
   
   # List tables
   \dt
   
   # Describe table
   \d users

1. Change default credentials in production
2. Use environment variables for sensitive data
3. Implement rate limiting
4. Enable CORS with specific origins
5. Use HTTPS in production

1. Fork the repository
2. Create a feature branch
3. Commit changes
4. Push to the branch
5. Create a Pull Request

MIT License - feel free to use this project for your own learning!