💖 Lovable Clone

Lovable Clone is your AI-powered sidekick 🤖✨ — built for speed 🚀, style 🎨, and total creativity 💡. Whether you’re shipping your next big project, experimenting with wild ideas, or just vibing with some clean code, this stack’s got you. Powered by Next.js 15 + React 19 with a fresh AI-first toolchain, it’s here to make dev life way smoother and more fun 😎. From auto-generating components to real-time previews and cloud sandboxes, Lovable Clone keeps you in the flow, no matter how chaotic your brain dump is.

---

🚀 Tech Stack

• Framework: Next.js 15 + React 19
• Styling: Tailwind v4 🎨 + Shadcn/ui
• Type-Safe API: tRPC 📡
• Background Jobs: Inngest 🔁
• AI Agent Toolkit: Inngest agent utilities 🤖
• Auth & Billing: Clerk 🔐💳
• Database: Prisma ORM + Neon 🗄️
• AI Models: OpenAI, Anthropic, Grok, Gemini 🧠
• Execution: E2B Cloud Sandboxes 🖥️ + Docker 🐳

---

✨ Key Features

• 🧱 AI-Powered Component & App Generation – Build from prompts
• 🗂️ Live Project Preview – Share URLs instantly
• 🧪 Preview + Code Explorer – Toggle effortlessly
• 🔁 Automated Background Jobs – Async magic
• 🧠 Agent Toolkit – Workflow automation
• 🔐 Secure Authentication – Clerk-powered
• 💳 Billing System – Subscription-ready
• 📦 Database Integration – Prisma + Neon
• 🧾 Credit System – Track & manage usage

---

📂 Folder Structure

.
├── prisma/               # Database schema & migrations
├── public/               # Static assets
├── sandbox-templates/    # E2B/Docker sandbox configs
├── src/
│   ├── app/              # App routes & layouts
│   ├── components/       # UI & shared components
│   ├── config/           # App configuration
│   ├── hooks/            # Custom React hooks
│   ├── inngest/          # Inngest jobs & utilities
│   ├── lib/              # Utilities & services
│   ├── modules/          # Feature modules
│   ├── trpc/             # API routers & clients
│   └── types.ts          # Shared types
├── .env                  # Environment variables
├── next.config.ts        # Next.js config
├── package.json          # Dependencies & scripts
└── tsconfig.json         # TypeScript config

---

🔑 Environment Variables (.env)

DATABASE_URL="*"

NEXT_PUBLIC_APP_URL="*"

GEMINI_API_KEY="*"

E2B_API_KEY="*"

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="*"
CLERK_SECRET_KEY="*"
NEXT_PUBLIC_CLERK_SIGN_IN_URL="*"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="*"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="*"

---

🛠️ Getting Started

1️⃣ Clone the Repository

git clone https://github.com/BernieTv/Lovable-Clone.git
cd Lovable-Clone

2️⃣ Install Dependencies

npm install

3️⃣ Add Environment Variables

Fill in .env with your credentials (see above).

4️⃣ Run the Development Server

npm run dev

Then visit http://localhost:3000 🚀

---

💡 Ideal Use Cases

• 🧱 AI-Powered App & Component Generation — spin up entire features from a single prompt and look like a coding wizard.
• 🗂️ Live Project Preview — share your build-in-progress via instant URLs, because waiting is so last season.
• 🧪 Preview + Code Explorer Combo — flip between visuals and code without breaking your flow.
• 🔁 Automated Background Jobs — let async magic handle the grind while you focus on the glow-up.

---

📜 License

MIT License – free to use, remix, and ship 💌

---

💡 Pro Tip: Pair with your fave AI code assistant for chef’s kiss productivity.