PixVerse Clone

Instructions.md

## Your goal is to create a Next.js application using modern technologies to build a reliable and scalable platform for creating AI generated videos from images and prompts.

# Technologies Used:

- Next.js 14 as the framework
- TypeScript for type safety
- Tailwind CSS for styling
- Clerk for authentication
- Prisma as ORM for database
- Stripe for payments
- AWS S3 for image storage
- LumaAI for AI functionality
- Svix for webhooks

# Core Functionality

## 1. Database

- Prisma schemas
- Migrations
- Table relationships
- Transactions
- Tables for users, transactions, generations

## 2. Authentication

- Full Clerk integration
- Webhooks for user.created, user.deleted, user.updated
- Prisma integration for user data storage
- With fields:

  id Int @id @default(autoincrement())
  clerkUserId String @unique
  email String
  name String
  creditBalance Int @default(1)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
- clerkUserId is the primary identifier for all relationships

## 3. Payment System

- Stripe Checkout integration
- Do not use {auth}, use currentUser()
- Webhook handling
- Transaction history with fields:

  id              Int         @id @default(autoincrement())
  userId          String
  amount          Int
  type            String
  status          String
  generationId    Int?
  stripeSessionId String?     @unique
  createdAt       DateTime    @default(now())
- Ability to choose credit amount for purchase
- 1 credit = 1 generation / 1 credit = 1 dollar
- Bulk credit purchases are discounted. Example: 20 credits - $18

## 4. File Management

- AWS S3 integration
- File type validation
- File size limitations
- Preview generation
- Upload status tracking
- Upload photo - get photo link

## 5. AI Functionality

- LumaAI integration
- Provide photo and prompts - receive result link
- Option to enable/disable loop
- Send callback_url to webhook for generation result updates

## 6. Deploy

- Create GitHub repository and push the project
- Deploy to Vercel
- Add environment variables

# Pages

## Home Page

- Bottom toolbar for photo upload and prompt input, with loop mode option
- Slider with latest generations

## Library

- My generations

## Credits Purchase Page

- Credit balance and slider for purchasing
- Used credits

# Documentation

## 1. Clerk Documentation

import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = {
  matcher: [
    '/((?!_next|[^?]_\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest))._)',
    '/(api|trpc)(.*)',
  ],
}
## 2. Stripe Integration

- Example of creating payment session:

import { loadStripe } from '@stripe/stripe-js'
import Stripe from 'stripe'
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
export const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
)
# Important Implementation Notes

## 0. Logging

- Adding server-side logging for error tracking

## 1. Project Setup

- Components in /components
- Pages in /app
- Using Next.js 14 app router
- Server components for data fetching
- Client components with 'use client'

## 2. Server API Calls

- All external API calls through server routes
- Creating API routes in app/api
- Client components work through these APIs
- Request validation

## 3. Environment Variables

- Storing sensitive information in environment variables
- Using .env for development
- Configuring variables on deployment platform
- Access only in server code

## 4. Error Handling

- Comprehensive handling on client and server
- Server logging
- Clear user messages
- Operation status tracking

## 5. Type Safety

- TypeScript interfaces for all data structures
- Avoiding any type
- Precise variable type definitions
- Input data validation

## 6. API Client Initialization

- Initialization only in server code
- Initialization validation
- Connection error handling
- Connection reuse

## 7. Data Fetching in Components

- Using React hooks
- Loading state management
- Error handling