⚡ Build a Full Stack Grocery Delivery Website Using Next.js ( With Map Live Tracking, AI Chat ) 🔥

Description

Build a Full Stack Grocery Delivery Website using Next.js 15, MongoDB, NextAuth, Socket.io, Live Map Tracking, and an advanced AI Chat system between User & Delivery Partner — all with smooth Framer Motion animations and lightning-fast deployment on Vercel. source code - https://rzp.io/rzp/y0BGzJEK In this complete Next.js full stack tutorial, we create a modern, real-time grocery delivery platform with features used by top delivery apps today. --- 🚀 What We Build in This Video Full grocery website UI with product listing Add to Cart + Checkout system Secure login/signup using NextAuth Real-time delivery tracking on the map Socket.io-based live order status AI Chat between user & delivery partner MongoDB orders + products schema Animated pages using Framer Motion Fully responsive for mobile & desktop Deployment on Vercel (Free Tier) --- 🔥 Why This Tutorial Is a Must-Watch Covers the most in-demand tech stack of 2026 Combines Next.js + Realtime + Maps + AI (super trending) Builds a real world project you can showcase in your portfolio Perfect for students, freelancers, startups & developers Helps you master modern full stack development from scratch --- 🧰 Tech Stack Used Next.js 16 (App Router) MongoDB + Mongoose NextAuth authentication Socket.io realtime engine Leaflet live map Gemini API for AI Chat Framer Motion animations Vercel for deployment --- 🎯 Who Should Watch This? ✔ Beginners learning full stack ✔ Intermediate developers building projects ✔ Students making portfolio work ✔ Freelancers wanting real-time apps ✔ Anyone learning Next.js in 2025 --- Timestamps - 0:00 Intro 1:12 Project Demo 19:19 Next js Project Setup 31:20 Typescript tutorial 37:01 Creating User Model 57:40 Connecting Mongodb 1:31:50 Creating Register API 1:59:46 Authentication Using NextAuth 2:41:40 Creating Register and SignIn Page 4:21:28 Google Authentication 4:46:03 Middleware in Nextjs 5:27:08 Creating Edit role & mobile page 6:14:01 Creating Nav Component for user 7:05:25 Creating Hero section 7:36:14 Creating Grocery Model 7:45:24 Image Upload Using Cloudinary 8:03:08 Creating Add Grocery API 8:12:59 Update Middleware according to role 8:30:58 Update Nav for Admin 9:05:54 Creating Add Grocery Page 9:51:47 See you in Part 2.. nextjs #nextjs16 #fullstack #groceryapp #deliveryapp #realtime #socketio #mongodb #nextauth #aichat #livetracking #vercel #mapbox #framerMotion #webdevelopment