Multi-Tenant Auto Detail Business Platform
A comprehensive development skill for building full-stack, multi-tenant service marketplace applications using Next.js App Router, TypeScript, Clerk authentication, Convex database, and modern tooling.
What This Skill Does
This skill guides you through building a production-ready, scalable SaaS platform with role-based access control, payment processing, AI-powered features, and multi-tenant architecture. Perfect for service-based businesses requiring admin panels, client portals, and provider dashboards.
Technology Stack
**Framework**: Next.js App Router with TypeScript (strict mode, no `any` types)**Authentication**: Clerk with RBAC (admin, detailer/provider, client roles)**Database**: Convex (real-time database, file storage, AI vector search)**Styling**: Tailwind CSS utility-first approach**UI Components**: ShadCN-UI with ShadCN-Graphs for visualizations**AI Integration**: Ollama for deep learning models**Payments**: Stripe integration**Calendar**: Google Calendar API with AI-powered scheduling**Communication**: Google Chat for real-time support**Hosting**: Vercel with sub-domain support**Database Architecture**: MongoDB multi-tenant patternStep-by-Step Instructions
1. Project Setup
Initialize a Next.js project with TypeScript and configure strict type checking:
```bash
npx create-next-app@latest --typescript --tailwind --app
```
Configure `tsconfig.json` with strict mode and ensure no `any` types are used throughout the codebase.
2. Authentication & Authorization
Implement Clerk for authentication with three-tier RBAC:
**Admin Role**: Full access to all features, manage tenants, detailers, clients, and assessments**Detailer/Provider Role**: Read services/pricing/assessments, manage appointments and clients, process payments**Client Role**: Access assessments, schedule appointments, communicate, provide paymentsConfigure Clerk with role-based middleware and protect routes based on user roles.
3. Multi-Tenant Architecture
Design a MongoDB-based multi-tenant database architecture where:
Each tenant (business) has isolated dataImplement tenant-specific QR codes for self-marketingConfigure sub-domains on Vercel for tenant customizationSupport customizable theming per tenant4. Convex Database Setup
Configure Convex for:
Real-time database operationsFile storage for images/videosAI vector search functionalitySubscription to real-time data updates5. UI Development
Use ShadCN-UI components consistently:
Install and configure ShadCN-UI component libraryImplement ShadCN-Graphs for analytics dashboardsApply Tailwind CSS with utility-first approachCreate reusable component patterns6. Core Features Implementation
#### A. Client Self-Assessment System
Build multi-step forms for vehicle information captureSupport image and video uploads for assessmentGenerate estimates based on assessment data and pricing models#### B. AI-Powered Scheduling
Integrate Google Calendar APIImplement AI-powered appointment scheduling logicSend automated reminders for upcoming appointments#### C. Payment Processing
Integrate Stripe for payment processingHandle subscription management (creation, updates, cancellations)Implement transaction tracking and receipts#### D. Communication System
Integrate Google Chat for real-time customer supportBuild notification system for booking and service updatesCreate in-app messaging between clients and providers#### E. Dashboards
**Admin Dashboard**: Tenant management, system analytics, user oversight**Detailer/Provider Dashboard**: Service management, booking calendar, pricing models, payment tracking**Client Dashboard**: Appointment history, assessments, payments, communication**Analytics Dashboard**: Business insights with visual graphs#### F. Rating & Review System
Implement client feedback mechanism for detailersDisplay ratings and reviews on provider profilesCollect continuous improvement feedback7. Security Implementation
Enforce invite-only client entry with invitation systemImplement robust RBAC with Clerk for all protected resourcesApply security best practices for multi-tenant data isolationValidate and sanitize all user inputs8. Scalability & Performance
Design system to handle minimum 10,000 concurrent usersOptimize database queries and implement cachingUse Vercel Edge Functions for performance-critical operationsImplement proper error handling and logging9. Developer Experience
Configure development tooling:
ESLint for code qualityPrettier for code formattingEditorConfig for consistent coding stylesSet up CI/CD pipelines on Vercel10. Additional Features
Create comprehensive knowledge base for user guides and tutorialsImplement dynamic pricing models for service providersBuild feedback mechanism for continuous improvementGenerate tenant-specific QR codes for marketingCode Quality Standards
Use strict TypeScript with no `any` typesFollow Next.js App Router best practicesImplement proper error boundariesWrite reusable, composable componentsDocument complex business logicUse semantic commit messagesTesting & Deployment
Write unit tests for business logicImplement integration tests for critical flowsTest RBAC permissions thoroughlyDeploy to Vercel with environment-specific configurationsMonitor performance and error rates post-deploymentExample Usage
When a user requests: "Build a service marketplace with role-based access and payment processing"
The AI agent will:
1. Set up Next.js with TypeScript and Tailwind
2. Configure Clerk authentication with RBAC
3. Set up Convex database with multi-tenant architecture
4. Implement ShadCN-UI components
5. Integrate Stripe for payments
6. Build role-specific dashboards
7. Deploy to Vercel with sub-domain support
Important Constraints
Never use `any` type in TypeScriptAlways enforce role-based access control on protected routesEnsure multi-tenant data isolation at the database levelValidate all user inputs and API requestsFollow Tailwind utility-first CSS methodologyUse ShadCN-UI components for consistencyDesign for scalability from the start (10k+ concurrent users)