⚡ Zen - AI-Powered Website Builder

⚡ Transform ideas into stunning websites in seconds with AI

Features • Tech Stack • Getting Started • Deployment • API Documentation

---

📖 About

Zen is a cutting-edge AI-powered website builder that transforms simple text descriptions into beautiful, fully functional websites in seconds. Built with modern technologies and best practices, Zen combines the power of artificial intelligence with an intuitive visual editor to make professional web development accessible to everyone - no coding knowledge required.

✨ Key Highlights

• 🤖 AI-Powered Generation: Uses OpenAI to convert natural language into production-ready HTML/CSS/JS
• ⚡ Real-time Preview: Instant visual feedback with live code preview
• 🎨 Visual Editor: Drag-and-drop interface with element-level customization
• 📜 Version Control: Track changes with full version history and rollback capability
• 💳 Integrated Payments: Seamless Stripe integration for credit purchases
• 🔐 Secure Authentication: Powered by Better Auth with email/password support
• 🌐 One-Click Publishing: Share your creations with public URLs
• 📱 Fully Responsive: Works seamlessly across all devices

---

🎯 Features

Core Functionality

🎨 AI Website Generation

• Natural Language Processing: Describe your website in plain English
• Intelligent Prompt Enhancement: AI optimizes your prompts for better results
• Tailwind CSS Integration: Modern, responsive designs using utility-first CSS
• Interactive Elements: Automatically includes JavaScript functionality

✏️ Advanced Editing

• Visual Element Editor: Modify text, colors, spacing, and styles
• Direct Code Editing: For advanced users who prefer code
• Real-time Updates: See changes instantly in the preview pane
• Undo/Redo Support: Non-destructive editing workflow

📊 Project Management

• Unlimited Projects: Create and manage multiple websites
• Project Dashboard: Overview of all your creations
• Search & Filter: Quickly find specific projects
• Bulk Operations: Delete or export multiple projects

🔄 Version Control

• Automatic Versioning: Every AI revision creates a new version
• Version History: Browse all previous iterations
• One-Click Rollback: Restore any previous version
• Version Comparison: (Coming soon)

💰 Credit System

• Free Credits: 20 credits on signup
• Project Creation: 5 credits per new website
• Revisions: 5 credits per AI modification
• Flexible Pricing: Multiple credit packages available
• Secure Payments: PCI-compliant Stripe integration

🌐 Publishing & Sharing

• Public URLs: Share your websites with anyone
• Custom Domains: (Coming soon)
• Download HTML: Export complete website code
• Embed Options: (Coming soon)

---

🛠 Tech Stack

Frontend

Technology	Purpose	Version
React	UI Framework	19.2.0
TypeScript	Type Safety	5.9.3
Vite	Build Tool	7.2.4
React Router	Navigation	7.12.0
Axios	HTTP Client	1.13.2
Tailwind CSS	Styling	4.1.18
Better Auth UI	Authentication Components	3.3.15
Sonner	Toast Notifications	2.0.7
Lucide React	Icons	0.562.0

Backend

Technology	Purpose	Version
Node.js	Runtime	ES2020
Express	Web Framework	5.2.1
TypeScript	Type Safety	5.9.3
Prisma	ORM	7.2.0
PostgreSQL	Database	(via Neon)
Better Auth	Authentication	1.4.16
OpenAI SDK	AI Integration	6.16.0
Stripe	Payment Processing	20.2.0

Infrastructure

• Database: Neon PostgreSQL (Serverless)
• Hosting: Vercel (Frontend & Backend)
• Authentication: Better Auth (Session-based)
• Payments: Stripe (Webhook integration)
• AI: OpenRouter (Mistral Devstral)

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: v18.0.0 or higher
• npm: v9.0.0 or higher (or yarn/pnpm)
• Git: Latest version
• PostgreSQL: Or a Neon account (recommended)

Required API Keys

You'll need accounts and API keys for:

1. Neon (Database): console.neon.tech
2. OpenRouter (AI): openrouter.ai
3. Stripe (Payments): dashboard.stripe.com

Installation

1. Clone the Repository

git clone https://github.com/notramm/Zen---AI-website-builder.git
cd zen---ai-website-builder

2. Install Backend Dependencies

cd backend
npm install

3. Install Frontend Dependencies

cd frontend
npm install

4. Configure Environment Variables

Backend (.env)

Create backend/.env:

# Database
DATABASE_URL="postgresql://user:password@host:port/database?sslmode=require"

# Authentication
BETTER_AUTH_SECRET="your-random-secret-key-min-32-chars"
BETTER_AUTH_URL="http://localhost:3000"

# CORS
TRUSTED_ORIGINS="http://localhost:5173"

# Environment
NODE_ENV="development"

# AI
AI_API_KEY="your-openrouter-api-key"

# Payments
STRIPE_SECRET_KEY="sk_test_your_stripe_secret_key"
STRIPE_WEBHOOK_SECRET="whsec_your_webhook_secret"

