🎨 Buildify - AI Website Generator

Generate, Edit, and Explore designs with AI. Export clean, responsive code.

🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature

---

📋 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 🚀 Quick Start
• ⚙️ Installation
• 🔧 Configuration
• 📱 Usage
• 🏗️ Project Structure
• 🔌 API Reference
• 🎨 UI Components
• 🗄️ Database Schema
• 🔐 Authentication
• 🌍 Environment Variables
• 🤝 Contributing
• 📄 License

---

✨ Features

🎯 Core Features

• 🤖 AI-Powered Generation - Generate complete website designs from text descriptions
• 🎨 Real-time Preview - See your designs come to life instantly
• 📱 Responsive Design - Mobile-first, responsive layouts out of the box
• 🔧 Code Export - Export clean, production-ready HTML/CSS/React code
• 🎭 Multiple Templates - Dashboard, forms, hero sections, and user profiles

🔐 Authentication & User Management

• 🔒 Secure Authentication - Powered by Clerk with social logins
• 👤 User Profiles - Personalized workspaces and project management
• 💳 Credit System - Built-in credit system for AI generations
• 📊 Project Tracking - Save and manage multiple projects

🎨 Design Features

• 🖼️ Frame Management - Organize designs in frames
• 💬 Chat History - Keep track of all your design conversations
• 🎨 Design Suggestions - Pre-built prompts for common design patterns
• ⚡ Quick Actions - Fast access to frequently used features

---

🛠️ Tech Stack

Frontend

• ⚛️ React 19 - Latest React with concurrent features
• ⬛ Next.js 15 - Full-stack React framework with App Router
• 🎨 Tailwind CSS 4 - Utility-first CSS framework
• 🧩 Radix UI - Headless, accessible UI components
• 🌙 Next Themes - Dark/light mode support
• 📊 Recharts - Beautiful charts and data visualization

Backend & Database

• 🐘 PostgreSQL - Robust relational database
• 🟢 Neon - Serverless PostgreSQL platform
• 🗃️ Drizzle ORM - Type-safe database ORM
• 🔄 Drizzle Kit - Database migrations and introspection

Authentication & Security

• 🔐 Clerk - Complete authentication solution
• 🔑 JWT - Secure token-based authentication
• 🛡️ Middleware - Route protection and security

Development Tools

• 📘 TypeScript - Type-safe JavaScript
• 🔍 ESLint - Code linting and formatting
• 🎯 Axios - HTTP client for API requests
• 🎉 Sonner - Beautiful toast notifications
• 🆔 UUID - Unique identifier generation

---

🚀 Quick Start

Prerequisites

• Node.js 18.17 or later
• npm or yarn or pnpm
• PostgreSQL database (Neon recommended)
• Clerk account for authentication

1-Click Deploy

---

⚙️ Installation

1. Clone the Repository

git clone https://github.com/deekshith-b48/Buildify.git
cd Buildify

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Set Up Environment Variables

cp .env.example .env.local

4. Configure Database

# Push database schema
npx drizzle-kit push

5. Start Development Server

npm run dev

Visit http://localhost:3000 to see your application!

---

🔧 Configuration

Environment Variables

Create a .env.local file in the root directory:

# Database ConfigurationDATABASE_URL="postgresql://username:password@host:5432/database?sslmode=require"# Clerk AuthenticationNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_your_key_here"CLERK_SECRET_KEY="sk_test_your_key_here"# Clerk URLsNEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/workspace"NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/workspace"

Database Setup (Neon)

1. Create a Neon Account at neon.tech
2. Create a new project and database
3. Copy the connection string to your .env.local
4. Run migrations:

   npx drizzle-kit push

Authentication Setup (Clerk)

1. Create a Clerk Account at clerk.com
2. Create a new application
3. Copy your keys from the API Keys section
4. Add keys to your .env.local file

---

📱 Usage

Creating Your First Design

1. 🏠 Visit the Homepage - Open the application in your browser

2. ✍️ Describe Your Design - Enter a description in the text area

   Example: "Create a modern dashboard with charts and user metrics"
   

