Full-Stack .NET 9 + React TypeScript + Supabase Starter Kit
Build Production-Ready Full-Stack Applications in Hours, Not Weeks
📦 What You Get
A complete, production-ready full-stack application combining .NET 9 Web API, React with TypeScript, Supabase database, and Docker deployment. Everything you need to launch your SaaS, e-commerce, or business application quickly.
✨ Complete Feature Set
🎨 Modern Frontend (React + TypeScript)
– ✅ React 18.3 with TypeScript for type-safe development
– ✅ Beautiful, responsive UI with modern CSS styling
– ✅ Product Management - Card grid layout with CRUD operations
– ✅ Customer Management - Professional data tables with full CRUD
– ✅ Order Management System - Complete order creation and tracking
– ✅ Form validation with error handling
– ✅ Loading states and user feedback
– ✅ Mobile-responsive design with breakpoints
– ✅ Gradient buttons with smooth animations
– ✅ React Router for seamless navigation
– ✅ Axios for robust HTTP requests
⚙️ Robust Backend (.NET 9 Web API)
– ✅ RESTful API with comprehensive endpoints
– ✅ Supabase PostgreSQL integration
– ✅ Products API - Full CRUD operations
– ✅ Customers API - Complete customer management
– ✅ Orders API - Multi-item order system with relationships
– ✅ Swagger/OpenAPI documentation built-in
– ✅ Input validation and error handling
– ✅ Health check endpoints
– ✅ CORS configuration for cross-origin requests
– ✅ Professional code structure and best practices
🐳 Docker-Ready Deployment
– ✅ Complete Docker setup with docker-compose
– ✅ Multi-stage builds for optimized images
– ✅ Nginx configuration for React SPA
– ✅ Backend on port 5001, Frontend on port 3001
– ✅ One-command deployment: ./docker-start.sh
– ✅ Production-ready container architecture
– ✅ Environment variable management
– ✅ Hot reload for development
🗄️ Database (Supabase PostgreSQL)
– ✅ Pre-configured table schemas (Products, Customers, Orders)
– ✅ Relationship management (Orders → Customers, OrderItems → Products)
– ✅ Row Level Security (RLS) policies
– ✅ Sample data included
– ✅ SQL migration scripts
– ✅ Optimized indexes for performance
📚 Comprehensive Documentation
– ✅ Quick start guide (5 minutes to running)
– ✅ Docker deployment guide
– ✅ API documentation with examples
– ✅ Database setup instructions
– ✅ Troubleshooting section
– ✅ Production deployment checklist
– ✅ Architecture explanation
🎯 Perfect For
– 💼 SaaS Developers - Build your MVP in hours, not weeks
– 🛒 E-commerce Projects - Complete product and order management foundation
– 📱 Full-Stack Applications - Modern architecture ready to scale
– 🎓 Learning & Teaching - Best practices in .NET + React integration
– 🚀 Startups - Production-ready foundation to launch fast
– 👥 Development Teams - Standardized stack with modern tools
– 💻 Freelancers - Professional starting point for client projects
Key Highlights
1. Complete Full-Stack Solution
– Not just backend or frontend - you get the entire working application
– Frontend and backend communicate seamlessly
– Database schema and relationships already configured
– Order management with multi-item support
– Real production-ready architecture
2. Docker-First Deployment
– One command to deploy: ./docker-start.sh
– Multi-stage builds for optimal image sizes
– Nginx reverse proxy for React SPA
– Environment variable management
– Development and production configurations
– Works on any platform (Windows, Mac, Linux)
3. Modern UI/UX
– Professional gradient design (Blue theme)
– Smooth animations and hover effects
– Loading states and error handling
– Form validation with user feedback
– Mobile-responsive layouts
– Card-based product display
– Professional data tables
4. Production-Quality Code
– TypeScript for type safety
– Clean architecture patterns
– Service layer separation
– Error boundary handling
– Input validation
– Security best practices
– Well-commented and documented
5. Real-World Features
Working implementations of:
– Product catalog management
– Customer relationship management
– Multi-item order creation
– Order tracking and details
– CRUD operations throughout
– Relationship management (foreign keys)
6. Comprehensive Documentation
– Quick start guide (5 minutes to running)
– Docker deployment guide
– API documentation with Swagger
– Database schema explanation
– Troubleshooting section
– Production deployment checklist
– Code architecture overview
📦 What's Included
📁 Backend (.NET 9 Web API)
Controllers/
├── ProductsController.cs # Product CRUD endpoints
├── CustomersController.cs # Customer management
└── OrdersController.cs # Order creation & tracking
Models/
├── Product.cs # Product entity
├── Customer.cs # Customer entity
├── Order.cs # Order entity
├── OrderItem.cs # Order line items
└── Request/Response DTOs # API contracts
Services/
└── SupabaseService.cs # Database operations
📁 Frontend (React + TypeScript)
src/
├── components/
│ ├── Products.tsx # Product grid display
│ ├── ProductForm.tsx # Add/Edit products
│ ├── Customers.tsx # Customer table
│ ├── CustomerForm.tsx # Customer management
│ ├── Orders.tsx # Order listing
│ ├── OrderForm.tsx # Create multi-item orders
│ └── OrderDetails.tsx # Order detail view
├── services/
│ ├── productService.ts # Product API client
│ ├── customerService.ts # Customer API client
│ └── orderService.ts # Order API client
├── types/
│ └── index.ts # TypeScript definitions
└── styles/
├── App.css # Global styles
├── Products.css # Product page styles
├── Customers.css # Customer page styles
└── Orders.css # Order page styles (Modern UI)
📁 Docker Configuration
├── Dockerfile # Backend container
├── frontend/Dockerfile # Frontend container
├── docker-compose.yml # Orchestration config
├── docker-start.sh # Start script
├── docker-stop.sh # Stop script
└── nginx.conf # Web server config
📁 Database
├── supabase-setup.sql # Schema creation
├── Sample data # Ready-to-use data
└── RLS policies # Security configuration
📁 Documentation (9+ Files)
├── README.md # Main documentation
├── DOCKER.md # Docker guide
├── DOCKER-README.md # Quick Docker start
├── DOCKER-COMMANDS.md # Command reference
├── DEPLOYMENT-CHECKLIST.md # Production guide
├── PRODUCTION-DEPLOYMENT.md # Deployment report
├── ORDERS-CSS-UPDATE.md # UI documentation
└── More guides...
🛠️ Technology Stack
Backend Technologies
– 🟣 .NET 9.0 - Latest ASP.NET Core framework
– 🗄️ Supabase C# Client - PostgreSQL integration
– 📖 Swagger/OpenAPI - Automatic API documentation
– 🔒 ASP.NET Identi** (Ready to add)
Frontend Technologies
– ⚛️ React 18.3 - Latest React with hooks
– 📘 TypeScript 5.6 - Type-safe development
– ⚡ Vite 5.4 - Lightning-fast build tool
– 🧭 React Router 6.30 - Client-side routing
– 📡 Axios 1.7 - HTTP client
Infrastructure
– 🐳 Docker - Containerization
– 🎼 Docker Compose - Multi-container orchestration
– 🌐 Nginx (Alpine) - Web server for SPA
– 🐧 Linux Containers - Production-ready
Database
– 🐘 PostgreSQL - Via Supabase
– 🔒 Row Level Security - Database-level security
– 🔄 Relationships - Foreign keys and joins
– 📊 Indexes - Optimized queries
🚀 Quick Start Guide
Option 1: Docker (Recommended - Fastest)
1. Clone and navigate to project
cd sampleapi
2. Create .env file with your Supabase credentials
SUPABASE_URL=your-project.supabase.co
SUPABASE_KEY=your-anon-key-here
ASPNETCORE_ENVIRONMENT=Production
3. Run setup SQL in Supabase dashboard
(Copy from supabase-setup.sql)
4. Start everything with one command
That's it! Access your app:
– 🌐 Frontend: localhost:3001
– 📡 Backend API: localhost:5001
– 📚 Swagger: localhost:5001/swagger
Option 2: Local Development
1. Configure appsettings.Development.json
2. Install dependencies
dotnet restore
cd frontend && npm install
3. Run both servers
./start.sh
📚 API Endpoints
Products API
GET /api/products # List all products
GET /api/products/{id} # Get single product
POST /api/products # Create product
PUT /api/products/{id} # Update product
DELETE /api/products/{id} # Delete product
Customers API
GET /api/customers # List all customers
GET /api/customers/{id} # Get single customer
POST /api/customers # Create customer
PUT /api/customers/{id} # Update customer
DELETE /api/customers/{id} # Delete customer
Orders API
GET /api/orders # List all orders
GET /api/orders/{id} # Get order with items
POST /api/orders # Create multi-item order
Health Check
GET /api/health # API health status
💡 Use Cases & Applications
🛒 E-Commerce Platforms
Perfect foundation for:
– Online stores
– Product catalogs
– Shopping cart systems
– Order management
– Customer accounts
– Inventory tracking
💼 SaaS Applications
Ready for:
– User management systems
– Subscription platforms
– Dashboard applications
– Multi-tenant solutions
– Admin panels
– Customer portals
📊 Business Applications
Ideal for:
– CRM systems
– Project management tools
– Inventory management
– Booking systems
– Internal tools
– Data management platforms
🎓 Learning & Teaching
Great for:
– Full-stack development courses
– .NET + React tutorials
– Docker deployment learning
– TypeScript practice
– Database design examples
– API development training
⚡ Why Choose This Template?
Save Weeks of Development Time
Instead of spending weeks setting up:
– ✅ Frontend-backend architecture
– ✅ Database integration & relationships
– ✅ Docker deployment pipeline
– ✅ TypeScript configurations
– ✅ API structure and patterns
– ✅ UI components and styling
– ✅ Form validation logic
You get everything pre-configured and ready to customize!
Production-Ready Foundation
– ✅ Industry best practices
– ✅ Clean, maintainable architecture
– ✅ TypeScript type safety throughout
– ✅ Comprehensive error handling
– ✅ Security considerations built-in
– ✅ Scalable folder structure
– ✅ Professional code quality
Modern & Maintained
– ✅ Built with latest .NET 9 (November 2024)
– ✅ React 18 with modern hooks
– ✅ TypeScript 5.6 for reliability
– ✅ Vite 5.4 for fast builds
– ✅ Docker best practices
– ✅ Up-to-date dependencies
🚀 Start Building Today!
Stop Wasting Time on Boilerplate
Get a production-ready foundation and focus on what makes your application unique.
Download now and launch your next project in hours, not weeks!
What You Get:
– ✅ Complete full-stack application
– ✅ Modern tech stack (.NET 9 + React 18)
– ✅ Docker deployment ready
– ✅ Professional UI design
– ✅ Comprehensive documentation
– ✅ Order management system
– ✅ TypeScript type safety
– ✅ Production-ready code
🎁 Bonus Features Included
✨ Professional UI with Modern Gradient Design
✨ Complete Order Management System
✨ Docker One-Command Deployment
✨ 9+ Documentation Files
✨ Production Deployment Guide
✨ Health Check Endpoints
✨ Sample Data & SQL Scripts
Last Updated: November 7, 2025
Version: 2.0.0
Framework: .NET 9.0 | React 18.3 | TypeScript 5.6
License: Commercial Use Allowed
🚀 Your Next Successful Project Starts Here!