Скачать с ютуб NextJS Full Course: Build a Car Dealer CMS (Part 1/3) в хорошем качестве

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

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