Skip to content

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.

Notifications You must be signed in to change notification settings

KyleBrian/Generative-AI

 
 

Repository files navigation

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

Generative-AI.demo.mp4

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

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 93.9%
  • JavaScript 4.7%
  • CSS 1.4%