Fullstack AI Fitness Coach Tutorial: NextJS, Typescript, React, ChatGPT, Tailwind, Prisma, Upstash

This podcast episode delves into the intricate process of building an AI fitness coach application using NextJS, OpenAI, and various complementary technologies, providing a comprehensive guide to setting up features such as user authentication, backend integration, and real-time communication, while also showcasing innovative tools for personalized fitness guidance.

Outlines

Sign in to continue reading, translating and more.

Continue

codewithbrandon

Building an AI Fitness Coach with NextJS and OpenAI

Project Overview and Setup

Authentication with Clerk

Structuring the Application with Route Groups

Creating the App Layout with a Navbar

Styling the Navbar

Building Goggins AI with OpenAI Assistants

Understanding Assistant Workflows

Implementing Backend Routes for Thread, Message, and Run

Using Postman to Test Backend Routes

Setting Up Planet Scale and Prisma for Database Integration

Building the Chat UI with State Management

Addressing Roadblocks and Introducing Global State with JOTA

Fetching Messages with Global State and Polling

Fetching and Storing Thread ID with User Authentication

Implementing a Backend Endpoint for User Threads

Adding a Chat Input and Send Functionality

Sending Messages and Triggering OpenAI Assistant Runs

Implementing Run Management and Polling

Styling Chat Messages Based on Sender

Deploying the Application to Vercel

Handling User Profiles and Preferences

Implementing Backend Routes for Challenge Preferences

Sending Workout Challenges to Users

Testing Workout Challenge Delivery with Postman

Setting Up Automatic Challenge Delivery with Upstash

Enabling Push Notifications and Client-Side Registration

Creating a Backend Endpoint for Saving Push Subscriptions

Sending Notifications with Web Push

Testing Push Notifications on a Phone

Fullstack AI Fitness Coach Tutorial: NextJS, Typescript, React, ChatGPT, Tailwind, Prisma, Upstash

codewithbrandon

00:00Building an AI Fitness Coach with NextJS and OpenAI

Building an AI Fitness Coach with NextJS and OpenAI

01:59Project Overview and Setup

Project Overview and Setup

07:37Authentication with Clerk

Authentication with Clerk

15:22Structuring the Application with Route Groups

Structuring the Application with Route Groups

19:33Creating the App Layout with a Navbar

Creating the App Layout with a Navbar

21:47Styling the Navbar

Styling the Navbar

28:05Building Goggins AI with OpenAI Assistants

Building Goggins AI with OpenAI Assistants

37:01Understanding Assistant Workflows

Understanding Assistant Workflows

39:52Implementing Backend Routes for Thread, Message, and Run

Implementing Backend Routes for Thread, Message, and Run

46:55Using Postman to Test Backend Routes

Using Postman to Test Backend Routes

49:09Setting Up Planet Scale and Prisma for Database Integration

Setting Up Planet Scale and Prisma for Database Integration

53:14Building the Chat UI with State Management

Building the Chat UI with State Management

1:00:43Addressing Roadblocks and Introducing Global State with JOTA

Addressing Roadblocks and Introducing Global State with JOTA

1:06:15Fetching Messages with Global State and Polling

Fetching Messages with Global State and Polling

1:19:13Fetching and Storing Thread ID with User Authentication

Fetching and Storing Thread ID with User Authentication

1:21:45Implementing a Backend Endpoint for User Threads

Implementing a Backend Endpoint for User Threads

1:27:27Adding a Chat Input and Send Functionality

Adding a Chat Input and Send Functionality

1:34:46Sending Messages and Triggering OpenAI Assistant Runs

Sending Messages and Triggering OpenAI Assistant Runs

1:41:49Implementing Run Management and Polling

Implementing Run Management and Polling

1:51:19Styling Chat Messages Based on Sender

Styling Chat Messages Based on Sender

1:59:58Deploying the Application to Vercel

Deploying the Application to Vercel

2:08:47Handling User Profiles and Preferences

Handling User Profiles and Preferences

2:18:21Implementing Backend Routes for Challenge Preferences

Implementing Backend Routes for Challenge Preferences

2:31:52Sending Workout Challenges to Users

Sending Workout Challenges to Users

2:44:14Testing Workout Challenge Delivery with Postman

Testing Workout Challenge Delivery with Postman

3:06:10Setting Up Automatic Challenge Delivery with Upstash

Setting Up Automatic Challenge Delivery with Upstash

3:19:27Enabling Push Notifications and Client-Side Registration

Enabling Push Notifications and Client-Side Registration

3:34:14Creating a Backend Endpoint for Saving Push Subscriptions

Creating a Backend Endpoint for Saving Push Subscriptions

3:44:48Sending Notifications with Web Push

Sending Notifications with Web Push

3:55:28Testing Push Notifications on a Phone

Testing Push Notifications on a Phone