![Screenshot 2024-03-05 at 11 56 57 AM](https://private-user-images.githubusercontent.com/110925591/310262741-39ae035b-fc04-4332-835b-39507db0fedb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMTc1NzIsIm5iZiI6MTcyMjExNzI3MiwicGF0aCI6Ii8xMTA5MjU1OTEvMzEwMjYyNzQxLTM5YWUwMzViLWZjMDQtNDMzMi04MzViLTM5NTA3ZGIwZmVkYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QyMTU0MzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05Zjg3NDdjMzZmNDdhMDgzZDVhOWFhMDc0MDdlNDczMmYyOGQyY2IyODM0MzUwZTVhODY3YTQ4ZDcxYTIwZDc0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.3nxHhBWNuCYnH1531MWCnYnVa0-pfkMgEaT1629Fn4E)
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
- 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
Node version 18.x.x
git clone https://github.com/athrala/AI-SaaS-Content-Generation-Platform.git
npm i
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"
Add MySQL Database (I used PlanetScale)
npx prisma db push
npm run dev
Running commands with npm npm run [command]
command | description |
---|---|
dev |
Starts a development instance of the app |
![Screenshot 2024-03-05 at 11 57 29 AM](https://private-user-images.githubusercontent.com/110925591/310263028-55b332b5-2ec4-4e41-85ab-74c5b49d9c57.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMTc1NzIsIm5iZiI6MTcyMjExNzI3MiwicGF0aCI6Ii8xMTA5MjU1OTEvMzEwMjYzMDI4LTU1YjMzMmI1LTJlYzQtNGU0MS04NWFiLTc0YzViNDlkOWM1Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QyMTU0MzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04ZmNmZjUxZDM5NDcxYTFkZWQzMzdiNjMwZmU0ZWUxZTNjMmZhNDk1YTQxMmQ5NDBkNzFiZTNjNDU1YjcxZGY3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.nRPtSbbAki1mgkk8exCXbpB-IB36K6pVSwSLTDyi3VE)