Generate Secrets:

# Generate BETTER_AUTH_SECRET
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Frontend (.env)

Create frontend/.env:

VITE_BASEURL="http://localhost:3000"

5. Setup Database

cd backend

# Generate Prisma Client
npx prisma generate

# Run migrations
npx prisma migrate dev

# (Optional) Seed database
npx prisma db seed

6. Start Development Servers

Backend (Terminal 1):

cd backend
npm run dev
# Server runs on http://localhost:3000

Frontend (Terminal 2):

cd frontend
npm run dev
# App runs on http://localhost:5173

7. Open Application

Visit http://localhost:5173 in your browser.

---

📚 Project Structure

zen-ai-website-builder/
├── backend/
│   ├── configs/              # Configuration files
│   │   └── openai.ts        # OpenAI client setup
│   ├── controllers/         # Request handlers
│   │   ├── ProjectController.ts
│   │   ├── userController.ts
│   │   └── stripeWebhook.ts
│   ├── generated/           # Prisma generated client
│   ├── lib/                 # Utility libraries
│   │   ├── auth.ts         # Better Auth configuration
│   │   └── prisma.ts       # Prisma client instance
│   ├── middlewares/         # Express middlewares
│   │   └── auth.ts         # Authentication middleware
│   ├── prisma/              # Database schema & migrations
│   │   ├── schema.prisma   # Database models
│   │   └── migrations/     # Migration history
│   ├── routes/              # API routes
│   │   ├── userRoutes.ts
│   │   └── projectRoutes.ts
│   ├── types/               # TypeScript type definitions
│   │   └── express.d.ts
│   ├── server.ts            # Express app entry point
│   ├── package.json
│   ├── tsconfig.json
│   └── vercel.json          # Vercel deployment config
│
├── frontend/
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── assets/         # Images, fonts, etc.
│   │   ├── components/     # React components
│   │   │   ├── Navbar.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   ├── EditorPanel.tsx
│   │   │   ├── ProjectPreview.tsx
│   │   │   └── ...
│   │   ├── configs/        # Configuration
│   │   │   └── axios.ts   # HTTP client setup
│   │   ├── lib/           # Utilities
│   │   │   ├── auth-client.ts
│   │   │   └── utils.ts
│   │   ├── pages/         # Route pages
│   │   │   ├── Home.tsx
│   │   │   ├── Projects.tsx
│   │   │   ├── MyProjects.tsx
│   │   │   ├── Pricing.tsx
│   │   │   └── ...
│   │   ├── types/         # TypeScript types
│   │   │   └── index.ts
│   │   ├── App.tsx        # Main app component
│   │   ├── main.tsx       # Entry point
│   │   └── index.css      # Global styles
│   ├── package.json
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── vercel.json
│
├── .gitignore
└── README.md

---

🔌 API Documentation

Authentication Endpoints

Better Auth

All authentication is handled through Better Auth:

POST   /api/auth/sign-up          # Create account
POST   /api/auth/sign-in          # Login
POST   /api/auth/sign-out         # Logout
GET    /api/auth/session          # Get current session

User Endpoints

All user endpoints require authentication.

Get User Credits

GET /api/user/credits

Response:

{
  "credits": 15
}

Create New Project

POST /api/user/project
Content-Type: application/json

{
  "initial_prompt": "Create a modern landing page for a SaaS product"
}

Response:

{
  "projectId": "uuid-here"
}

Get Single Project

GET /api/user/project/:projectId

Response:

{
  "project": {
    "id": "uuid",
    "name": "Project Name",
    "current_code": "<html>...</html>",
    "conversation": [...],
    "versions": [...],
    "isPublished": false
  }
}

Get All Projects

GET /api/user/projects

Toggle Publish Status

GET /api/user/publish-toggle/:projectId

Purchase Credits

POST /api/user/purchase-credits
Content-Type: application/json

{
  "planId": "basic" | "pro" | "enterprice"
}

Response:

{
  "url": "https://checkout.stripe.com/..."
}

Project Endpoints

All project endpoints require authentication.

Make Revision

POST /api/project/revision/:projectId
Content-Type: application/json

{
  "message": "Make the header blue and add a contact form"
}

Save Project Code

PUT /api/project/save/:projectId
Content-Type: application/json

{
  "code": "<html>...</html>"
}

Rollback to Version

GET /api/project/rollback/:projectId/:versionId

Delete Project

DELETE /api/project/:projectId

Get Project Preview

GET /api/project/preview/:projectId

Get Published Projects (Public)

GET /api/project/published

Get Published Project by ID (Public)

GET /api/project/published/:projectId

Webhook Endpoint

Stripe Webhook

POST /api/stripe
Content-Type: application/json
Stripe-Signature: <signature>

---

🗄 Database Schema

Models

model User {
  id            String
  email         String
  name          String
  totalCreation Int    @default(0)
  credits       Int    @default(20)
  emailVerified Boolean @default(false)
  
  projects      WebsiteProject[]
  sessions      Session[]
  accounts      Account[]
  transactions  Transaction[]
}

