NextJS Full Course: Build a Car Dealer CMS (Part 1/3)

Опубликовано: 09 Апрель 2025
на канале: Taylor Lindores-Reeves

23,558

1.3k

In this comprehensive NextJS full course, we build a dynamic car dealer content management system from scratch using Next.js 15, React 19, Bun runtime, Prisma with Postgres, and Redis. This beginner-friendly tutorial covers everything from setting up the development environment to creating fully responsive and SEO-friendly UIs, advanced search and filtering systems, and image optimisation with Amazon S3 and Imgix. Learn how to integrate data, favouriting functionality, and optimising images for a seamless user experience.

In Part 2 of this full course, we'll take a deep dive into content management as an administrator by building the admin dashboard, setting up authentication with NextAuth, integration of AI to automate workflows, and much more!

🔑 Key Resources:

Vercel AI SDK: https://sdk.vercel.ai
ShadCN UI: https://ui.shadcn.com
NextJS App Router: https://nextjs.org
BiomeJS: https://biomejs.dev
Bun JS Runtime: https://bun.sh
OpenAI API: https://platform.openai.com

👨🏻‍💻 Source Code will be available once part 3 is released!
📄 Taxonomy CSV: https://drive.google.com/file/d/1GfdJ...
📸 S3 Images: https://drive.google.com/drive/folder...

📖 Timestamps:

07:10 Installing Next.js & Tailwind
Use Warp terminal to install Bun
Set up Next.js with Tailwind CSS v4
Configure directories, clean boilerplate

16:02 Setting Up Prisma & Database
Install Prisma & Postgres
Set up database, grant permissions
Generate Prisma client, verify with TablePlus
Configure schema: relationships, enums, indexes

37:40 Seeding Taxonomy Data
Build a seed script for makes/models/variants
Use upsert to avoid duplicates
Confirm data in Postgres

01:04:22 Seeding Classifieds Data
Install Faker for mock data
Use createMany with skipDuplicates
Set up price, currency, enums
Generate unique slugs with slugify

01:13:45 Seeding Image Data
Link images to classifieds in schema
Generate blur placeholders with thumbhash/unlazy

01:20:02 Building the UI
Structure layouts, pages, and components
Implement fonts, Tailwind styles
Create inventory page and ClassifiedCard

02:01:53 Adding Favourites (Redis & Sessions)
UI button for favourites
Store favourites in Redis with Upstash
Use cookies for session management
Implement API methods & UI state

02:28:27 Sidebar & Pagination
Sidebar filters (make, model, variant)
Build reusable pagination with SEO links
Use query parameters & shallow routing

03:12:23 Search & Filtering Components
Debounced search, store query in URL
Hierarchical filtering (make → model → variant)
Fetch options dynamically, sanitize params with Zod
Add numeric range filters

04:53:05 Public Layout (Header & Footer)
Add navigation links for Home, Inventory, Favourites
Footer with newsletter signup

05:26:11 Favourites Page
Display user-favourited classifieds
Remove items, show placeholders while loading

05:47:39 Single Classified Page
Display details, images, and contact options
Image carousel (React Swiper, FS Lightbox)
Set up AWS S3 & Imgix for optimized images

06:54:32 Building the Homepage
Homepage filters (taxonomy, year, price)
Display latest arrivals, brand logos

07:35:33 Reservation Flow
Multi-step form for reservations
Render vehicle details for confirmation
Save booking with server action