Building a Modern Web App: FastAPI + React TypeScript Template

Hey developers! 👋 I'm excited to share a template I've created that combines FastAPI and React with TypeScript, aimed at helping you kickstart your full-stack projects faster. Whether you're building a new web application or looking to modernize your stack, this template provides a solid foundation with best practices baked in.

Why This Stack? 🤔

The combination of FastAPI and React offers several compelling advantages:

Backend (FastAPI)

• Lightning-fast performance with async support
• Automatic OpenAPI documentation
• Type hints and validation with Pydantic
• Easy to learn and highly productive

Frontend (React + TypeScript)

• Type safety and better developer experience
• Modern React features and hooks
• Scalable component architecture
• Reduced runtime errors

Infrastructure

• MongoDB for flexible document storage
• Redis for high-performance caching
• Docker for consistent environments
• Poetry and Yarn for dependency management

Template Features 🚀

1. Containerized Development

   • Run everything in Docker or use a hybrid approach
   • Consistent development environment across team members
   • Production-ready Docker configurations

2. Development Tools

   • Code formatting utilities
   • Development scripts for common tasks
   • Environment configuration templates

3. Modern Dependencies

   • Python 3.11 with Poetry management
   • Latest React 18 with TypeScript
   • MongoDB and Redis integration

Getting Started 🌟

The template is designed to be easy to use. Here's how you can get started:

1. Clone the repository:

git clone https://github.com/yagnesh97/fastapi-react-template
cd fastapi-react-template

1. Set up your environment files:

# Backend environment
cd backend
cp .env-example .env

# Database environment
cd ../database
cp .env-example .env

1. Choose your development mode:

Option 1: Full Docker Setup

docker-compose -f docker-compose.yml up --build -d

Option 2: Hybrid Setup (Local Development with Dockerized Database)

# Start MongoDB and Redis
docker-compose -f docker-compose.yml up mongo redis --build -d

# Start Backend
cd backend
poetry install
./cmd.sh start

# Start Frontend
cd frontend
yarn install
yarn start

Project Structure 📁

├── backend/          # FastAPI application
├── frontend/         # React TypeScript application
├── database/         # Database configuration
└── docker-compose.yml

Development Workflow 💻

The template supports a flexible development workflow:

1. Local Development

   • Hot-reloading for both frontend and backend
   • Local dependency management
   • Easy debugging

2. Docker Development

   • Consistent environment across team
   • Easy service orchestration
   • Production-like setup

3. Production Deployment

   • Optimized Docker builds
   • Environment-specific configurations
   • Ready for CI/CD integration

What's Next? 🌅

Future improvements planned for the template:

1. Authentication boilerplate
2. Testing setup and examples
3. CI/CD pipeline templates
4. More development utilities
5. Performance optimization examples

Contribute 🤝

This template is open source and contributions are welcome! Whether it's:

• Bug fixes
• New features
• Documentation improvements
• Best practices suggestions

Feel free to:

1. Fork the repository
2. Create your feature branch
3. Submit a pull request

Get Started Now 🚀

Check out the template on GitHub: fastapi-react-template

If you find it useful, don't forget to give it a star ⭐️

Have questions or suggestions? Feel free to:

• Open an issue
• Submit a pull request
• Comment below

Let's build something amazing together! 💪

webdev #python #react #typescript #docker