██████ ██ ██████ █████ ███████ ███████ ██ ██████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██████ ███████ ███████ ███████ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██ ██ ███████ ███████ ██ ██████

SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe.

DIPASSIO S.L.

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

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
Write POST, DELETE, and GET routes in route handlers (app/api)
Fetched data in server react components by directly accessing database (WITHOUT API, Is Magic! 🦄)
Handled relations between Server and Child components!
Reuse of layouts
Folder structure in Next 13 App Router

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/dipass-io/saas-master.git

Install packages

npm i

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"

Setup Prisma

Add MySQL Database (Used PlanetScale)

npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
`dev`	Starts a development instance of the app