🚀 WebApp Python - Advanced Full-Stack Template

Professional template for modern web applications with React, FastAPI, Vercel and Supabase

💝 Support this Project

If this template helps you, consider supporting my work! ☕

📋 Table of Contents

🎯 Project Description
✨ Key Features
🏗️ System Architecture
🛠️ Technology Stack
🚀 Quick Start
📁 Project Structure
🎨 Design System
🔧 Configuration
📦 Deployment
🧪 Testing
📚 Documentation
🤝 Contributing
📄 License

🎯 Project Description

WebApp Python is an advanced and professional template for modern web application development. Designed to be a robust and scalable starting point, it combines best practices for both frontend and backend development.

🎯 Template Objectives

✅ Rapid Development: Pre-configured setup for immediate development
✅ Scalability: Modular and extensible architecture
✅ Performance: Optimized for speed and efficiency
✅ Security: Implementation of security best practices
✅ Maintainability: Clean and well-documented code
✅ Automatic Deployment: Complete integration with Vercel

✨ Key Features

🎨 Advanced Frontend

⚛️ React 18 with TypeScript for robust development
🎨 Professional Design System with Tailwind CSS
📱 Responsive Design optimized for all devices
🔄 State Management with React Hooks
🎯 Smart Forms with advanced validation
🔔 Notifications with react-hot-toast
🎭 Smooth Animations and transitions

🔧 Robust Backend

⚡ FastAPI for high-performance APIs
🔐 Complete JWT Authentication and secure
📊 Data Validation with Pydantic
🗄️ Database with Supabase
📝 Automatic Documentation with Swagger/OpenAPI
🧪 Testing with pytest

🚀 Deployment and DevOps

☁️ Vercel for automatic deployment
🔄 CI/CD integrated
📊 Monitoring and analytics
🔒 SSL/HTTPS automatic
🌍 Global CDN for better performance

🏗️ System Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Backend       │    │   Database      │
│   (React)       │◄──►│   (FastAPI)     │◄──►│   (Supabase)    │
│                 │    │                 │    │                 │
│ • TypeScript    │    │ • Python        │    │ • PostgreSQL    │
│ • Tailwind CSS  │    │ • JWT Auth      │    │ • Real-time     │
│ • Vite          │    │ • Pydantic      │    │ • Row Level     │
│ • React Router  │    │ • CORS          │    │   Security      │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                    ┌─────────────────┐
                    │   Vercel        │
                    │   (Deployment)  │
                    │                 │
                    │ • Auto Deploy   │
                    │ • Edge Network  │
                    │ • Analytics     │
                    └─────────────────┘

🛠️ Technology Stack

Frontend

Technology	Version	Purpose
	18.2.0	UI Framework
	5.0.0	Static typing
	4.4.0	Build tool
	3.3.0	CSS Framework
	6.8.0	Routing
	7.43.0	Form handling

Backend

Technology	Version	Purpose
	3.9+	Main language
	0.100.0	Web framework
	0.23.0	ASGI server
	2.0.0	Data validation
	2.8.0	JWT authentication
	1.0.0	Environment variables

Infrastructure

Technology	Purpose
	Deployment and hosting
	Database and auth
	Version control

🚀 Quick Start

Prerequisites

Node.js 18+
Python 3.9+
Git
Vercel account
Supabase account

1. Clone the Repository

git clone https://github.com/godie007/webapp-python.git
cd webapp-python

2. Configure Environment Variables

# Copy example files
cp backend/env.example backend/.env
cp frontend/.env.example frontend/.env

# Configure variables in backend/.env
JWT_SECRET=your_super_secure_jwt_secret
DATABASE_URL=your_supabase_url

3. Install Dependencies

# Frontend
cd frontend
npm install

# Backend
cd ../backend
pip install -r requirements.txt

4. Run in Development

# Terminal 1 - Backend
cd backend
python main.py

# Terminal 2 - Frontend
cd frontend
npm run dev

5. Deploy to Vercel

# From project root
npx vercel --prod

📁 Project Structure

