Build a SaaS AI Platform with Next.js, React, Tailwind, Prisma, Stripe | Full Tutorial 2023

Open AI - 国外访问不了，使用了代理 api - https://ai-yyds.com

Replicate - 需要绑定银行卡，改用 postgresql - https://supabase.com/

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 App Router

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.vscode		.vscode
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
public		public
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
constants.ts		constants.ts
middleware.ts		middleware.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Provide feedback