Build & Deploy: Full Stack AI Quiz Platform with NextJS 13, TailwindCSS, OpenAI, Next Auth

GitHub Repo:

Follow along with this full stack tutorial to learn about the newest features in NextJS 13.4. I will code out the entire project with you from scratch and deploy it to vercel 🙂

In the end, you will learn how to:
– Use NextJS 13’s new App Router
– Utilise the beauty of shadcn and tailwindcss
– Learn best practices for data fetching
– Utilise OpenAI’s API for LLM usage
– Learn how to interact with databases through the power of ORMS

— Pastebins —
Timestamp 13:40 prisma db.ts file
Timestamp 19:37 schema.prisma template code
Timestamp 1:49:05 lib/gpt.ts

— Credits & Inspirations —
Thank you for all the support from my friends who helped me with this project 🙂
Thank you for the frontend design
Thank you for the inspiration to create coding videos
Thank you for the thumbail inspiration

— Mentioned Resources —
Shadcn best practices form
Strict JSON GPT repo

Connect With Me 🔥🚀 :


— Chapters —
0:00 Intro & Demo
4:50 Setup Project
7:10 Setup Shadcn
10:12 Setup Database & Prisma
16:15 Setup NextAuth
30:22 Setup Providers
34:02 Setup Navbar
56:24 Theme Toggle
1:01:26 Home Page
1:05:41 Dashboard Page
1:17:51 Word Cloud
1:22:18 Create Quiz Form
1:41:32 Game Logic Data Modelling
1:47:06 OpenAI GPT Setup
1:52:01 Generate Questions Endpoint
2:07:14 Create Game Endpoint
2:17:59 React Query & Create Game Logic
2:28:29 MCQ Page UI
2:49:26 Check Answer Endpoint
2:57:13 Link Check Answer to MCQ
3:12:36 Time Delta Calculation
3:17:33 Open Ended Game UI
3:28:40 Blank Answer Input Component
3:37:06 Finish Open Ended Game Logic
3:44:34 Statistics Page
4:00:28 Statistics Questions List
4:12:02 Loading Page Logic
4:24:59 Quiz History
4:36:49 Word Cloud Topic Count
4:46:22 Deploy To Vercel