⚡ Build a Full Stack Grocery Delivery Website Using Next.js | Part 2 | With Map Tracking & AI Chat 🔥
Автор: VIRTUAL CODE
Загружено: 2025-12-07
Просмотров: 5141
Описание:
Build a Full Stack Grocery Delivery Website using Next.js 16, 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
how to Setup source code - • How to Setup Source code of Full Stack Nex...
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
0:36 overview of Part 1
2:20 Creating Animated Category Slider
49:56 Creating Grocery Item Card
1:10:42 Redux Toolkit Tutorial
1:45:00 Creating Get Me api
2:03:54 Creating Add to Cart Functionality
2:46:54 Creating Cart Page
3:42:37 Creating CheckOut Page
5:41:51 Creating Order Model
6:00:35 Creating Place order api ( COD )
6:22:32 Creating Order Success Page
6:44:08 Integrating Stripe Payment gateway
7:45:12 Creating My Orders Page for User
9:03:05 Creating Manage Orders Page For Admin
9:37:42 See you in Part 3
nextjs #nextjs16 #fullstack #groceryapp #deliveryapp
#realtime #socketio #mongodb #nextauth #aichat
#livetracking #vercel #mapbox #framerMotion #webdevelopment
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке:
