https://github.com/athrala/ai-saas-content-generation-platform

A user-centric AI SaaS Platform, powered by Next.js 13 App Router. It can function as chatbot, image, music, code, and video generators
https://github.com/athrala/ai-saas-content-generation-platform

ai mysql nextjs13 openai prisma react replicate-api saas shadecn-ui stripe tailwindcss

Last synced: about 6 hours ago
JSON representation

A user-centric AI SaaS Platform, powered by Next.js 13 App Router. It can function as chatbot, image, music, code, and video generators

• Host: GitHub
• URL: https://github.com/athrala/ai-saas-content-generation-platform
• Owner: athrala
• Created: 2023-09-17T20:31:53.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-05T20:02:35.000Z (10 months ago)
• Last Synced: 2024-03-05T21:24:25.186Z (10 months ago)
• Topics: ai, mysql, nextjs13, openai, prisma, react, replicate-api, saas, shadecn-ui, stripe, tailwindcss
• Language: TypeScript
• Homepage: https://ai-saa-s-content-generation-platform-immgzktyp-athrala.vercel.app/
• Size: 7.21 MB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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



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

### Prerequisites

**Node version 18.x.x**

### Cloning the repository

```shell

git clone https://github.com/athrala/AI-SaaS-Content-Generation-Platform.git

```

### Install packages

```shell

npm i

```

### Setup .env file

```js

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 (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 |

## Feature demos