Canvas2Code | (App Live)

This Next.js application converts wireframes/Canvas into code using AI models. Users can upload a wireframe image, provide a description, and select an AI model to generate the corresponding code.

Features

• Wireframe Conversion: Converts wireframe images into React code using AI.
• AI Model Selection: Allows users to select from different AI models for code generation.
• Credit System: Implements a credit system to manage code generation requests.
• User Authentication: Uses Firebase authentication for user login and signup.
• Code Editor: Integrates a code editor for viewing and editing generated code.
• Responsive Design: Provides a responsive user interface.

Technologies Used

• Next.js: React framework for building the application.
• TypeScript: Programming language.
• Tailwind CSS: CSS framework for styling.
• Firebase: Authentication and storage.
• Drizzle ORM: Database ORM.
• Neon DB: Serverless PostgreSQL.
• OpenAI: AI model integration.
• @codesandbox/sandpack-react: Code editor.
• Lucide React: Icons.
• Sonner: Toast notifications.
• uuid4: UUID generator.
• class-variance-authority: Utility for conditional CSS classes.
• clsx: Utility for constructing className strings conditionally.
• tailwind-merge: Utility to merge Tailwind CSS classes.
• tailwindcss-animate: Animation utilities for Tailwind CSS.

Setup

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn
• Firebase project
• Neon DB connection string
• OpenRouter API Key

Installation

1. Clone the repository:

   git clone <repository-url>
   cd <repository-directory>

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file based on .env.example and fill in the required environment variables:

   NEXT_PUBLIC_FIREBASE_API_KEY=
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
   NEXT_PUBLIC_FIREBASE_APP_ID=
   NEXT_PUBLIC_FIREBASE_MESURMENT_ID=
   NEXT_PUBLIC_NEON_DB_CONNECTION_STRING=
   

Database Setup

1. Configure the database connection in db.tsx using the Neon DB connection string.

2. Run the Drizzle Kit to generate the database schema:

   npx drizzle-kit generate:pg

Firebase Setup

1. Initialize Firebase in firebaseConfig.tsx with your Firebase project credentials.
2. Enable Google Authentication in your Firebase project.

Environment Variables

Ensure the following environment variables are set:

• NEXT_PUBLIC_FIREBASE_API_KEY
• NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
• NEXT_PUBLIC_FIREBASE_PROJECT_ID
• NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
• NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
• NEXT_PUBLIC_FIREBASE_APP_ID
• NEXT_PUBLIC_FIREBASE_MESURMENT_ID
• NEXT_PUBLIC_NEON_DB_CONNECTION_STRING

Running the Application

npm run dev
# or
yarn dev