Reverse-engineered Lovable AI app builder turned into a developer-friendly React boilerplate with comprehensive AI coding assistant instructions.
This boilerplate reverse-engineers the magic behind Lovable's no-code AI app builder into a traditional React codebase that developers can understand, modify, and extend. It bridges the gap between no-code AI generation and developer control.
💡 Built something with Lovable or using this boilerplate?
Upgrade to a fullstack Next.js app in minutes with NextLovable.com
Get production-ready performance, better SEO, and full control.
| Technology | Purpose | Version |
|---|---|---|
| React | UI Library | 19.2.0 |
| TypeScript | Type Safety | 5.9.3 |
| Vite | Build Tool | 7.1.12 |
| shadcn/ui | Component Library | Latest |
| Tailwind CSS | Styling | 3.4.18 |
| React Router | Navigation | 7.9.5 |
| TanStack Query | Data Fetching | 5.90.6 |
| React Hook Form | Form Handling | 7.66.0 |
| Zod | Schema Validation | 4.1.12 |
| Supabase | Backend & Database | 2.80.0 |
- ⚡ Lightning Fast Development with Vite and React 19
- 🎨 40+ Pre-built Components from shadcn/ui
- 🎯 Type-Safe with TypeScript 5.9
- 🗄️ Backend Ready with Supabase integration
- 📱 Responsive Design with Tailwind CSS
- 🔄 Smart Data Fetching with TanStack Query
- 📋 Form Validation with React Hook Form + Zod
- 🤖 AI-Optimized with comprehensive coding instructions
- Node.js 18+ or Bun
- Git
# Clone the repository
git clone https://github.com/chihebnabil/lovable-boilerplate.git
cd lovable-boilerplate
# Install dependencies (npm, yarn, or bun)
npm install
# or
bun install
# Set up environment variables
cp .env.example .env
# Edit .env with your Supabase credentials
# Start development server
npm run dev
# or
bun devYour app will be running at http://localhost:8080
This boilerplate comes with Supabase pre-configured for backend functionality including authentication, database, and real-time features.
-
Create a Supabase Project
- Visit supabase.com and create a new project
- Wait for your database to be provisioned
-
Configure Environment Variables
cp .env.example .env
Add your Supabase credentials to
.env:VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key
// Import the Supabase client
import { supabase } from "@/integrations/supabase/client";
import type { Tables } from "@/integrations/supabase/types";
// Example: Fetch data
const { data, error } = await supabase
.from('posts')
.select('*')
.eq('published', true);
// Example: Insert data
const { data, error } = await supabase
.from('posts')
.insert({
title: 'My Post',
slug: 'my-post',
content: 'Post content',
user_id: userId
});
// Example: Real-time subscription
supabase
.channel('posts')
.on('postgres_changes',
{ event: '*', schema: 'public', table: 'posts' },
(payload) => {
console.log('Change received!', payload);
}
)
.subscribe();All database types are automatically generated in src/integrations/supabase/types.ts:
import type { Tables, TablesInsert, TablesUpdate } from "@/integrations/supabase/types";
// Use generated types
type Post = Tables<'posts'>;
type NewPost = TablesInsert<'posts'>;
type UpdatePost = TablesUpdate<'posts'>;// Sign up
const { data, error } = await supabase.auth.signUp({
email: 'user@example.com',
password: 'password'
});
// Sign in
const { data, error } = await supabase.auth.signInWithPassword({
email: 'user@example.com',
password: 'password'
});
// Get current user
const { data: { user } } = await supabase.auth.getUser();
// Sign out
await supabase.auth.signOut();- Environment Variables: Never commit
.envfiles. Use.env.exampleas a template - Row Level Security: Enable RLS on your Supabase tables for security
- Type Generation: Regenerate types when your database schema changes
- Error Handling: Always handle errors from Supabase operations
- Real-time: Use Supabase real-time for live updates without polling
The boilerplate includes Supabase CLI configuration for local development:
# Initialize Supabase (already done)
npx supabase init
# Start Supabase locally (requires Docker)
npx supabase start
# Stop local Supabase
npx supabase stop
# Generate TypeScript types from your database
npx supabase gen types typescript --local > src/integrations/supabase/types.ts
# Create a new migration
npx supabase migration new migration_name
# Push migrations to remote database
npx supabase db pushThe supabase/ folder contains:
- config.toml: Supabase CLI configuration
- migrations/: Database migration files (version-controlled SQL)
- .gitignore: Excludes temporary files from version control
This boilerplate is optimized for AI coding assistants like GitHub Copilot and Cursor. All comprehensive instructions are located in:
.github/instructions/global.instructions.md
These instructions include:
- Modern Design Guidelines - Create premium, contemporary interfaces
- Architecture Patterns - Project structure and best practices
- Component Usage - How to use shadcn/ui components effectively
- Development Workflow - Adding features, pages, and functionality
- Styling System - Color palettes, spacing, typography, and animations
- Responsive Design - Mobile-first development principles
Simply reference the instructions file when working on this project. The AI will understand the project structure, styling guidelines, and development patterns automatically.
lovable-boilerplate/
├── .github/
│ └── instructions/ # AI coding assistant instructions
│ └── global.instructions.md
├── src/
│ ├── components/
│ │ └── ui/ # shadcn/ui components (40+ pre-built)
│ ├── hooks/ # Custom React hooks
│ ├── integrations/
│ │ └── supabase/ # Supabase client configuration
│ │ ├── client.ts # Supabase client instance
│ │ └── types.ts # Auto-generated database types
│ ├── lib/ # Utility functions
│ ├── pages/ # Route components
│ │ ├── Index.tsx # Home page (/)
│ │ └── NotFound.tsx # 404 page
│ ├── App.tsx # Main app with routing
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── supabase/ # Supabase local development
│ ├── config.toml # Supabase CLI configuration
│ └── migrations/ # Database migrations (auto-generated)
├── public/ # Static assets
├── .env.example # Environment variables template
├── package.json # Dependencies
├── vite.config.ts # Vite configuration
├── tailwind.config.ts # Tailwind configuration
├── components.json # shadcn/ui configuration
└── tsconfig.json # TypeScript configuration
All components are pre-configured with shadcn/ui and located in src/components/ui/:
Layout & Navigation
accordion,card,separator,sheet,sidebar,tabsbreadcrumb,command,dropdown-menu,menubar,navigation-menu,pagination
Forms & Inputs
button,input,textarea,select,checkbox,radio-group,switch,formcalendar,input-otp,slider,toggle
Feedback & Overlays
alert,alert-dialog,toast,sonner,progress,skeletondialog,drawer,hover-card,popover,tooltip
Data Display
avatar,badge,table,chart,carouselaspect-ratio,collapsible,resizable,scroll-area
- Generous Spacing:
py-16 lg:py-24for sections - Consistent Rhythm:
space-y-4 lg:space-y-6for content - Responsive First: Mobile-first responsive design
- Typography Scale: Hierarchical text sizing
# Development
npm run dev # Start dev server (port 8080)
npm run build # Production build
npm run build:dev # Development build
npm run preview # Preview production build
npm run lint # Run ESLint
# Using Bun (faster alternative)
bun dev # Start dev server
bun run build # Production build- Reverse-Engineered: Based on patterns from Lovable's AI app builder
- AI-Optimized: Designed specifically for AI coding assistants
- Design-First: Premium visual design out of the box
- Performance: Lightning-fast development and build times
- Flexible: Easy to customize and extend
- Modern: Latest React patterns and best practices
We welcome contributions! This project aims to provide the best possible starting point for AI-assisted React development.
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
MIT License - feel free to use this for any project!
- Lovable.dev - Inspiration for the AI-first development approach
- shadcn/ui - Excellent component library and design system
- Vercel - Amazing tooling ecosystem (React, Vite, etc.)
- Tailwind Labs - Revolutionary CSS framework
Happy coding!