{"id":30887720,"url":"https://github.com/sajanv88/full_stack_fastapi_react_template","last_synced_at":"2026-06-10T07:31:12.387Z","repository":{"id":312537305,"uuid":"1047824234","full_name":"sajanv88/full_stack_fastapi_react_template","owner":"sajanv88","description":"About Full stack, modern multi-tenancy web template. Using FastAPI, React, MongoDB, Beanie ODM,  Docker, Helm and more.","archived":false,"fork":false,"pushed_at":"2026-06-03T06:06:02.000Z","size":19295,"stargazers_count":43,"open_issues_count":21,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-03T07:31:30.415Z","etag":null,"topics":["ai-chat-interface","aws-s3","azure-blob-storage","backend","beanie-odm","fastapi","frontend","mongodb","multi-tenancy","ollama","pydantic","python","rbac","react","shadcn-ui","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sajanv88.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-31T10:14:17.000Z","updated_at":"2026-06-03T07:27:44.000Z","dependencies_parsed_at":"2025-12-30T04:09:38.882Z","dependency_job_id":null,"html_url":"https://github.com/sajanv88/full_stack_fastapi_react_template","commit_stats":null,"previous_names":["sajanv88/full_stack_fastapi_react_template"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/sajanv88/full_stack_fastapi_react_template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sajanv88%2Ffull_stack_fastapi_react_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sajanv88%2Ffull_stack_fastapi_react_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sajanv88%2Ffull_stack_fastapi_react_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sajanv88%2Ffull_stack_fastapi_react_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sajanv88","download_url":"https://codeload.github.com/sajanv88/full_stack_fastapi_react_template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sajanv88%2Ffull_stack_fastapi_react_template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34142637,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-chat-interface","aws-s3","azure-blob-storage","backend","beanie-odm","fastapi","frontend","mongodb","multi-tenancy","ollama","pydantic","python","rbac","react","shadcn-ui","typescript"],"created_at":"2025-09-08T14:09:43.246Z","updated_at":"2026-06-10T07:31:12.374Z","avatar_url":"https://github.com/sajanv88.png","language":"TypeScript","funding_links":["https://ko-fi.com/sajanvtech"],"categories":[],"sub_categories":[],"readme":"# Full-Stack FastAPI React Multi-Tenancy Template\n\nA modern full-stack Multi-tenant application template featuring a FastAPI backend with Clean Architecture, React frontend with TypeScript, and comprehensive tooling for development and deployment.\n\n## ✨ Key Features\n\nThis full-stack template provides enterprise-ready features out of the box:\n\n### 🔐 User Management\n- **Authentication \u0026 Authorization**: JWT-based authentication with refresh tokens\n- **User Registration**: Self-registration with email verification\n- **Profile Management**: Complete user profile with image upload support\n- **Account Management**: User activation, deactivation, and role assignment\n- **Password Management**: Secure password reset and update functionality\n- **Passkeys Management**: Passkeys and management\n- **Magic link**: Passwordless login via Magic link\n- **Configurable SSO**: Configure SSO\n\n### 🏢 Tenant Management\n- **Multi-tenancy Support**: Isolated data and resources per tenant\n- **Tenant Search**: Advanced search functionality by name and subdomain\n- **Tenant Administration**: Create, update, and manage tenant configurations\n- **Subdomain Routing**: Custom subdomain support for each tenant\n- **Custom Domain Routing**: Bring your own domain\n\n### 👥 Role Management\n- **Role-Based Access Control (RBAC)**: Granular permission system\n- **Dynamic Roles**: Create and manage custom roles with specific permissions\n- **Role Assignment**: Assign roles to users within tenant contexts\n- **Permission Matrix**: Fine-grained control over feature access\n\n### ☁️ Cloud Storage Integration\n- **Azure Blob Storage**: Native integration with Azure cloud storage\n- **AWS S3 Compatible**: Full S3 API compatibility for file storage\n- **File Upload Management**: Secure file upload with validation and processing\n- **Storage Abstraction**: Seamless switching between storage providers\n\n### 🤖 AI Chat Interface\n- **Local AI Models**: Integration with locally installed AI models\n- **Real-time Streaming**: Live response streaming for better user experience\n- **Chat History**: Persistent conversation history and management\n- **Model Selection**: Dynamic switching between different AI models\n- **Responsive Design**: Mobile-optimized chat interface\n\n### 💳 Stripe Payment Integration\n- **Payment Gateway Configuration**: Easy Stripe API and webhook setup\n- **Product Management**: Create and manage products with CRUD operations\n- **Billing Plans**: Flexible plan creation with monthly/yearly intervals\n- **Trial Periods**: Toggle trial periods for any plan (default 14 days)\n- **Invoice Management**: Comprehensive invoice listing and tracking\n- **Checkout Sessions**: Billing record management with pagination\n- **Multi-Currency Support**: Accept payments in multiple currencies\n- **Subscription Management**: Handle one-time and recurring payments\n\n### 🎛️ Feature Management\n- **Feature Toggles**: Enable/disable features per tenant\n- **Dynamic Feature Control**: Real-time feature activation/deactivation\n- **Visual Feature Dashboard**: Intuitive interface for feature management (Comming soon!)\n- **Granular Permissions**: Control feature access at tenant level\n\n### 🏠 Tenant Experience\n- **Custom Branding**: Tenant-specific configurations and settings (Coming soon!)\n- **Inactive Tenant View**: Professional inactive account messaging\n- **DNS Configuration**: Step-by-step custom domain setup\n- **Tenant Settings**: Comprehensive tenant information management\n\n### Coolify Integration\n- **Domain Mapping**: Assign domain easily with Coolify app\n- **Deployment**: Auto deploy when new domain added.\n- **Toggle on/off**: Via env\n\n\n## Watch Demo\n\n![DEMO](/demo.gif)\n![Multi-tenancy DNS Demo](/dns.gif)\n[Check out deployed DEMO Version](https://demo.fsrapp.xyz/)\n\n### Login as Host\n\nUse the following credentials to log in as the **host administrator**:\n\n| Username                        | Password   |\n|----------------------------------|------------|\n| admin@fsrapp.xyz | Test@123! |\n\n---\n\n### Login as Tenant\n\nTo log in as a **tenant admin**:\n\n1. On the login page, search a **dentally** tenant from the search field.  \n2. Then enter the credentials below:\n\n| Username            | Password       |\n|----------------------|----------------|\n| admin@dentally.nl    | Dentally@123!  |\n\n### Login as a Tenant User\n\n1. First, create a new user while logged in as the **Tenant Admin**.  \n2. After creating the user, **log out** from the admin account.  \n3. Finally, **log in** again using the newly created user's credentials.\n\n\n## 🏗️ Architecture Overview\n\nThis project follows a **Clean Architecture** pattern with clear separation between backend and frontend, designed for scalability, maintainability, and testability.\n\n### Technology Stack\n\n**Backend:**\n- **FastAPI** - Modern Python web framework\n- **MongoDB** - NoSQL database with Beanie ODM\n- **Redis** - Caching and message broker\n- **Celery** - Asynchronous task processing\n- **JWT** - Authentication and authorization\n- **LangChain** - AI/ML integration capabilities\n\n**Frontend:**\n- **React 18** - Modern UI library\n- **TypeScript** - Type-safe JavaScript\n- **Vite** - Fast build tool\n- **Tailwind CSS** - Utility-first CSS framework\n- **shadcn/ui** - High-quality React components\n- **React Hook Form** - Form handling with validation\n\n**Infrastructure:**\n- **Docker** - Containerization\n- **Docker Compose** - Development environment orchestration\n- **Helm** - Kubernetes deployment charts\n\n## 📁 Project Structure\n\n```\nfull_stack_fastapi_react_template/\n├── backend/                    # FastAPI backend application\n│   ├── api/                   # Clean Architecture layers\n│   │   ├── common/           # Shared utilities and constants\n│   │   ├── core/             # Core business logic\n│   │   ├── domain/           # Domain models and entities\n│   │   ├── infrastructure/   # External services integration\n│   │   ├── interfaces/       # API controllers and routes\n│   │   └── usecases/         # Application use cases\n│   ├── tests/                # Test suite\n│   ├── .env.example          # Environment variables template\n│   ├── Dockerfile            # Container configuration\n│   ├── Makefile              # Development commands\n│   ├── pyproject.toml        # Python dependencies and config\n│   └── requirements.txt      # Python dependencies (fallback)\n│\n├── frontend/                  # React frontend application\n│   └── app/                  # Main application code\n│       ├── src/\n│       │   ├── api/          # Auto-generated API client\n│       │   ├── components/   # React components\n│       │   │   ├── features/ # Feature-specific components\n│       │   │   ├── layouts/  # Layout components\n│       │   │   ├── providers/# Context providers\n│       │   │   ├── shared/   # Reusable components\n│       │   │   └── ui/       # shadcn/ui components\n│       │   ├── hooks/        # Custom React hooks\n│       │   ├── lib/          # Utility functions\n│       │   └── assets/       # Static assets\n│       ├── public/           # Public static files\n│       ├── package.json      # Node.js dependencies\n│       ├── vite.config.ts    # Vite configuration\n│       └── components.json   # shadcn/ui configuration\n│\n├── infra/                     # Infrastructure and deployment\n│   └── helm/                 # Kubernetes Helm charts\n│       ├── templates/        # Kubernetes manifests\n│       ├── Chart.yaml        # Helm chart metadata\n│       └── values.yaml       # Default configuration values\n│\n└── dev.compose.yaml          # Docker Compose for development\n```\n\n## 🔧 Backend Architecture\n\nThe backend follows **Clean Architecture** principles with clear layer separation:\n\n### Layer Structure\n\n- **Domain Layer** (`domain/`): Core business entities and rules\n- **Use Cases Layer** (`usecases/`): Application-specific business logic\n- **Interface Adapters** (`interfaces/`): API controllers, presenters\n- **Infrastructure Layer** (`infrastructure/`): External services, databases, message queues\n- **Common Layer** (`common/`): Shared utilities, constants, and configurations\n\n### Key Features\n\n- **Authentication \u0026 Authorization**: JWT-based with refresh tokens, Passkey and Magic Link\n- **Database**: MongoDB with Beanie ODM for async operations\n- **Caching**: Redis for performance optimization\n- **Background Tasks**: Celery with Redis broker\n- **Email**: SMTP integration with async mail sending\n- **AI Integration**: LangChain for AI/ML capabilities\n- **Stripe Integration**: Complete payment gateway with products, plans, and subscriptions\n- **API Documentation**: Auto-generated OpenAPI/Swagger docs\n- **Testing**: Comprehensive test suite with pytest\n\n### Dependencies Management\n\n- **uv**: Fast Python package installer and resolver\n- **pyproject.toml**: Modern Python dependency specification\n- **Virtual Environment**: Isolated Python environment in `.venv/`\n\n## 🎨 Frontend Architecture\n\nThe frontend is built with modern React patterns and TypeScript for type safety:\n\n### Component Organization\n\n- **Features** (`components/features/`): Business logic components\n  - **Auth**: Login, registration, password reset, passkey, and magic link authentication\n  - **Profile**: User profile management with image upload\n  - **Chat**: AI chat interface with streaming responses\n  - **Tenant**: Tenant management, settings, and feature toggles\n  - **Billings/Stripe**: Complete payment gateway integration\n    - Stripe configuration and settings\n    - Product management (CRUD operations)\n    - Billing plan creation and management\n    - Invoice listing and tracking\n    - Checkout session overview\n    - Trial period management\n- **Layouts** (`components/layouts/`): Page layout components (dashboard, default)\n- **Providers** (`components/providers/`): React context providers for global state\n- **Shared** (`components/shared/`): Reusable components across features\n- **UI** (`components/ui/`): Low-level shadcn/ui components\n\n### Key Features\n\n- **Type Safety**: Full TypeScript integration\n- **Component Library**: shadcn/ui for consistent design system\n- **Form Handling**: React Hook Form with Zod validation\n- **Routing**: React Router for client-side navigation\n- **State Management**: React Context for global state\n- **Styling**: Tailwind CSS with responsive design\n- **API Integration**: Auto-generated client from OpenAPI specs\n- **Payment Integration**: Complete Stripe payment gateway components\n- **Feature Management**: Dynamic feature toggle interface\n- **Professional UI**: Modern card-based layouts with proper loading states\n\n### Build System\n\n- **Vite**: Fast development server and build tool\n- **ESLint**: Code linting and formatting\n- **TypeScript**: Compile-time type checking\n- **pnpm**: Efficient package management\n\n## 🐳 Development Environment\n\n### Stripe Payment Integration Setup\n\nTo use the Stripe payment features, you need to configure your Stripe account:\n\n1. **Get Stripe API Keys**:\n   - Sign up at [Stripe Dashboard](https://dashboard.stripe.com)\n   - Get your API keys from Developers → API keys\n   - Get your webhook secret from Developers → Webhooks\n\n2. **Configure Stripe in Application**:\n   - Navigate to Stripe Configuration page in the app\n   - Enter your Stripe Secret Key\n   - Enter your Webhook Secret\n   - Set default currency (e.g., USD, EUR)\n   - Choose payment mode (one-time, recurring, or both)\n   - Set trial period days (optional)\n\n3. **Create Products and Plans**:\n   - Navigate to Products page to create your offerings\n   - Use \"Add a Plan\" to create pricing plans\n   - Toggle trial periods for any plan\n   - Monitor billing through the Billing Overview dashboard\n\n### Prerequisites\n\n- Python 3.13+\n- Node.js 22+\n- Docker \u0026 Docker Compose\n- pnpm (recommended) or npm\n- Git\n\n### Getting Started\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/sajanv88/full_stack_fastapi_react_template.git\n   cd full_stack_fastapi_react_template\n   ```\n\n### Environment Setup\n\n1. **Backend Environment**:\n   ```bash\n   cp backend/.env.example backend/.env\n   ```\n   \n   Edit `backend/.env` with your configuration:\n\n   ```bash\n        # MongoDB settings\n        MONGO_URI=mongodb://127.0.0.1:27012\n        MONGO_DB_NAME=full_stack_fastapi_react_template\n\n        # JWT settings\n        JWT_SECRET=your_jwt_secret_key\n        REFRESH_TOKEN_SECRET=your_refresh_jwt_secret_key\n\n        # Configure your default app admin credentials.\n        ADMIN_EMAIL=admin@example.com\n        ADMIN_PASSWORD=Test@123!\n\n        # SMTP Email settings\n        SMTP_HOST=\"localhost\"\n        SMTP_PORT=1023\n        SMTP_USER=\"\"\n        SMTP_PASSWORD=\"\"\n        SMTP_MAIL_FROM=noreply@example.com\n        SMTP_MAIL_FROM_NAME=\"Full-Stack Fast API\"\n        SMTP_STARTTLS=False\n        SMTP_SSL_TLS=False\n        SMTP_USE_CREDENTIALS=False\n        SMTP_VALIDATE_CERTS=False\n\n        # Redis settings\n\n        REDIS_URI=\"redis://localhost:6372/0\"\n\n        # Celery settings\n        CELERY_BROKER_URL=\"redis://localhost:6372/0\"\n        CELERY_RESULT_BACKEND=\"redis://localhost:6372/0\"\n\n        # App configuration\n        APP_TITLE=\"Full-Stack FastAPI React Template\"\n        APP_VERSION=\"0.1.0\"\n\n        API_ENDPOINT_BASE=\"http://localhost:8000/api\"\n\n        # Configure Multi-Tenancy\n        MULTI_TENANCY_STRATEGY=\"header\"\n\n        # Host main domain name\n        HOST_MAIN_DOMAIN=\"fsrapp.com\"\n\n        # Environment\n        FASTAPI_ENV=\"development\"  # Options: \"development\", \"production\"\n\n        # Ollama settings\n        OLLAMA_HOST=\"http://localhost:11434\"\n      \n        # Coolify settings for deployment\n         COOLIFY_ENABLED=\"false\" # Set to \"true\" to enable Coolify integration\n         COOLIFY_API_URL=\"https://{replace_with_your_coolify_instance_endpoint}/api/v1\"\n         COOLIFY_API_KEY=\"{replace_with_your_coolify_api_key}\" # Read here https://coolify.io/docs/api-reference/authorization\n         COOLIFY_APPLICATION_ID=\"{replace_with_your_coolify_application_id}\" # Read here https://coolify.io/docs/api-reference/api/operations/get-application-by-uuid\n\n\n         # Default aws s3 settings for file uploads this belongs to the Host\n         AWS_REGION=\"eu-central-1\"\n         AWS_ACCESS_KEY_ID=\"Ab...\"\n         AWS_SECRET_ACCESS_KEY=\"xxe...\"\n         AWS_S3_BUCKET_NAME=\"fs..\"\n\n         # Stripe credentials settings\n         STRIPE_API_KEY=\"rk_test_5...\"\n         STRIPE_PUBLISHABLE_KEY=\"pk_test_5...\"\n         STRIPE_SECRET_KEY=\"sk_test_$...\"\n\n   ```\n\n2. **Start Infrastructure Services**:\n   ```bash\n   docker-compose -f dev.compose.yaml up -d\n   ```\n   This starts:\n   - MongoDB (port 27012)\n   - Redis (port 6372)\n   - Fake SMTP Server (ports 1023, 1083)\n   - Caddy proxy for local development ssl. Useful for testing passkey login in local development.\n\n3. **Backend Development**:\n   ```bash\n   cd backend\n   uv sync                      # Install dependencies\n   uv run fastapi dev api        # Start development server\n   ```\n\n4. **Frontend Development**:\n   ```bash\n   cd frontend/app\n   pnpm install              # Install dependencies\n   pnpm dev                  # Start development server\n   ```\n\n### Available Services\n\n- **Backend API**: http://localhost:8000\n- **Frontend App**: http://localhost:5173\n- **API Documentation**: http://localhost:8000/docs\n- **MongoDB**: localhost:27012\n- **Redis**: localhost:6372\n- **Fake SMTP UI**: http://localhost:1083\n\n### Available Features in UI\n\nOnce you have the application running, you can access the following features:\n\n**Authentication \u0026 User Management:**\n- Login with email/password\n- Passkey authentication (WebAuthn)\n- Magic link authentication\n- User registration and profile management\n- Password reset functionality\n\n**Tenant Management:**\n- Tenant settings and configuration\n- Custom domain DNS setup\n- Feature toggle management\n- Inactive tenant view with support information\n\n**Stripe Billing \u0026 Payments:**\n- Stripe configuration interface\n- Product management (create, edit, delete)\n- Billing plan creation with trial periods\n- Billing overview dashboard\n- Invoice listing and management\n- Checkout session tracking\n\n**AI Chat:**\n- Real-time AI chat interface\n- Chat history management\n- Model selection\n\n**Dashboard:**\n- Overview of key metrics\n- Quick access to all features\n- Responsive design for mobile and desktop\n\n## 🔄 Integration \u0026 Workflow\n\n### API Client Generation\n\nThe frontend automatically generates TypeScript API clients from the backend's OpenAPI specification:\n\n```bash\ncd frontend/app\npnpm run generate:api\n```\n\nThis creates type-safe API clients in `src/api/` directory.\n\n### Development Workflow\n\n1. **Backend First**: Define API endpoints and models\n2. **Generate Client**: Update frontend API client\n3. **Frontend Integration**: Use generated clients in React components\n4. **Type Safety**: TypeScript ensures end-to-end type safety\n\n### Background Tasks\n\nStart Celery worker for background processing:\n\n```bash\ncd backend\nmake worker          # Start Celery worker (It is required for post tenant creation process)\nmake flower          # Start Flower monitoring UI\n```\n\n## 🚀 Deployment\n\n### Docker Deployment\n\nEach service includes production-ready Dockerfiles:\n\n- **Backend**: Multi-stage build with Python optimization\n- **Frontend**: Static build served by backend. \n\n### Kubernetes Deployment\n\nHelm charts provided in `infra/helm/` for Kubernetes deployment:\n\n```bash\ncd infra/helm\nhelm install my-app . -f values.yaml\n```\n\n## 🔧 Configuration\n\n### Backend Configuration\n\nEnvironment variables in `backend/.env`:\n- Database connections (MongoDB, Redis)\n- JWT secrets and security settings\n- SMTP email configuration\n- Admin user credentials\n- Feature flags and API settings\n\n### Frontend Configuration\n\nConfiguration in `frontend/app/`:\n- `vite.config.ts`: Build and development settings\n- `components.json`: shadcn/ui component configuration\n- `tsconfig.json`: TypeScript compiler options\n\n## 🧪 Testing\n\n### Backend Testing\n\n```bash\ncd backend\nuv run pytest                # Run all tests\nuv run pytest tests/interfaces/  # Run API tests\n```\n\n### Frontend Testing\n\n```bash\ncd frontend/app\npnpm test                    # Run component tests\npnpm build                   # Test production build\n```\n\n## 📚 Additional Resources\n\n- **Backend API Docs**: Visit `/docs` endpoint when running\n- **Component Storybook**: shadcn/ui component documentation\n- **Architecture Decisions**: See individual README files in `backend/` and `frontend/app/`\n\n## 🤝 Contributing\n\n1. Follow the established folder structure\n2. Maintain Clean Architecture principles in backend\n3. Use TypeScript for all frontend code\n4. Add tests for new features\n5. Update API client after backend changes\n\nIf you like this project, please consider supporting me on, [Ko-fi!](https://ko-fi.com/sajanvtech) Your support helps cover maintenance and server costs. I truly appreciate it 🙏 \n---\n\nThis template provides a solid foundation for building modern, scalable full-stack applications with clear separation of concerns and comprehensive tooling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsajanv88%2Ffull_stack_fastapi_react_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsajanv88%2Ffull_stack_fastapi_react_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsajanv88%2Ffull_stack_fastapi_react_template/lists"}