Build an AI-Powered Fullstack Next.js App, v3

Scott Moss

Scott Moss

Superfilter AI
7 hours, 34 minutes CC
Build an AI-Powered Fullstack Next.js App, v3

Course Description

Create a full-stack AI-powered Journal app from scratch in Next.js. See how all the pieces of Next.js/React fit together: client components, server components, static and dynamic routing, server actions, middleware, and layouts. Store data in a serverless Prisma DB on PlanetScale and integrate the OpenAI API and Langchain before deploying your app to the world!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: August 12, 2023

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 8 minutes
  • Introduction
    Scott Moss introduces the course and demonstrates the AI-powered application that will be built from scratch with Next.js. The application allows users to log in and manage journal entries with the standard CRUD operations. The entries are analyzed and given an AI-generated sentiment value, summary, and color. The application will be built from scratch, and the final version can be found in the GitHub repo linked below.

App Setup & Authentication

Section Duration: 43 minutes

Connecting to a Database

Section Duration: 47 minutes

Building the Journal Page

Section Duration: 57 minutes

Creating & Updating Journal Entries

Section Duration: 1 hour, 7 minutes

Understanding AI & Prompt Engineering

Section Duration: 45 minutes
  • Sidebar UI
    Scott creates the sidebar to display the entry's summary, subject, and mood information. A background color changes based on the overall mood of the entry. The entry-editor branch can be used as a starting point for this lesson.
  • LLMs & Prompts
    Scott introduces Large Language Models (LLMs). One of the most popular LLMs is GPT, created by OpenAI. Prompts and the Langchain framework are also introduced in this lesson.
  • OpenAI Setup
    Scott walks through how to create an OpenAI API account. First-time users will be given a $5 credit for API usage. A credit card can be added after the credits have expired. An API key is created and added to the applications .env.local file, and the first prompt is sent to the API.
  • Creating Consistent Prompts
    Scott demonstrates how to provide a prompt that returns consistent results. Giving an example of the data to be returned from the LLM helps create more consistency and reduces the amount of parsing needed back in the application.
  • Structured Output with Zod
    Scott uses the Zod library to supply the LLM with a schema for the results returned from the LMM. Types and descriptions are provided for each data property. Temperature is also explained in this lesson.

Analyzing Entries

Section Duration: 55 minutes

Vectors & Similarity Searching

Section Duration: 46 minutes
  • Entry Search UI
    Scott creates the UI and writes the client-side code for the search form, allowing users to ask questions to the OpenAI API about the journal entries. The code is wrapped in a client component, so the state and interactivity are available on the client. The analyze-ui branch can be used as a starting point for this lesson.
  • Vector Database Overview
    Scott introduces vectors and vector databases. Vectors group related data points which simplify the amount of context required for the OpenAI API to respond to a prompt accurately. Each entry will be added to a vector database, and only those closely matching the subject of the prompt will be used in the search analysis.
  • Similarity Searches with Vectors
    Scott codes the helper method to receive a question, creates an in-memory vector database, and performs a similarity search based on the entries. The result is an embedding that can be sent to the OpenAI API for analysis.
  • Search API & Results
    Scott finishes the search feature. The question API endpoint is added to the application. A loading state is added to the Question component, and the results are displayed when a response is received.

Sentiment Analysis

Section Duration: 35 minutes

Testing & Deployment

Section Duration: 43 minutes

Wrapping Up

Section Duration: 3 minutes
I took the 'AI-Powered Fullstack Next.js App' course by Scott Moss on Frontend Masters and I have to say it was on point.
Vivek Shukla

Vivek Shukla


Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now