Rotom

Rotom is an AI-powered mockups generator agent that allows users to generate, edit, and publish web prototypes using natural language prompts. Built with Next.js 16, it leverages advanced AI to streamline the design prototyping process.

🚀 Features

• AI-Powered Mockup Generation: Create full web prototypes from a simple text prompt.
• Interactive Editor: Real-time code editing with a live preview.
• Version Control: Automatically saves versions of your project, allowing you to rollback or fork.
• Community Hub: Publish your designs to the community and explore what others have built.
• Credit System: Integrated credit system for AI usage.
• Authentication: Secure user authentication and account management.

🛠️ Tech Stack

• Framework:
• Language:
• Styling:
• Database:
• Authentication:
• AI:
• UI Components:

📂 Project Structure

rotom/
├── app/                  # Next.js App Router pages and API routes
│   ├── account/          # Account settings and profile
│   ├── api/              # Backend API endpoints
│   ├── auth/             # Authentication pages
│   ├── community/        # Community projects feed
│   ├── preview/          # Full-screen project preview
│   ├── pricing/          # Pricing and subscriptions
│   ├── projects/         # Main project editor and workspace
│   └── ...
├── components/           # Reusable UI components
├── lib/                  # Utility functions, server actions
│   ├── actions/          # Server Actions for data mutation
│   └── prisma.ts         # Prisma client instance
├── prisma/               # Database schema and migrations
└── public/               # Static assets

🏁 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js: v18 or later
• PostgreSQL: Ensure you have a running PostgreSQL instance.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/rotom.git
   cd rotom

2. Install dependencies:

   npm install

3. Environment Variables: Create a .env file in the root directory and add the following variables:

   # Database
   DATABASE_URL="postgresql://user:password@localhost:5432/rotom_db"
   
   # Authentication (Better Auth)
   BETTER_AUTH_SECRET="your_secret_key"
   BETTER_AUTH_URL="http://localhost:3000"
   
   # AI
   OPENROUTER_API_KEY="your_openrouter_api_key"

4. Database Setup: Run the Prisma migrations to set up your database schema.

   npx prisma migrate dev

5. Run the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

❤️ Special Thanks

This project wouldn't be possible without these amazing open-source libraries and tools:

• Next.js - The React Framework for the Web
• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML
• Prisma - Next-generation Node.js and TypeScript ORM
• Better Auth - The most comprehensive authentication library for TypeScript
• Motion - A production-ready motion library for React
• OpenRouter - Unified interface for LLMs
• Lucide - Beautiful & consistent icons
• Sonner - An opinionated toast component for React