SaaS AI Platform with Next.js 13, React, Socket.io, Prisma, Tailwind, PostgreSQL

This is a repository for Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe

Project Screenshots:

Landing Page:

Dashboard	Conversations Page
Image Generation Page	Video Generation Page
Music Generation Page	Code Generation Page
Settings and Chatbot	Pro Plan Page

🧐 Features

Here're some of the project's best features:

• Tailwind design
• Tailwind animations and effects
• Full responsiveness
• Clerk Authentication (Email, Google, 9+ Social Logins)
• Client form validation and handling using react-hook-form
• Server error handling using react-toast
• Image Generation Tool (Open AI)
• Video Generation Tool (Replicate AI)
• Conversation Generation Tool (Open AI)
• Music Generation Tool (Replicate AI)
• Page loading state
• Stripe monthly subscription
• Free tier with API limiting
• How to write POST, DELETE, and GET routes in route handlers (app/api)
• How to fetch data in server react components by directly accessing database (WITHOUT API! like Magic!)
• How to handle relations between Server and Child components!
• How to reuse layouts
• Folder structure in Next 13 App Router

🛠️ Installation Steps:

1. Cloning the repository

git clone https://github.com/tanvikhadpe/saas-ai-platform.git

2. Install packages

npm i

3. Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
OPENAI_API_KEY=
REPLICATE_API_TOKEN=
DATABASE_URL=
STRIPE_API_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. Setup Prisma

npx prisma generate

npx prisma db push

5. Running the app

npm run dev

💻 Built with

Technologies used in the project:

• NextJS
• React
• PostgreSQL
• Prisma
• Tailwind
• OpenAI
• Replicate AI