model WebsiteProject {
  id                    String
  name                  String
  initial_prompt        String
  current_code          String?
  current_version_index String  @default("")
  userId                String
  isPublished           Boolean @default(false)
  
  conversation Conversation[]
  versions     Version[]
  user         User
}

model Conversation {
  id        String
  role      Role     (user | assistant)
  content   String
  timestamp DateTime @default(now())
  projectId String
  
  project WebsiteProject
}

model Version {
  id          String
  code        String
  description String?
  timestamp   DateTime @default(now())
  projectId   String
  
  project WebsiteProject
}

model Transaction {
  id        String
  isPaid    Boolean  @default(false)
  planId    String
  amount    Float
  credits   Int
  userId    String
  
  user User
}

---

🚢 Deployment

Deploy to Vercel

Prerequisites

• GitHub account with your code pushed
• Vercel account
• Production database (Neon recommended)

Step 1: Deploy Backend

1. Go to vercel.com/new

2. Import your GitHub repository

3. Configure:

   • Framework: Other
   • Root Directory: backend
   • Build Command: (leave empty)
   • Output Directory: (leave empty)

4. Add Environment Variables:

   DATABASE_URL=<your-neon-production-url>
   BETTER_AUTH_SECRET=<generate-new-secret>
   BETTER_AUTH_URL=https://your-backend.vercel.app
   TRUSTED_ORIGINS=https://your-frontend.vercel.app
   NODE_ENV=production
   AI_API_KEY=<your-openrouter-key>
   STRIPE_SECRET_KEY=<your-stripe-key>
   STRIPE_WEBHOOK_SECRET=<your-webhook-secret>
   

5. Click Deploy

Step 2: Deploy Frontend

1. Add new project in Vercel

2. Import same repository

3. Configure:

   • Framework: Vite
   • Root Directory: frontend
   • Build Command: npm run build
   • Output Directory: dist

4. Add Environment Variable:

   VITE_BASEURL=https://your-backend.vercel.app
   

5. Click Deploy

Step 3: Update Environment Variables

After both deployments:

1. Go to backend project settings
2. Update TRUSTED_ORIGINS with actual frontend URL
3. Update BETTER_AUTH_URL with actual backend URL
4. Redeploy backend

Step 4: Configure Stripe Webhook

1. Go to Stripe Dashboard → Webhooks
2. Add endpoint: https://your-backend.vercel.app/api/stripe
3. Select events: payment_intent.succeeded
4. Copy signing secret
5. Update STRIPE_WEBHOOK_SECRET in Vercel
6. Redeploy backend

Database Migrations

Run migrations on production database:

# Set production database URL
DATABASE_URL="your-production-url" npx prisma migrate deploy

---

🧪 Testing

Run Tests

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

Manual Testing Checklist

• Sign up / Sign in
• Create new project
• AI generates website
• Make revision
• Save changes
• Rollback to version
• Publish/unpublish
• Download code
• Purchase credits
• Credits added after payment

---

🔒 Security

Best Practices Implemented

• ✅ Authentication: Session-based with httpOnly cookies
• ✅ Authorization: All protected endpoints verify user identity
• ✅ CORS: Restricted to trusted origins
• ✅ Environment Variables: Secrets never committed to Git
• ✅ SQL Injection: Protected by Prisma ORM
• ✅ XSS Protection: React automatic escaping
• ✅ Webhook Verification: Stripe signature validation
• ✅ HTTPS: Required in production
• ✅ Rate Limiting: (Recommended for production)

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write meaningful commit messages
• Update documentation for new features
• Ensure all tests pass before submitting PR

---

📄 License

This project is licensed under the ISC License.

---

👨‍💻 Author

Ram Muduli

• GitHub: @notramm
• Repository: Zen AI Website Builder

---

🙏 Acknowledgments

• Better Auth - Authentication solution
• Prisma - Next-generation ORM
• Vercel - Deployment platform
• Neon - Serverless PostgreSQL
• OpenRouter - AI API gateway
• Stripe - Payment processing
• Tailwind CSS - Utility-first CSS

---

Support

If you have any questions or need help, please:

1. Check the documentation
2. Search existing issues
3. Open a new issue if needed

---

🗺 Roadmap

Upcoming Features

• Custom Domains: Connect your own domain
• Templates Library: Pre-built website templates
• Component Library: Reusable UI components
• Team Collaboration: Share projects with team members
• Version Comparison: Visual diff between versions
• Export Options: PDF, PNG screenshots
• AI Models: Support for multiple AI models
• Code Editor: In-browser IDE with syntax highlighting
• SEO Tools: Meta tags, sitemap generation
• Analytics: Track website performance

---

⚡ Zen - Built with ❤️ using React, Node.js, PostgreSQL, and AI

Transforming ideas into reality, one prompt at a time.

⬆ Back to Top