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.
The course covers the full process of building and deploying the application. The steps below summarize a few of the key requirements.
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 devClerk is the third-party authentication provider for the application
npm i @clerk/nextjsAdd 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.
- Create a PlanetScale Database
- Install pscale CLI
- Use the CLI to connect to the DB:
pscale auth login - Create a
devdatabase branch:pscale branch create mood dev - Start the connection:
pscale connect mood dev --port 3309
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.
- Install Prisma Client:
npm i @prisma/client - Install Prisma as dev dependency:
npm i prisma --save-dev - Initialize Prisma:
npx prisma init
- Create an openai.com account
- Select the
APIApp. - Create an API Key
- Copy/Paste the key into your into
.env.localusing the variableOPENAI_API_KEY
