This is a Next.js project bootstrapped with create-next-app.

Tech Stack Used

• NextJS
• Shadcn UI
• Clerk
• Neon
• Inngest
• PostgreSQL
• Prisma
• Gemini AI

Development

Create a new Next.js project

Run this command to create a new nextjs project

npx create-next-app@latest

• Use TypeScript: No
• Use ESLint: Yes
• Use Tailwind CSS: Yes
• Code inside of src: No
• Use App Router: Yes
• Use Turbopack: Yes
• Customize the import Alias: No

Run this app using the following command:

npx run dev

Install Shadcn UI and Components

Go to Shadcn UI for documentation.
Run npx shadcn@latest init to install the shadcn UI in our project.

We can install required components using this command:

npx shadcn@latest add accordion badge alert-dialog card dialog dropdown-menu input label progress radio-group select sonner tabs textarea

√ How would you like to proceed? » Use --legacy-peer-deps

Dark Mode

• To implement the dark mode using the Shadcn UI, go to this documentation or you can run this command:

npm install next-themes

• Create a theme-provider.jsx file inside components folder with the following code:

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

• Import ThemeProvider in layout.js file and wrap the children components inside it.

import { ThemeProvider } from "@/components/theme-provider"

....

<ThemeProvider
    attribute="class"
    defaultTheme="system"
    enableSystem
    disableTransitionOnChange>
    {children}
</ThemeProvider>

Configuring Clerk for User Authentication and Management

Clerk gives us access to prebuilt components, React hooks, and helpers to make user authentication easier.

Create a new App in Clerk.

Then just follow the steps given by the clerk documentation.

Configuring Neon for Backend Using PostgreSQL Database

• Neon offers a serverless Postgres database platform for developers.
• Instantly branch your data and schema to access isolated DB copies.

Create project after login.

Setup Role and Database

1. Go to Overview tab and click add role.
2. Give any name and create.
3. Go to add database, name it and choose the role that you have just created.
4. Go to dashboard tab and click on Connect Database.
5. Choose your newly created database, owner and copy the connection string.
6. Go to .env file and paste the URL in DATABASE_URL variable.

Configure Inngest

Inngest is an event-driven durable execution platform that allows you to run fast, reliable code on any platform, without managing queues, infra, or state.

Run these following commands:

npm i inngest

npx inngest-cli@latest dev

It will generate a localhost connection for Inngest server.

Create an Inngest Client

Create a new folder inside lib folder called inngest, and then create a new file called client.js.
Paste the below code into the client.js.

import { Inngest } from "inngest";

// Create a client to send and receive events
export const inngest = new Inngest({ id: "ascend-ai",
    name: "AscendAI",
 });

Later on, we will configure the API for Gemini AI here.

Setup /api/inngest route

Create a new folder called api inside app folder.

We have to build a public api to connect to Inngest. Create inngest folder inside api and route.js file inside inngest.

import { serve } from "inngest/next";
import { inngest } from "../../../inngest/client";

// Create an API that serves zero functions
export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [
    /* your functions will be passed here later! */
  ],
});

Follow youtube tutorial for more depth on how inngest can be used.

Setup Prisma

Install Prisma in the project using the following command:

npm i -D prisma

Next step is to initialize the project with Prisma.

npx prisma init

After creating models in schema.prisma, need to run this command to create tables in neon database.

npx prisma migrate dev --name create-models

This command will create tables in the neon database. To run queries in the neon database, create a file prisma.js inside lib folder.

import { PrismaClient } from "@prisma/client";

export const db = globalThis.prisma || new PrismaClient();
if(process.env.NODE_ENV !== 'production'){
    globalThis.prisma = db;
}

globalThis.prisma: This global variable ensures that the Prisma client instance is reused across hot reloads during development. Without this, each time your application reloads, a new instance of prisma client would be created, potentially leading to connection issues.

GEMINI AI Setup

Go to google and search GEMINI AI Api Key and get the api key from google site. Paste the API Key in .env file

GEMINI_AI_API_KEY=[API_KEY]

Install this package using the below command:

npm i @google/generative-ai

Now to use GEMINI AI, we need to use these lines of code:

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_AI_API_KEY);
const model = genAI.getGenerativeModel({
    model: "gemini-1.5-flash",
});

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 our Next.js deployment documentation for more details.