Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrew-tsegaye/next13-ai-sass
This is a repository for a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe.
https://github.com/andrew-tsegaye/next13-ai-sass
Last synced: 2 days ago
JSON representation
This is a repository for a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe.
- Host: GitHub
- URL: https://github.com/andrew-tsegaye/next13-ai-sass
- Owner: Andrew-Tsegaye
- Created: 2023-11-15T09:27:23.000Z (about 1 year ago)
- Default Branch: start-engine
- Last Pushed: 2023-11-18T13:26:47.000Z (about 1 year ago)
- Last Synced: 2023-11-18T15:03:24.451Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.57 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A stunning and powerful SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe.
This is a repository for 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/AntonioErdeljac/next13-ai-saas.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 |
# Designer & Developer
- Andrew Tsegaye