🎬 PART 1: https://youtu.be/c2GTfC-JVjU?si=nUiD0GJaK0-1WNpW
Welcome to Part 2 of our Next.js Full Course, where we continue by first setting up an edge-compatible database with Prisma Postgres and Prisma accelerate. We then continue to build a Car Dealer CMS - this includes setting up authentication using AuthJS V5 with NextJS middleware for protected routes, Redis for storing OTP codes, Resend API for sending transactional emails, advanced data queries and visualisation, image uploads with AWS S3, and AI-powered automation using the Vercel AI SDK integrated with OpenAI’s GPT-4o model. We'll take a deep dive into all of these aforementioned topics, and much more!
🔑 Key Resources:
Prisma Postgres: https://www.prisma.io/postgres
Resend: https://resend.com/React Email: https://react.email/
Upstash: https://upstash.com/
AWS S3: https://aws.amazon.com/s3/
Vercel AI SDK: https://sdk.vercel.ai
OpenAI API: https://platform.openai.com
NextJS App Router: https://nextjs.org
BiomeJS: https://biomejs.dev
Bun JS Runtime: https://bun.sh
👨🏻💻 Source Code will be available once part 3 is released!
📖 Timestamps:
00:00:51 Prisma & Postgres Setup for Edge Compatibility
* Create a Prisma Postgres database on Prisma’s hosting service
* Configure a local TCP tunnel for secure connections
* Enable "edge-compatible" mode using the Accelerate extension
00:21:39 Admin Authentication
* Implement NextAuth (v5) with credential-based sign-ins
* Set up a dedicated admin sign-in page using Next.js App Router
* Store sessions securely in the database for admin access
01:05:21 One-Time Password (OTP) with Resend & Redis
* Create Redis storage to issue and validate six-digit codes
* Integrate Resend API for sending temporary passcodes via email
* Build a custom OTP input component handling paste events and multi-field focus
02:19:14 Securing Routes with Next.js Middleware
* Add middleware to guard admin-only pages at the edge layer
* Add security headers to improve site security and prevent malicious attacks
* Ensure that unauthorised users are redirected away from admin endpoints
02:44:03 Admin UI, Email Template & Rate Limiter
* Implement an admin search and layout with navigation
* Design an email template for one-time passwords using a React email environment
* Add a rate limiter to sign-in and challenge endpoints
03:36:56 Analytics Dashboard & Sales Analysis
* Compute and display analytics data and percentage changes
* Optimise number formatting and currency handling for sales data
* Build a bar chart visualisation to display sales trends over 12 months
04:41:05 Image Upload with S3 and AI SDK Integration
* Build an AWS S3 upload system for storing and retrieving images efficiently
* Implement an image uploader with real-time preview for classified listings
* Integrate AI-driven processing for handling classified creation