This is a companion repo for the Build an AI Powered Fullstack App with Next.js, v3 course on Frontend Masters. This application is built from scratch throughout the course. The main branch contains a final version of the application similar to the one built in the course. The other branches in the repo are code checkpoints which can be used as a starting point for specific lessons.

Getting Started

The course covers the full process of building and deploying the application. The steps below summarize a few of the key requirements.

Create a new Next.js Project

We recommend using Node version 18.x.x and Next.js version 13.4.5 for this course.

npx create-next-app@13.4.5 mood
npm run dev

Install Clerk

Clerk is the third-party authentication provider for the application

npm i @clerk/nextjs

Add Clerk secrets to .env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXX
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/journal
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/new-user

Important

PlanetScale has removed their free tier offering. More info. You can still complete the course with a paid PlanetScale plan. See below for alternatives.

PlanetScale Serverless SQL Database

1. Create a PlanetScale Database
2. Install pscale CLI
3. Use the CLI to connect to the DB: pscale auth login
4. Create a dev database branch: pscale branch create mood dev
5. Start the connection: pscale connect mood dev --port 3309

PlanetScale Alternatives

There are several serverless database alternatives to PlanetScale include Neon, Turso, Supabase, and CockroachDB.

Neon has a branching feature similar to PlanetScale that will be in closer alignment to this course. Follow the Prima + Neon setup guide.

Prisma ORM

1. Install Prisma Client: npm i @prisma/client
2. Install Prisma as dev dependency: npm i prisma --save-dev
3. Initialize Prisma: npx prisma init

OpenAI API Account Setup

1. Create an openai.com account
2. Select the API App.
3. Create an API Key
4. Copy/Paste the key into your into .env.local using the variable OPENAI_API_KEY