dany679 / next13-ai-clerk-prisma-saas-stripe

genius is a web site where you create [image , code , conversation] from prompt

readme.mp4

Link para visitar o site : Demo

Genius

Projeto   |    Tecnologias

use the test credit card for buy the pro version

4242 4242 4242 4242

🚀 Tecnologias

• 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

💻 Projeto

O projeto sera um site para gerar dados através do prompt desenvolvido com as tecnologias listadas acima o deploy foi feito no vercel para rodar no seu próprio computador lembre de acessar o stripe e openIA e buscar os dados em branco do arquivo .env abaixo

Licença

MIT

How To Run

Install packages

yarn

Setup .env file

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)

npx prisma db push

Start the app

yarn  dev

start

$ yarn start