🎨 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 Configuration
DATABASE_URL="postgresql://username:password@host:5432/database?sslmode=require"

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_your_key_here"
CLERK_SECRET_KEY="sk_test_your_key_here"

# Clerk URLs
NEXT_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)

Create a Neon Account at neon.tech
Create a new project and database
Copy the connection string to your .env.local
Run migrations:
```
npx drizzle-kit push
```

Authentication Setup (Clerk)

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

📱 Usage

Creating Your First Design

🏠 Visit the Homepage - Open the application in your browser

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

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

🎯 Use Quick Suggestions - Or click on pre-made suggestions:
- 📊 Dashboard
- 📝 SignUp Form
- 🎭 Hero Section
- 👤 User Profile Card
🚀 Generate - Click the Generate button to create your design
👀 Review - View your generated design in the playground
💼 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 table
CREATE TABLE users (
  id SERIAL PRIMARY 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  
CREATE TABLE projects (
  id SERIAL PRIMARY KEY,
  projectId VARCHAR(255) UNIQUE NOT NULL,
  createdBy VARCHAR REFERENCES users(clerkId),
  createdOn TIMESTAMP DEFAULT NOW()
);

-- Frames table
CREATE TABLE frames (
  id SERIAL PRIMARY KEY,
  frameId VARCHAR(255) UNIQUE NOT NULL,
  projectId VARCHAR REFERENCES projects(projectId),
  frameType VARCHAR(255) NOT NULL,
  createdOn TIMESTAMP DEFAULT NOW()
);

-- Chats table
CREATE TABLE chats (
  id SERIAL PRIMARY KEY,
  chatId VARCHAR(255) UNIQUE NOT NULL,
  chatMessage JSON,
  createdBy VARCHAR REFERENCES 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.ts
export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.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

🍴 Fork the repository
🌿 Create a feature branch
```
git checkout -b feature/amazing-feature
```

💾 Commit your changes

git commit -m 'Add some amazing feature'

📤 Push to the branch
```
git push origin feature/amazing-feature
```
🔄 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:

🔍 Check existing issues first
📝 Create detailed bug report
🏷️ Use appropriate labels
📸 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

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
app		app
components/ui		components/ui
config		config
context		context
drizzle		drizzle
hooks		hooks
lib		lib
public		public
.gitignore		.gitignore
README.md		README.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎨 Buildify - AI Website Generator

📋 Table of Contents

✨ Features

🎯 Core Features

🔐 Authentication & User Management

🎨 Design Features

🛠️ Tech Stack

Frontend

Backend & Database

Authentication & Security

Development Tools

🚀 Quick Start

Prerequisites

1-Click Deploy

⚙️ Installation

1. Clone the Repository

2. Install Dependencies

3. Set Up Environment Variables

4. Configure Database

5. Start Development Server

🔧 Configuration

Environment Variables

Database Setup (Neon)

Authentication Setup (Clerk)

📱 Usage

Creating Your First Design

Managing Projects

🏗️ Project Structure

🔌 API Reference

Projects API

Create Project

Users API

Create/Get User

🎨 UI Components

Built with Radix UI + Tailwind CSS

Theme Support

🗄️ Database Schema

Tables Overview

Relationships

🔐 Authentication

Clerk Integration

Protected Routes

Middleware Protection

🌍 Environment Variables

🤝 Contributing

Getting Started

Development Guidelines

Code Style

📊 Roadmap

🎯 Upcoming Features

🐛 Issues & Support

Reporting Issues

Getting Help

📄 License

🙏 Acknowledgments

Built With Love Using

Special Thanks

⭐ Star this repository if it helped you!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages