Next.js 13 Full Stack E-commerce App with MongoDB, Stripe, Cloudinary | COMPLETE COURSE
Вставка
- Опубліковано 8 чер 2023
- Git Repo Link:
github.com/ghulamabbas2/buyit...
Checkout my In-Depth Next.js Masterclass on Udemy Courses:
www.udemy.com/course/nextjs-b...
Complete Playlist - STEP-BY-STEP VIDEOS:
• Next.js 13 E-commerce App
TIME STAMPS:
00:41 - DEMO of the Project
13:38 - Connect to DB, Setup Tailwind, New Product
31:03 - Get All Products, Homepage, Header
47:32 - Product Details, BreadCrumbs
01:10:00 - Backend Search, Filters & Pagination
01:37:46 - Frontend Search & Pagination
01:58:39 - Frontend Filters, Price, Ratings, Price
02:19:06 - Handle Cart, Add/Delete Products from Cart
02:53:36 - Authentication, Register User, User Model
03:15:06 - Login User, Next-Auth, Display User in Header
03:36:02 - User Profile, Logout User, Nested Layouts
03:50:27 - Protect Routes, Modify Session, Callback URL
04:01:49 - Add New Address, Render User Addresses
04:21:42 - Error Handling, Custom Error Response
04:32:55 - Protect API Endpoints, Pass Next Auth Token with Axios
04:42:41 - Update & Delete Address, Current User Addresses
05:00:34 - Setup Multer & Cloudinary for Images
05:12:27 - Update Profile, Upload Avatar, Update next-auth Session
05:37:44 - Update User Password
05:49:13 - Shipping Page, Checkout Handler
06:04:33 - Integrate Stripe, Stripe Checkout Session, Tax/Shipping
06:23:29 - Create new Order with Stripe Webhook
06:49:12 - Current User Orders, Clear Cart after Purchase/Order
07:12:49 - Admin Routes, Authorize Roles, Get all Products
07:28:08 - Authorize Roles on API Routes, Create New Product
07:45:59 - Upload Multiple Product Images on Cloudinary
08:07:18 - Update Product, Delete Product & it's Images
08:21:26 - Get All Orders (ADMIN), Order Details
08:35:13 - Update/Process Order, Delete Order
08:46:14 - ADMIN - All Users, Update User, Delete User
09:06:52 - Post Review, Update Review, Can User Review Product
09:35:53 - Connect to MongoDB Atlas, Deploy on Vercel
⚙️ Gadgets I use for Recording:
💻 Laptop - Macbook PRO M1 - 16/512
amzn.to/4eUqrSe
🎤 MIC - Samson Technologies Q2U USB/XLR Dynamic Microphone
amzn.to/3W9Z4wl
🖱️Mouse - Logitech G402 Gaming Mouse Hyperion Fury USB, Black
amzn.to/3RY4xUy
⌨️ Keyboard - Logitech K380 Multi-Device Bluetooth Keyboard
amzn.to/3RY4Fn0
🖥️ Monitor - UltraSharp 24-Inch Screen Led-Lit Monitor (U2419H)
amzn.to/4bxidN6
In this video, we will be building a complete full-stack e-commerce app using Next.js, MongoDB, Stripe for payment processing, and Tailwind for styling. The app will have all the necessary features of a fully functional e-commerce platform including user authentication, product listing, shopping cart, and payment processing.
Throughout the video, we will be demonstrating the complete process of setting up the project and writing the code. We will be covering topics such as setting up the Next.js framework, integrating MongoDB for data storage, adding Stripe for payment processing, and using Tailwind for styling the front end. By the end of the video, you will have a complete understanding of how to build a full-stack e-commerce app and will be able to use this knowledge to build your own projects.
Do ask your question in the comments, and I do give replies to all comments.
LIKE, SUBSCRIBE, SHARE
#nextjs #nextjs13 #nextjsecommerce
This is the best course so far.
Many thanks mate.
Thanks bro i appreciate and i hope you will do again another amazing project using next js
Good course 🔥
Finally its done, thanks a lot bro for your efforts, amazing video
hi did you successfully deploy this on vercel ? if so can you share your repo thanks
مشروع رائع
جزاك الله خيرا
Very good... But please show how to handle multiple filters like category like shoes and electronic
hi, how to use 'use client' in next13 but in the component must call api, is there any way to fix it?
i checked few days back authentication not working like registration, login etc and will you update this project to latest nextjs 13 ?
In product details section when i click on product im getting an error params undefined 57:15 can anyone help me please
Fix Next-Connect Error:
ua-cam.com/video/eiVBV2fW-aA/v-deo.html
TIME STAMPS:
00:41 - DEMO of the Project
13:38 - Connect to DB, Setup Tailwind, New Product
31:03 - Get All Products, Homepage, Header
47:32 - Product Details, BreadCrumbs
01:10:00 - Backend Search, Filters & Pagination
01:37:46 - Frontend Search & Pagination
01:58:39 - Frontend Filters, Price, Ratings, Price
02:19:06 - Handle Cart, Add/Delete Products from Cart
02:53:36 - Authentication, Register User, User Model
03:15:06 - Login User, Next-Auth, Display User in Header
03:36:02 - User Profile, Logout User, Nested Layouts
03:50:27 - Protect Routes, Modify Session, Callback URL
04:01:49 - Add New Address, Render User Addresses
04:21:42 - Error Handling, Custom Error Response
04:32:55 - Protect API Endpoints, Pass Next Auth Token with Axios
04:42:41 - Update & Delete Address, Current User Addresses
05:00:34 - Setup Multer & Cloudinary for Images
05:12:27 - Update Profile, Upload Avatar, Update next-auth Session
05:37:44 - Update User Password
05:49:13 - Shipping Page, Checkout Handler
06:04:33 - Integrate Stripe, Stripe Checkout Session, Tax/Shipping
06:23:29 - Create new Order with Stripe Webhook
06:49:12 - Current User Orders, Clear Cart after Purchase/Order
07:12:49 - Admin Routes, Authorize Roles, Get all Products
07:28:08 - Authorize Roles on API Routes, Create New Product
07:45:59 - Upload Multiple Product Images on Cloudinary
08:07:18 - Update Product, Delete Product & it's Images
08:21:26 - Get All Orders (ADMIN), Order Details
08:35:13 - Update/Process Order, Delete Order
08:46:14 - ADMIN - All Users, Update User, Delete User
09:06:52 - Post Review, Update Review, Can User Review Product
09:35:53 - Connect to MongoDB Atlas, Deploy on Vercel
In product details section when i click on product im getting an error params undefined 57:15
The moment I added the global provider in the layout.js, the app stopped working. Did anyone encounter this.
What you have used for state management in this project ?
Context API
is this project is mobile responsive ?
is responsive?
Hello, Mr. Abbas, the codes inside Github were incompletely uploaded, thank you
I could not see some code files, I don't know, maybe I made a mistake
Check the branches of the git repo.
getsession() not worked
Hello Sir, I'm requesting an employee attendance project using MERN,I'm very" support your channel
please add timestamps ?
Added.
10 hours video.... Is this complete video or a separate one
Complete Video.
@@codingwithabbas pehlay walay parts skip ker saktay es video k bad?
None of the features work like intended in deployment... really sad, it seemed like a good project
I have deleted the mongo atlas cluster after video recording.
@@codingwithabbas Appreciate your reply sir! But I've tried using my own mongo atlas and still didn't work correctly.
The filter system and pagination that's using urlParams somehow didn't work in deployment