Genius - A Modern Next.js 14 SaaS AI Platform.

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

genius-ai/
  |- app/
    |-- (auth)/
        |--- (routes)/
            |---- sign-in/[[...sign-in]]/
            |---- sign-up/[[...sign-up]]/
        |--- layout.tsx
    |-- (dashboard)/
        |--- (routes)/
            |---- code/
            |---- conversation/
            |---- dashboard/
            |---- image/
            |---- music/
            |---- settings/
            |---- video/
        |--- layout.tsx
    |-- (landing)/
        |--- layout.tsx
        |--- page.tsx
    |-- api/
        |--- code/
        |--- conversation/
        |--- image/
        |--- music/
        |--- stripe/
        |--- video/
        |--- webhook/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- ui/
    |-- bot-avatar.tsx
    |-- crisp-chat.tsx
    |-- empty.tsx
    |-- free-counter.tsx
    |-- heading.tsx
    |-- landing-content.tsx
    |-- landing-footer.tsx
    |-- landing-hero.tsx
    |-- landing-navbar.tsx
    |-- loader.tsx
    |-- mobile-sidebar.tsx
    |-- navbar.tsx
    |-- pro-modal.tsx
    |-- sidebar.tsx
    |-- subscription-button.tsx
    |-- user-avatar.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- hooks/
    |-- use-pro-modal.tsx
  |- lib/
    |-- api-limit.ts
    |-- db.ts
    |-- stripe.ts
    |-- subscription.ts
    |-- utils.ts
  |- prisma/
    |-- schema.prisma
  |- providers/
    |-- crisp-provider.tsx
    |-- modal-provider.tsx
    |-- toaster-provider.tsx
  |- public/
    |-- testimonials/
    |-- empty.png
    |-- logo.png
  |- schemas/
    |-- index.ts
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- components.json
  |- environment.d.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env file in root directory.
4. Contents of .env:

# .env

# disable next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect uri
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
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# replicate api token
REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# aiven database url
DATABASE_URL="mysql://<username>:<password>@<host>:<port>/genius-ai?ssl-mode=REQUIRED"

# stripe api/webhook secret key
STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# app base url
NEXT_PUBLIC_APP_URL=http://localhost:3000

# crisp website id
NEXT_PUBLIC_CRISP_WEBSITE_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx

5. Clerk Authentication Keys

• Visit the Clerk dashboard: https://clerk.dev
• Log in to your Clerk account or sign up if you don't have one.
• Go to the "Projects" section and select your project.
• Navigate to the "API Keys" tab.
• Copy the "Publishable Key" and replace NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in the .env.local file with the copied key.
• Copy the "Secret Key" and replace CLERK_SECRET_KEY in the .env.local file with the copied key.

6. OpenAI API Key

Visit OpenAI and sign up for an account. Once registered, you can find your API key in the API section of your account settings. Copy the key and set it as the OPENAI_API_KEY in your project's environment.

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

7. Replicate API Token

Sign up or log in to Replicate. Once logged in, navigate to your account settings, and you'll find your API token. Copy the token and set it as the REPLICATE_API_TOKEN in your project's environment.

REPLICATE_API_TOKEN=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

8. Aiven Database URL

If you don't have an Aiven account, sign up here. After creating an account, set up a MySQL database. In the Aiven dashboard, find your database connection details and construct the DATABASE_URL in the following format:

DATABASE_URL="mysql://<username>:<password>@<host>:<port>/genius-ai?ssl-mode=REQUIRED"

9. Stripe API and Webhook Keys

For Stripe, sign up or log in to your Stripe Dashboard. Once logged in, go to Developers > API keys to find your API secret key and webhook secret. Set them as STRIPE_API_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your project's environment.

STRIPE_API_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

10. App Base URL

Set the base URL of your application as NEXT_PUBLIC_APP_URL in your project's environment.

NEXT_PUBLIC_APP_URL=http://localhost:3000

11. Crisp Website ID

Sign up on Crisp and create a website. Once created, find your website ID in the Crisp dashboard and set it as NEXT_PUBLIC_CRISP_WEBSITE_ID in your project's environment.

NEXT_PUBLIC_CRISP_WEBSITE_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx

12. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

13. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Genius.

• @clerk/nextjs: ^4.29.3
• @hookform/resolvers: ^3.3.4
• @prisma/client: ^5.8.0
• @radix-ui/react-avatar: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-progress: ^1.0.3
• @radix-ui/react-select: ^2.0.0
• @radix-ui/react-slot: ^1.0.2
• axios: ^1.6.5
• class-variance-authority: ^0.7.0
• clsx: ^2.1.0
• crisp-sdk-web: ^1.0.21
• lucide-react: ^0.309.0
• next: 14.0.4
• openai: ^3.3.0
• react: ^18
• react-dom: ^18
• react-hook-form: ^7.49.3
• react-markdown: ^9.0.1
• replicate: ^0.25.2
• sonner: ^1.3.1
• stripe: ^14.12.0
• tailwind-merge: ^2.2.0
• tailwindcss-animate: ^1.0.7
• typewriter-effect: ^2.21.0
• zod: ^3.22.4
• zustand: ^4.4.7
• @types/node: ^20
• @types/react: ^18
• @types/react-dom: ^18
• autoprefixer: ^10.0.1
• eslint: ^8
• eslint-config-next: 14.0.4
• postcss: ^8
• prisma: ^5.8.0
• tailwindcss: ^3.3.0
• typescript: ^5

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)