👋 Hey everyone! Ready to Build a Car Marketplace with Next.js, React, TailwindCSS, Appwrite, React Query, and features like Reusable Filters, Custom UploadImage hook, Image Gallery .
You will learn how to build a car marketplace with user authentication, dynamic listings, advanced filters, and an optimized image gallery. You'll also create a custom UploadImage hook, a search system, and a modern UI with ShadCN. 🚀
#tailwindcss #react #nextjs15
👉Part 2: https://www.youtube.com/watch?v=HywfdkwQc18
🙏🙏 Like & Subscribe To the Channel - https://tinyurl.com/subcribe-to-techwithEmma
🐦 Follow us on Twitter: https://x.com/techwithemma
🖼️ Follow us on Instagram: https://www.instagram.com/techwithemmaofficial
✅Join this channel to get access to perks:
https://www.youtube.com/channel/UCKF3twEFIvTQZxbY13D-udQ/join
💻👉Build Advanced MERN Auth: 2FA, Email Verification, Cookies, Sessions, and JWT with Node.js & Next.js:
on Youtube: https://youtu.be/2LRLsMracAY
💻👉 Build and Deploy B2B MERN Project Management App | Google Sign-In, Roles, Workspaces, Analytics:
on Youtube: https://www.youtube.com/watch?v=tEt7-HqaVpU
💻👉 Shadcn ui Crash Course: Reactjs/Next.js 14 UI Components Everyone's Using!:
on Youtube: https://www.youtube.com/watch?v=Q3hZybuD_xQ
💻👉 Tailwind CSS Full Course | Build an AI Saas Website:
on Youtube: https://www.youtube.com/watch?v=4LaRHJUZ_sc&t=68s
🗝️Key Features: 👇
🔒 Authentication (Appwrite Register & Login)
🚗 List & Manage Car Listings (New & Used Cars)
🛠️ Reusable Filters (Price, Brand, Model, Year, Fuel Type, Condition)
💡 Custom Form Generator for Listing Creation
💄 Reusable UploadImage Hook for Image Uploads
🎮 Image Gallery with Thumbnails
💎 Price Range Selector
🏢 User's Shop
📊 Optimized Filtering & Search System
✨ Modern UI with ShadCN Components
✨ Built with Next.js & Appwrite for Full-stack Capabilities
📚 Chapters 👇
00:00:00 - Intro & Demo
00:02:37 - Project Setup/Structure
00:15:09 - NavigationBar
00:33:12 - Hero Section & Hero Filter
01:17:43 - Register & Login Form UI
02:04:46 - Set up Appwrite Authentication & Database
02:50:22 - Current User Session & Logout API
03:20:45 - Add Car Listing Form & Form Generator
05:05:23 - Handling Image Upload
06:10:24 - Add Car Listing API
06:38:15 - My Shop API & UI
08:15:58 - Search Filter UI & API
📂✨ Access the course files on GitHub (Give a Star ⭐):
Course files:https://github.com/TechWithEmmaYT/Build-Full-Stack-Car-Marketplace-Nextjs-Appwrite-Nuqs
🔗👉🎨 Custom Theme Styles - https://github.com/TechWithEmmaYT/Build-Full-Stack-Car-Marketplace-Nextjs-Appwrite-Nuqs?tab=listing-fields-object#-custom-theme-styles
🔗👉🗃️ Car Options Constant - https://github.com/TechWithEmmaYT/Build-Full-Stack-Car-Marketplace-Nextjs-Appwrite-Nuqs?tab=listing-fields-object#%EF%B8%8F-car-options-constant
🔗👉🏷️ Listing Fields Object - https://github.com/TechWithEmmaYT/Build-Full-Stack-Car-Marketplace-Nextjs-Appwrite-Nuqs?tab=listing-fields-object#%EF%B8%8F-listing-fields-object
🗃️Resources 👇
🔗👉Custom Phone Input - https://shadcn-phone-input.vercel.app/#try
🔗👉Custom Multiselect - https://shadcnui-expansions.typeart.cc/docs/multiple-selector
🔗👉Appwrite - https://appwrite.io
🔗👉Appwrite Docs - https://appwrite.io/docs
🔗👉Nuqs - https://nuqs.47ng.com/
🔗👉ReactQuery - https://tanstack.com/query/latest
🔗👉TailwindCSS - https://tailwindcss.com/
🔗👉Shadcn UI - https://ui.shadcn.com/docs/installation/next
💻👉Like & Subscribe To the Channel
Channel: https://tinyurl.com/subcribe-to-techwithEmma
⭐Build a Modern Next.js Application with React, Next JS, TypeScript, Tailwind CSS