MERN Stack E-commerce App UI, Reactjs, Nodejs,Express, Mongodb, Redux Toolkit, RTK Query, TypeScript
HTML-код
- Опубликовано: 27 дек 2023
- Join Discord: / discord
Join this channel to get access to perks:
/ @6packprogrammer
In this video, we'll be creating a MERN Stack E-commerce App using Reactjs, Nodejs, Express, Mongodb, Redux Toolkit, RTK Query, and TypeScript.
This e-commerce app will allow you to shop for clothes, accessories, and home goods. We'll be using the MERN Stack to build this app, which includes Reactjs, Nodejs, Express, MongoDB, Redux, and TypeScript. This is a great way to learn more about the MERN Stack and how to build an e-commerce app using it.
Hello everyone, my name is Abhishek Singh, the only programmer in the world with 6 pack abs and you are watching 6 pack programmer.
Demo: ecommerce-frontend.fr.to/
Admin Dashboard Code: drive.google.com/file/d/1yvF9...
Frontend Code: github.com/meabhisingh/mern-e...
Server Code: github.com/meabhisingh/mern-e...
Udemy Course - www.udemy.com/course/mern-sta...
TypeScript - • Master TypeScript in o...
Node - • Node JS Made Easy in H...
React In One Video - • MASTER REACT JS IN ONE...
React Full Course - • REACT JS COURSE 2023
Express - • Express JS in One Less... \
MongoDB - • Master MongoDB: A Comp...
Master Backend In One Video - • Master the BACKEND in ...
RestApi - • Build a RESTful API: A... (optional)
In 2023, it is the most practical web development course on RUclips. We will understand each concept theoretically as well as practically. After understanding the concepts, we will create projects and do fun challenges.
So make sure to subscribe to my channel, So you can't miss any updates.
Web Development Playlist: • Become a Web Developme...
NextJS - • Next Level Next.js: Ma...
React Js Full Playlist: • REACT JS COURSE 2023
Product Used
Camera: amzn.to/3I5G0bC
Alternate Camera: amzn.to/3YxEvbt
Processor: amzn.to/40Cav02
RAM: amzn.to/3YgEAAw
Motherboard: amzn.to/3XbFrBf
SSD: amzn.to/3RMmN1Y
Guitar: amzn.to/3xbnOqw
Monitor: amzn.to/3JVh33Q
Laptop: amzn.to/3lmfJwx
Keyboard: amzn.to/3jKg3oI
Keyboard Wireless: amzn.to/40GNuc6
Touch Panel: amzn.to/3XgdGHC
------------------------------------ FOLLOW ME -------------------------------
ruclips.net/user/6packprogramme...
/ meabhisingh
/ meabhisingh
Join Discord: discord.gg/mhRB3wuS33
best, you are making community
Bro just a minor request can u commit code frequently in every 30 minutes of video that'll be helpful
This project > Every shitty not explained tutorial on youtube ❤ keep it up bro 💯
Sir ajj mereko jo v atta h sb apke wjh se...🥹❤️🤌🏻
Got to learn and know different things, thanks for this gem , bro!!
this man is giving his best
Thanks buddy this was needed🎉
Bro amazing level skill and video , u are one of the best teacher out there on yt therw
ABSOLUTE LEGEND THATS HAT I AM LOOKING FOR
Damn! this is so good! Can't wait for the 2nd and 3rd part. The second part currently is members only, will it be available for all nearly?
What an underrated channel 😮😮
Best Project + Best explanation on internet ❤❤
Aapke mehnat ko pranam❤
Best course bro thanks for making this✨👍
greatest video of this channel , thank u💝💝
LEARNING AND ENJOYING........Thank you Bhaiya ❤
Sir apka 2 years pehle wala eccomerce project krne ke bd seriously Mai itta jyda acche se smjh gya hu ki ye project Mai easily bna luga 😊 thankyou sir ❤❤❤
Hey i am a beginner in mearn can i start with old videos?
@@kamaralam1056yesss
Part 1 Completed ✅ (23jan to 31jan)
Thank s please Ase Video Banate rho Bhoht Help Hoti he apki ALL THE BEST FOR NEXT ViDEO
Sir I'm to start the project and just wannaa know
What have been taught in this part?
And what is coming up in the next part of it?
Please reply it will help me a lot..
wow that's great...
eagerly waiting for the rest of the parts sir
kia bndy tum aye huay hu 😁😁😁😁😁😁
Big fan ho gaya bhai aapka.....backend etna simple tarike se samjhaya bhai...love the way you explain everything in simple way.....
LOVE FROM NEPAL😎😎😎😎
bhai please mujhe ye batao ke ye payment gateway sir ne jo use kara hai wo original hai ya demo matlab usse asal payment hojaegi kya? bhai mujhe ye banakar kisi ko deni hai commercial base pe use kar saktet hai kya ye?
isme jwt token auth use kia h ky
Iss project ko 2 3 baar bana lo to koi bhi project ban jaega, condition ye hai ki ek baar dekh k banao, dusri baar bina dekhe
Tumne banaya hai
@@shriganeshgaming3783nhi bhai, mujhse banti to me yaha comment karta kya..kahi achi company me placed hota. but jitna kuch demo me dekha, agar koi itna scratch se bana sakta hai bina koi video dekhe, to koi bhi web app bana lega that is for sure.
Koi aur full stack app banana chaiye khud se, ye toh bna hi liya hai...
@@Ayush37262jisne nhi banaya unko to banana padega na
@@Ayush37262bhai mai start kr du kya, I meant finally banane ke baad error toh zyada nhi aa raha??
Thank you very much bhaiya ❤🫡👍
46:46 Attack on Titan 🫣🫣
Mein bhi bht excited tha 😅😅
Hint se yaad aagya Iconic BGM of Attack on Titan
Great video bro. lots of good concepts
Finally done with part 1 . Thank you for this tutorial
Bhai Admin Dashboard wali video dekhni pdegi isse phele??
@@Ayush37262ha bhai
deploy krwa do yaar
You r 💎 gem bhayia❤️🙏 u teach organisational based project which is really useful to us.
Amazing Content !
Loved It ❤
you deserve more lots of love from bd
Loved your content
I am expecting some Devops on this channel, things like Azure AD, SSO, SAML, Kubernetes, Jenkins
Thankuhhh so much bhaiyaa 😊😊😊
verry verry awesome bhsi thankyou so much
Thank you so much sir ❤❤❤
Thank you very much Sir❤❤❤❤❤
Bhaiya it would be very helpfull if you could divide video into ....... chapters using timestamp ........... it helps a lot ,, it is something like small checkpoints and we don't get overwhelmed
We love you for this content....Great bhaiya ❤️❤️🙏🏻
Thanks for this video
so helpfull ... loved it
Bhai awesome ho yrr tum
If your auto import is not working for any reason. press command(ctrl)+shift+p, then type Reload window and select this option. it will reload vs code and most likely it will start working.
finally completed frontend ui part
Long live Abhishek Singh
Thanks bhai❤❤
Thank you sir
Great Video ❤
Love you bro❤
Love from Nepal
Doing exactly same , but why my browser showing a zoomed version, where the orodect vards are not shown
is that course the live streaming one ?
is this complete or the another parts will come of this ?
Damn good 😊
Great thanks
Osm bro ❤
have anyone completed this project whenever i open frontend part via github it doest not show me any images or even shipping component ? should i leave or continue.
one more question when i open deploy site in firefox the css property does not work as it should be ?
Which algorithm used here while recommending?
Great tutorial. Thank you! Would you please tell us how to catch typescript type errors on development in next14. Request you yo please share code
I am facing problem on module chart.js has no exported member on charts.tsx
How can I run your entire code, When I am trying to run the frontend code I am getting error for Firebase Firebase: Error (auth/invalid-api-key). and also is there any video for server side code you have created
i am facing this problem : [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')
URLs with dots are leading to a 404 error instead of correctly displaying the corresponding page. In vite js...thats why i avoid to use
Love you from Pakistan ❤
I became full stack developer just because of you. I recommend your channel to everyone and they also subscribed you deserve way more than this. ❤ thank you brother
Make a video on how to add product variants functionality like Flipkart in an e-commerce website. So that we can group the product which are similar in colour and size into one pages.
This series is for beginner of Mern developer or for intermediate of Mern Developer ???
Sir kya aap nextjs pe bhi project banaoge ye wala?
.env file m kon kon se vale dalne h. Specially firebase m
sir please also make tutorials using flutter and NodeJS api
amazing project
i am not able to change the css of select tag . kindly help me with problem.
bro provide full unedited video of your e-com live stream.please
16:04 sir ye asli card payment hena demo to nahi hai? mujhe ye project production mei istemaal karna hai kya mei ye project production mei istemaal kar sakta hu? firbase ya stripe se koi limitation to nahi lagegi gi?
MA Shaa Allah great brother, yrr iska 2nd or 3rd part kab tak ayga we are waiting for this
Bhai ye Android app hai ?
## Building an E-commerce App Frontend: A Chapter Breakdown
**Chapter 1: Project Setup and Overview (**00:27**)**
* Understand the step-by-step process of building a full-stack E-commerce app, starting with the frontend.
* Explore microservices architecture and its benefits in this context (02:45).
* Learn about optional tutorials on TypeScript, Redux, and RTK Query (05:07).
**Chapter 2: Product Management (**08:37**)**
* Update product details, manage prices, and demonstrate deletion in the dashboard.
* Generate unique numbers for products and organize them efficiently in the database (12:10).
**Chapter 3: Building the React Frontend (**17:30**)**
* Set up the React project with React Offcourse and TypeScript.
* Clean up UI files, remove unnecessary CSS, and organize source folders for better structure (21:39).
* Implement the "Suspense" component for improved loading experiences (27:30).
**Chapter 4: Admin Dashboard (**32:33**)**
* Integrate the admin dashboard setup, including styles and pages, for easy management.
* Set up the dashboard with product containers, customer transactions, and corresponding files (37:00).
**Chapter 5: Building UI Components (**41:42**)**
* Create the header component in React with JSX and import dependencies.
* Introduce a new tag feature for better user experience (47:50).
* Style Flexbox layout for the home section (53:27).
* Design the home section with a background image, links, and a "More" button (59:42).
* Create product cards with image URL, name, price, and "Add to Cart" button (01:06:03).
**Chapter 6: Cart and Checkout Functionality (**01:12:00**)**
* Implement variables for total, tax, and shipping charges in the app.
* Style coupon code validation with CSS classes for valid and invalid inputs (01:27:10).
* Map product data for easy access and display (01:32:40).
* Style the new file for the home section, adding a discount tag to the input (01:39:02).
* Handle styling for the checkout button and conditional rendering based on product availability (01:44:33).
**Chapter 7: Shipping and Payment (**01:52:05**)**
* Set up the shipping information UI with components for address and city input.
* Style the Shipping page with a button and incorporating CSS for visual appeal (02:04:13).
* Style the button and input fields for a clean interface (02:11:23).
* Set up explicit login options for gender selection in the form (02:18:01).
**Chapter 8: Admin Panel Enhancements (**02:26:22**)**
* Style the heading for the admin container with a blue background, white text, and pixel-solid border.
* Configure sorting options for products, including ascending and descending prices, and define mandatory fields in the filter (02:33:08).
* Improve product card layout and implement pagination buttons for easy navigation (02:39:25).
* Style the display block for the border in the flexbox, similar to the nation's name (02:47:01).
* Integrate the existing table component for displaying orders, optimizing code reuse (02:53:03).
**Chapter 9: Dynamic Data Rendering (**02:59:11**)**
* Utilize React state management for dynamic data rendering in the app.
* Initialize data with the useState hook and set up a sample data structure for orders.
Great
please put time stamp in video thisis very useful
is payment gateway included in the project ?
Thanks , everyone is making advance tutorial but no one is teaching basics
We need MERN only not Nextjs currently
hey, have you deployed this project?
@@VinaySharma-kz9sk Yes
Bro sass use karo please next project mai
bro... auto import agr nhi aaye to CTRL + SPACE KEY. THANKS ME LATER.😁. Acha kaam karre ho you are great guy thanks for this video.😍
bhai mei typescript ki jagah mei javascript istemaal karlu?
hello anyone can help me regarding this this when i type the command in terminal :- npm create vite@latest it was showing this error how i can slove this issue, ERROR :- npm : The term 'npm' is not recognized as the name of a cmdlet,
function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and
try again.
At line:1 char:1
+ npm create vite@latest
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandN
otFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
SHOWING THIS ERROR PLEASE SOLVE..
Itne dino se kaha the guru
Bro please make full Stack jewellery e comm project using three J's and gsap
Thankyou so much bro you not know you solve how big problem of me but i need to creta 1 more mern app
with the latest technologies can anyone help me to find mern project under 1 month ago upload
Why firebase instead of MongoDB?
yeh best cheiz hai k ub code production level hoga
Amazing please upload other part too
What have been taught in this part? and what will he teach in the next part?
Plz sir reply, I will be thankful.
What have been taught in this part ?
And what will be teaching in the next part?
Please sir reply 🙏..
BROTHER ISKO HUM NEXT JS 14 MEI CONVERT KARSAKTY HAIN?
please provide code of OrdersDetails and checkout component @6 Pack Programmer
linter use nahi karte ho?
No routes matched location "/" sir ye error arha hy jis ki wjha sy dashboard show he nai horha agr or ksi ka bhe hy to kindly help me shukria
❤
_home.scss is not taking effect even after importing it into app.scss Please Help Anyone
0:00 - 17:17:02 project overview
17:04 start coding
Bhaiya fir websit host kar ne bhi bata Dena with database mongoose kaa
What is typescript with swc. Please anyone can tell me????
00:00 Demo
17:16 Start
Bro Next js ke sath bhi kuchh projects bnao
Please add the timelines so that we can navigate every part whenever we want
Please make a one project with next js 14 and node js
Bhai product page k discription page to rha he gye
why my dialog tag not working also not showing any error anyone can help me out
Best Ecommerce Project
Bhai Admin Dashboard wali video dekhni pdegi isse phele??
I dont understand why he has such less number of followers