https://github.com/shadow-lights/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.
https://github.com/shadow-lights/generative-ai
nextjs openai react replicate-ai
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/shadow-lights/generative-ai
- Owner: SHADOW-LIGHTS
- Created: 2024-01-31T13:34:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-11T07:01:39.000Z (about 2 years ago)
- Last Synced: 2024-06-11T08:26:30.832Z (about 2 years ago)
- Topics: nextjs, openai, react, replicate-ai
- Language: TypeScript
- Homepage: https://generation-ai.vercel.app
- Size: 24.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe
https://github.com/SHADOW-LIGHTS/ai-saas-platform/assets/108618163/802c1a9d-37bc-47b2-ac7b-a025bab78039
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
```shell
git clone https://github.com/AntonioErdeljac/next13-ai-saas.git
```
### Install packages
```shell
npm i
```
### Setup Prisma
Add MySQL Database (I used PlanetScale)
```shell
npx prisma db push
```
### Start the app
```shell
npm run dev
```
## Available commands
Running commands with npm `npm run [command]`
| command | description |
| :-------------- | :--------------------------------------- |
| `dev` | Starts a development instance of the app |