3. 🎯 Use Quick Suggestions - Or click on pre-made suggestions:

   • 📊 Dashboard
   • 📝 SignUp Form
   • 🎭 Hero Section
   • 👤 User Profile Card

4. 🚀 Generate - Click the Generate button to create your design

5. 👀 Review - View your generated design in the playground

6. 💼 Save - Your project is automatically saved to your workspace

Managing Projects

• 📋 Workspace View - Access all your projects from /workspace
• 💳 Credits System - Monitor your remaining generation credits
• 🗂️ Project Organization - Projects are organized by creation date
• 🔄 Continue Editing - Resume work on any saved project

---

🏗️ Project Structure

ai-website-generator/
├── 📁 app/ # Next.js App Router
│ ├── 📁 _components/ # Shared components
│ │ ├── Header.jsx # Navigation header
│ │ └── Hero.tsx # Main hero section
│ ├── 📁 api/ # API routes
│ │ ├── 📁 projects/ # Project management
│ │ └── 📁 users/ # User management
│ ├── 📁 workspace/ # Workspace pages
│ │ ├── 📁 _components/ # Workspace components
│ │ │ ├── AppSidebar.tsx # Main sidebar
│ │ │ └── AppHeader.tsx # Workspace header
│ │ ├── layout.tsx # Workspace layout
│ │ └── page.tsx # Workspace page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── 📁 components/ # Reusable UI components
│ └── 📁 ui/ # Shadcn/ui components
├── 📁 config/ # Configuration files
│ └── schema.ts # Database schema
├── 📁 context/ # React contexts
│ └── UserDetailContext.tsx # User state management
├── 📁 hooks/ # Custom React hooks
├── 📁 lib/ # Utility libraries
│ ├── drizzle.ts # Database connection
│ └── utils.ts # Helper functions
├── 📁 public/ # Static assets
└── 📄 Configuration files
├── tailwind.config.js # Tailwind configuration
├── drizzle.config.ts # Drizzle ORM config
├── next.config.ts # Next.js configuration
└── tsconfig.json # TypeScript config

---

🔌 API Reference

Projects API

Create Project

POST /api/projects

Request Body:

{
"projectId": "uuid-string",
"frameId": "unique-frame-id", "messages": [
{
"role": "user",
"content": "Create a modern dashboard"
}
]
}

Response:

{
"success": true,
"project": { /* project data */ },
"frame": { /* frame data */ },
"chats": [ /* chat history */ ]
}

Users API

Create/Get User

POST /api/users

Response:

{
"success": true,
"user": {
"id": 1,
"clerkId": "user_xxx",
"name": "John Doe",
"email": "john@example.com",
"credits": 100
},
"created": true
}

---

🎨 UI Components

Built with Radix UI + Tailwind CSS

• 🔲 Button - Various button styles and states
• 📝 Input - Form inputs with validation
• 📊 Progress - Progress bars and indicators
• 🎭 Avatar - User profile pictures
• 📋 Card - Content containers
• 🎨 Badge - Status and category badges
• 📱 Sidebar - Collapsible navigation
• 💬 Toast - Notification system
• 🎯 Tooltip - Helpful hover information
• 📊 Charts - Data visualization components

Theme Support

• 🌙 Dark Mode - Complete dark theme
• ☀️ Light Mode - Clean light theme
• 🎨 Custom Themes - Easily customizable

---

🗄️ Database Schema

Tables Overview

-- Users tableCREATETABLEusers (
id SERIALPRIMARY KEY,
clerkId VARCHAR(255) UNIQUE NOT NULL,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
credits INTEGER DEFAULT 100,
createdAt TIMESTAMP DEFAULT NOW()
);
-- Projects table CREATETABLEprojects (
id SERIALPRIMARY KEY,
projectId VARCHAR(255) UNIQUE NOT NULL,
createdBy VARCHARREFERENCES users(clerkId),
createdOn TIMESTAMP DEFAULT NOW()
);
-- Frames tableCREATETABLEframes (
id SERIALPRIMARY KEY,
frameId VARCHAR(255) UNIQUE NOT NULL,
projectId VARCHARREFERENCES projects(projectId),
frameType VARCHAR(255) NOT NULL,
createdOn TIMESTAMP DEFAULT NOW()
);
-- Chats tableCREATETABLEchats (
id SERIALPRIMARY KEY,
chatId VARCHAR(255) UNIQUE NOT NULL,
chatMessage JSON,
createdBy VARCHARREFERENCES users(clerkId),
createdOn TIMESTAMP DEFAULT NOW()
);

