Website Generator

A Next.js app for building and exporting webpages with an interactive playground for real-time edit, protected authentication, and AI-assisted content tools.

---

Preview

Key features ✅

• Interactive Playground for designing pages and editing element settings
• Prebuilt UI components (Tailwind + Shadcn) and a responsive layout system
• Clerk authentication and serverless DB with Drizzle + Neon
• AI model integration for content generation (requires Gemini API key)
• Image uploads and handling via ImageKit

---

Quick start 🔧

Prerequisites:

• Node 18+ and npm/yarn/pnpm
• Create a .env file with the required environment variables (see below)

Install and run locally:

npm install
npm run dev        # local dev server (http://localhost:3000)
npm run build      # production build
npm start          # start production server

---

Environment variables ⚠️

Create a .env (or .env.local) with the following (examples):

• DATABASE_URL — your Neon/Postgres connection string
• OPENROUTER_API_KEY — AI provider key
• NEXT_PUBLIC_APP_URL — e.g. http://localhost:3000
• NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY
• NEXT_PUBLIC_IMAGEKIT_PRIVATE_KEY
• NEXT_PUBLIC_IMAGEKIT_URL
• Clerk-related keys (see Clerk docs)

Files referencing env variables include drizzle.config.ts, app/api/ai-model/route.ts, and app/playground/_components/ImageSettings.tsx.

Note: .env* is in .gitignore by default.

---

Project structure 🔎

• app/ — Next.js App Router pages and routes (playground, auth, api)
• components/ — UI primitives (Tailwind + Radix)
• app/playground/ — editor and design tools for page generation
• app/api/ — serverless API routes (AI, chats, projects, users, frames)
• config/, lib/, hooks/ — infra and utilities

---

Tech stack & tooling 💡

• Next.js (App Router), TypeScript, Tailwind CSS
• Drizzle ORM + Neon for DB
• Clerk for auth, ImageKit for images, OpenRouter for AI

---

Scripts (from package.json) 🔧

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

---

Contributing 🤝

1. Fork the repo
2. Create a feature branch
3. Open a PR with a clear description and screenshots

---

contact

• Email: dayotoru@gmail.com
• Portfolio: https://torutgabriel.site

---