Generative Ai
This AI Platform, built with Next.js 13, React, and Tailwind CSS, offers a rich, interactive experience with features like AI-powered image, video, conversation, and music generation (OpenAI, Replicate AI), Clerk authentication, Stripe subscriptions, and robust error handling. It showcases advanced data handling & routing with modern web practices.
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
Prerequisites
Node version 18.x.x
Cloning the repository
git clone https://github.com/AntonioErdeljac/next13-ai-saas.git
Install packages
npm i
Setup Prisma
Add MySQL Database (I 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 |