Relationships

• Users → Projects (One-to-Many)
• Projects → Frames (One-to-Many)
• Users → Chats (One-to-Many)

---

🔐 Authentication

Clerk Integration

This application uses Clerk for authentication with the following features:

• 🔑 Multiple Sign-in Options - Email, Google, GitHub, etc.
• 👤 User Management - Complete user profile management
• 🛡️ Route Protection - Automatic route protection
• 📱 Responsive Auth UI - Mobile-friendly auth components
• 🔄 Session Management - Automatic session handling

Protected Routes

• /workspace - Requires authentication
• /api/projects - Requires authentication
• /api/users - Requires authentication

Middleware Protection

// middleware.tsexportdefaultclerkMiddleware(async(auth,req)=>{if(isProtectedRoute(req)){awaitauth.protect()}})

---

🌍 Environment Variables

Variable	Description	Required	Example
DATABASE_URL	PostgreSQL connection string	✅	postgresql://user:pass@host/db
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key	✅	pk_test_xxx
CLERK_SECRET_KEY	Clerk secret key	✅	sk_test_xxx
NEXT_PUBLIC_CLERK_SIGN_IN_URL	Sign in page URL	✅	/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL	Sign up page URL	✅	/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL	Redirect after sign in	✅	/workspace
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL	Redirect after sign up	✅	/workspace

---

🤝 Contributing

We love contributions! Here's how you can help:

Getting Started

1. 🍴 Fork the repository
2. 🌿 Create a feature branch

   git checkout -b feature/amazing-feature

3. 💾 Commit your changes

   git commit -m 'Add some amazing feature'

4. 📤 Push to the branch

   git push origin feature/amazing-feature

5. 🔄 Open a Pull Request

Development Guidelines

• ✅ Follow TypeScript best practices
• 🎨 Use Tailwind CSS for styling
• 🧪 Add tests for new features
• 📝 Update documentation
• 🔍 Ensure code passes ESLint

Code Style

# Run linting
npm run lint
# Format code 
npm run format
# Type checking
npm run type-check

---

📊 Roadmap

🎯 Upcoming Features

• 🤖 Advanced AI Models - Integration with GPT-4 and Claude
• 🎨 Design Templates - Pre-built industry templates
• 🔄 Version Control - Git-like versioning for designs
• 👥 Team Collaboration - Multi-user project collaboration
• 📱 Mobile App - Native mobile application
• 🎯 A/B Testing - Built-in A/B testing tools
• 📊 Analytics - Design performance analytics
• 🌐 Multi-language - Internationalization support

---

🐛 Issues & Support

Reporting Issues

Found a bug? Please report it:

1. 🔍 Check existing issues first
2. 📝 Create detailed bug report
3. 🏷️ Use appropriate labels
4. 📸 Include screenshots if applicable

Getting Help

• 📖 Documentation - Check this README first
• 💬 Discussions - Join community discussions
• 📧 Email - Contact support team

---

📄 License

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

---

🙏 Acknowledgments

Built With Love Using

• ⚛️ React Team - For the amazing React framework
• ⬛ Vercel - For Next.js and hosting platform
• 🎨 Tailwind Labs - For the beautiful Tailwind CSS
• 🔐 Clerk - For seamless authentication
• 🐘 Neon - For serverless PostgreSQL
• 🗃️ Drizzle Team - For type-safe ORM

Special Thanks

• 🌟 Contributors - All the amazing contributors
• 🐛 Bug Reporters - Helping improve the application
• 💡 Feature Requesters - Driving innovation
• 📝 Documentation Writers - Making it accessible

---

⭐ Star this repository if it helped you!

Made with ❤️ by Deekshith B

🌟 Star • 🍴 Fork • 📝 Issues • 🔄 Pull Requests