webapp-python/
├── 📁 frontend/                 # React application
│   ├── 📁 src/
│   │   ├── 📁 components/       # Reusable components
│   │   ├── 📁 services/         # API services
│   │   ├── 📁 types/           # TypeScript definitions
│   │   ├── 📁 utils/           # Utilities
│   │   └── 📄 main.tsx         # Entry point
│   ├── 📁 public/              # Static assets
│   ├── 📄 package.json         # Frontend dependencies
│   ├── 📄 vite.config.ts       # Vite configuration
│   ├── 📄 tailwind.config.js   # Tailwind configuration
│   └── 📄 vercel.json          # Vercel configuration
├── 📁 backend/                  # FastAPI API
│   ├── 📁 app/
│   │   ├── 📁 models/          # Data models
│   │   ├── 📁 services/        # Business logic
│   │   ├── 📁 repositories/    # Data access
│   │   ├── 📁 utils/           # Utilities
│   │   └── 📄 main.py          # Main application
│   ├── 📄 requirements.txt      # Python dependencies
│   └── 📄 main.py              # Entry point
├── 📁 docs/                     # Documentation
├── 📄 vercel.json              # Vercel configuration
├── 📄 README.md                # This file
└── 📄 LICENSE                  # MIT License

🎨 Design System

Color Palette

/* Primary Colors */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;

/* Secondary Colors */
--secondary-50: #f8fafc;
--secondary-500: #64748b;
--secondary-900: #0f172a;

/* States */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;

Available Components

Panels: .panel, .panel-elevated, .panel-glass
Cards: .card, .card-elevated, .card-glass
Forms: .form-group, .form-label, .form-input
Buttons: .btn-primary, .btn-secondary, .btn-success
Badges: .badge-primary, .badge-success, .badge-error

🔧 Configuration

Environment Variables

Backend (.env)

# JWT Configuration
JWT_SECRET=your_super_secure_jwt_secret
JWT_ALGORITHM=HS256
JWT_EXPIRATION=3600

# Database
DATABASE_URL=postgresql://user:password@host:port/database

# CORS
ALLOWED_ORIGINS=http://localhost:5173,https://your-domain.vercel.app

# Environment
ENVIRONMENT=development
DEBUG=true

Frontend (.env)

# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_NAME=WebApp Python

# Environment
VITE_ENVIRONMENT=development

📦 Deployment

Automatic Deployment with Vercel

Connect with GitHub
- Go to Vercel Dashboard
- Import your GitHub repository
- Vercel will automatically detect the configuration

Configure Environment Variables

# In Vercel Dashboard > Settings > Environment Variables
JWT_SECRET=your_production_jwt_secret
DATABASE_URL=your_production_supabase_url

Manual Deployment
```
npx vercel --prod
```

Deployment URLs

Frontend: https://your-app.vercel.app
API: https://your-app.vercel.app/api
Documentation: https://your-app.vercel.app/docs

🧪 Testing

Frontend Testing

cd frontend
npm run test
npm run test:coverage

Backend Testing

cd backend
pytest
pytest --cov=app

E2E Testing

npm run test:e2e

📚 Documentation

Available Guides

Useful Commands

# Development
npm run dev          # Frontend development
python main.py       # Backend development

# Build
npm run build        # Build frontend
npm run preview      # Preview build

# Testing
npm run test         # Run tests
npm run test:watch   # Watch mode

# Linting
npm run lint         # ESLint
npm run lint:fix     # Auto-fix

# Type checking
npm run type-check   # TypeScript check

🤝 Contributing

How to Contribute

Fork the project
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Code Standards

✅ TypeScript for all frontend code
✅ ESLint + Prettier for formatting
✅ Conventional Commits for messages
✅ Testing for new features
✅ Documentation updated

Commit Structure

feat: add user authentication
fix: resolve CORS issue
docs: update API documentation
style: improve button styling
refactor: optimize database queries
test: add unit tests for auth service

📄 License

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

🎉 Thanks for Using WebApp Python!

If this template has been helpful, please consider:

⭐ Star this repository • 🐛 Report issues • 💡 Suggest improvements • 🤝 Contribute

💖 Support the Project

Learn more: Subscribe to my YouTube Channel for web development tutorials

Developed with ❤️ by @godie007

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
backend		backend
docs		docs
frontend		frontend
tests		tests
.gitignore		.gitignore
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
README.md		README.md
README_VERCEL.md		README_VERCEL.md
TECHNICAL_DOCS.md		TECHNICAL_DOCS.md
env.example		env.example
requirements.txt		requirements.txt
start-dev.ps1		start-dev.ps1
vercel-setup.ps1		vercel-setup.ps1
vercel.json		vercel.json

godie007/webapp-python-reactjs

Folders and files

Latest commit

History

Repository files navigation