⚡ Codexa

AI-Powered Design to Code Generator

Turn your ideas into production-ready React code in seconds. Live preview, save projects, and ship faster.

Live Demo · Report Bug · Request Feature

---

📸 Screenshots

🎨 Hero Section with GSAP Animations

💻 Live Preview with Sandpack

🔐 Authentication

---

✨ Features

• 🎨 GSAP-Powered Animations — Cinematic hero reveal with SplitText, ScrollTrigger sections, and Lenis smooth scroll
• 🤖 AI Code Generation — Streaming React + Tailwind code using OpenRouter (Llama 3.3 70B)
• 💻 Live Preview — Real-time rendering with Sandpack in-browser sandbox
• 🔐 Authentication — Secure email/password auth with Supabase + Row Level Security
• 💾 Save Projects — Database-backed project history with one-click load
• 📋 Copy to Clipboard — One-click copy of generated code
• 🎯 Preview / Code Toggle — Switch between rendered output and source code
• 📱 Fully Responsive — Mobile-first design with Tailwind
• 🌙 Dark Theme — Premium black + purple aesthetic
• ⚡ Blazing Fast — Next.js 16 with Turbopack

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript
Styling	Tailwind CSS
Animations	GSAP, ScrollTrigger, SplitText, Lenis
AI	OpenRouter (Llama 3.3 70B Instruct)
AI SDK	Vercel AI SDK
Live Preview	Sandpack (CodeSandbox)
Auth & DB	Supabase (PostgreSQL + RLS)
Deployment	Vercel
Package Manager	pnpm

---

🚀 Getting Started

Prerequisites

• Node.js 20+ (download)
• pnpm (npm install -g pnpm)
• OpenRouter API key (get free)
• Supabase account (free tier)

Installation

1. Clone the repository:

   git clone https://github.com/iamdeveloper17/codexa.git
   cd codexa

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create .env.local in the root directory:

   OPENROUTER_API_KEY=sk-or-v1-...
   NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...

4. Set up Supabase database:

   Run this SQL in your Supabase SQL Editor:

   create table public.projects (
     id uuid default gen_random_uuid() primary key,
     user_id uuid references auth.users(id) on delete cascade not null,
     prompt text not null,
     code text not null,
     created_at timestamp with time zone default timezone('utc'::text, now()) not null
   );
   
   alter table public.projects enable row level security;
   
   create policy "Users can view own projects"
     on public.projects for select using (auth.uid() = user_id);
   create policy "Users can insert own projects"
     on public.projects for insert with check (auth.uid() = user_id);
   create policy "Users can update own projects"
     on public.projects for update using (auth.uid() = user_id);
   create policy "Users can delete own projects"
     on public.projects for delete using (auth.uid() = user_id);

5. Run the development server:

   pnpm dev

6. Open http://localhost:3000

---

📁 Project Structure

codexa/
├── src/
│   ├── app/
│   │   ├── api/generate/route.ts     # AI code generation API
│   │   ├── login/page.tsx             # Login page
│   │   ├── signup/page.tsx            # Signup page
│   │   ├── layout.tsx                 # Root layout + SmoothScroll
│   │   └── page.tsx                   # Landing page
│   ├── components/
│   │   └── landing/
│   │       ├── Hero.tsx               # Main hero + AI generation
│   │       ├── Features.tsx           # GSAP ScrollTrigger features
│   │       ├── HowItWorks.tsx         # 3-step process section
│   │       ├── CTA.tsx                # Call to action
│   │       ├── CodePreview.tsx        # Sandpack live preview
│   │       ├── ProjectsSidebar.tsx    # Saved projects sidebar
│   │       └── SmoothScroll.tsx       # Lenis smooth scroll
│   ├── lib/
│   │   ├── supabase/client.ts         # Browser Supabase client
│   │   ├── supabase/server.ts         # Server Supabase client
│   │   ├── storage.ts                 # Project save/load helpers
│   │   ├── ai.ts                      # AI client config
│   │   └── utils.ts                   # Utility functions
│   └── middleware.ts                  # Auth route protection
└── public/

---

🎬 GSAP Animations

Codexa uses GSAP for cinematic scroll-based animations:

• SplitText — Hero title letter-by-letter reveal
• Timeline — Sequenced entrance animations (title → subtitle → CTA)
• ScrollTrigger — Features, How It Works, and CTA sections animate on scroll
• Scrub — Scroll-linked animations for premium feel
• Lenis — Butter-smooth scrolling synced with GSAP ticker

---

🔐 Security

• Row Level Security (RLS) — Users can only access their own projects
• Supabase Auth — Secure email/password authentication
• Middleware Protection — All routes except /login and /signup require auth
• Environment Variables — All secrets stored in .env.local (never committed)

---

🌐 Deployment

Deploy on Vercel (Recommended)

1. Push code to GitHub
2. Import project at vercel.com/new
3. Add environment variables:
   • OPENROUTER_API_KEY
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Deploy 🚀

Supabase URL Configuration

After deploy, add your Vercel URL to Supabase:

• Dashboard → Authentication → URL Configuration
• Site URL: https://your-app.vercel.app
• Redirect URLs: https://your-app.vercel.app/**

---

🗺️ Roadmap

• AI code generation with streaming
• GSAP hero + scroll animations
• Live preview with Sandpack
• Project save/load with Supabase
• Email/password authentication
• Password show/hide toggle
• OAuth (Google, GitHub)
• Code syntax highlighting with Shiki
• Export project as ZIP
• Share generated code via link
• Custom AI model selection
• Dark/light theme toggle

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your 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

---

📝 License

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

---

👨‍💻 Author

Amit Kumar (@iamdeveloper17)

• GitHub: github.com/iamdeveloper17
• Project Link: github.com/iamdeveloper17/codexa

---

🙏 Acknowledgments

• Next.js — The React framework
• GSAP — Professional-grade animations
• Sandpack — In-browser code preview
• Supabase — Open source Firebase alternative
• OpenRouter — Unified AI API
• Vercel — Deployment platform

---

⭐ Star this repo if you found it helpful!

Made with ❤️ by Amit Kumar