MERN Ecommerce App With Authentication - Build A React Advanced Project
HTML-код
- Опубликовано: 12 июн 2024
- This video is made possible by Twingate! They have a really simple, ready to use, service that will help you solve countless problems. On top of that, AWS ECS and AWS AMI are also available and easy options for deploying to AWS.
Checkout Twingate: www.twingate.com/?...
Use Promo code (15% OFF Teams or Business annual plan): PEDROTECH
Code: github.com/machadop1407/ecomm...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
00:00 | Intro
04:12 | Project Organization
06:04 | Modifying the tsconfig file
07:45 | Package Installation
12:09 | Setting up Server Boilerplate
15:08 | Creating a MongoDB project
20:16 | Setting up a Twingate Account
22:07 | Creating a new Network on Twingate
25:22 | Launching an AWS EC2 Instance
27:41 | Connecting to an AWS EC2 Instance
54:44 | Creating the Auth component
16:01 | Creating the navbar component
13:12 | Creating the Shop Page
32:38 | Creating the Checkout Page
14:36 | Creating the Purchased Items Page
28:11 | Creating the Logout Functionality
#reactjs #coding 
Наука
Checkout Twingate: www.twingate.com/?
Use Promo code (15% OFF Teams or Business annual plan): PEDROTECH
Hey, Pedro can you please share all the product details if possible & ThankYou for all your Hardwork
please pedro can you share the product data. thank you
Arquivo Json?
Where can I get Dummydata ?@@abduljamalolakunle8685
Product dummy data? Can yo get me the ink
I learned React from this channel, and I'll always remember it. Pedro is an exceptional teacher, especially for beginners, with his clear and effective way of explaining concepts. Thank you for generously sharing your programming knowledge without constantly pushing your courses or seeking financial gain. You provide comprehensive education right here
I WAS REALLY WAITIN FOR THIS VIDEO ONLY THANK YOU
Thank you so much pedro!Your explanations are always top notch.
oh my god i was waiting so long to watch this amazing project on youtube 😍😍😍
you are amazing pedro thank you very much🤩🤩🤩🤩
Love this! So cool can’t wait! Thank you!!
Hi pedro, i learned many things from you thanks.....
Wish you all the best
very cool Pedro, thank you for your work.. I still remember when you had like 12k subs - I've been using/watching your videos as guidance in certain things ( recently mostly firebase.. thx for timestamps I know they can be annoying to add sometimes) ever since then because you usually explain a topic easily - without wasting time on unnecessary stuff and straight to the point.. I'm glad your channel is growing because we will get more videos ( I assume ) since it seems to be worth your time to make videos
I'll probably not watch this video, because I'm not interested in learning how to build a website.. but I might skim thru and pick up some useful things ( specifically the architecture ? if it makes sense.. ? because I tend to make unnecessarily long components that get hard to refactor and read over time )
Anyways, thanks and keep it up man 👍
Thank you bro! Reading this kind of messages really motivate me. Its crazy cause I was more motivated to post when my channel was smaller hahahah but reading comments from people like you who have been here since the beginning is very nice :) Its been a very long ride, thank you for the support!!
@@PedroTechnologies happy it motivates you - but whatever you do, i'll be forever grateful for all the tremendous help your videos provide and will most likely continue providing.. all the best ❤️
PedroTech is the best channel I ever seen, I tried to learn mern stack in different tutorials but at the middle I stucked. but this is tutorials can easily understand because that best teaching method. Thank you
i am a freelancer and pedro tech is a life saver when comes down to real world concepts .... really thankful....always looking forward to new content
Sorry, but I fell in love with this project, pretty decent advanced tutorial. Thanks!!
thanks for the video pedro🎉
Fantastic. Thanks bedro
This is what i am waiting for❤
Loved this❤❤🔥🔥
Awesome tutorial! Just what I needed thanks! Also you've mentioned links in the description couple of times in the video but they are not there...
Could you please add the code to your Github and the products.json file?
suberb work boss ..keep it up its a lot helping☺☺
Obrigado Pedro.
champion good work keep it up
Can you please make a video on complex query using any orm or query builder you like. Because most of the videos in the internet are not showing that complex query. I worked with entity framework and linq to do complex queries in ASP .Net Core Web API. But I am unable to find anything similar or can have functionalities like that. Please make a tutorial😊
Thank you!
Please create full video of this like admin page and everything needed, i would even pay for it !
Sweet and awesome.
Might u have added otp verification ❤
Hey Pedro ive been watching your MERN videos over and over and made my first MERN site finally. I now working on a site that displays 3D model for my college project. Hope it is not that challenging lol
Anyway, thank you for your videos. It is very very helpful!
Can you help with the TECH STACK you are using to achieve that. 😇
Hey Pedro. We know it is one of the best video out there. Just because you are the creator. But if you are reading this. Can you build some production grade web application. With state of the art techs in use. I mean really large projects. not just some clone app. Also realtime recording. Want to see how to approach problem solving. How to write production grade codes. How to handle errors. How to manage server side rendering or client side rendering and so much more. Every single one of us will appreciate it
it's been 58 minutes. how did you watch ~4 hours of video in 58 minutes?
@@kdot78😂😂😂😂😂
Watch code with Antonio. He builds big things.
He can't do that. It's above his level. He is only good at doing trash toy projects.
@@mindblown9365 if you see it toy someone see a bigger toy, let's say a beginners vids
Can you deploy this somewhere to try it ? Like firebase hosting or similar?
Love from India❤
In starting of project, I faced some issue when installing tsc so here are some notes so here are some takeaways for others help:
- If you've already installed tsc globally then first go to Users > Appdata > Roaming > npm and remove all tsc related files.
- If tsc works but throwing some error like "tsc.ps1 cannot be loaded because running scripts is disabled on this system" then go to windows powershell as administrator and run command "Set-ExecutionPolicy -ExecutionPolicy RemoteSigned" and say yes to all
- Finally, run below two commands:
npm uninstall typescript
npm install -g typescript
Also if someone face bcrypt issue then first uninstall it then first install latest version of nodejs (no need to uninstall previous one. If it exist then simply download latest and install, it'll update automatically. To check version if updated or not, check in command prompts by running command node -v) then again install bcrypt. If still don't work then uninstall bcrypt again and run "npm i bcryptjs" command in terminal. It's exact same thing.
Thank you
I'm unable to find Products json fie
i don't why we are not fetching user and populate its previous perchases ? instead axios request again and again
Great video so far! I’m just stuck on the verifyToken function when trying to login on the front end. I automatically get sent an error 401. It seems that there is not an authorisation property present in the request and I didn’t see Pedro set any authorisation header. Any help please?
Where is the product json file? Couldn't find that?
Logic matters👍👌
Nice!
I Need for admin dashboard so can add crud
the theme that you are used in Vscode?
Can you tell me where the product.json file is
Thanks Pedro! Is the project on github? I can't find it.
Why do use create node project with no nest js? Is it good for production? Thank you for your job
why not , javascript ecosystem is most complicated outthere people just love to be adding frameworks upon frameworks on a project. it seems this generations mantra is "the more complicated the better"
Is admin panel is also there in website?
Need React native Projects plz start as soon as possible
Thx from Madagascar
Can i get the custom data added to the product.
Yo ! Is MERN SEO friendly ?
where is the json file pedro ?
Pedro, we need project with Stripe 🤗
Cool tutorial, do you also show how to deploy online ?
if u want to deploy you can use render for backend and vercel for frontend
hey brother please make a social media web-app with next and mern-stack technologies 🔥🔥🔥🔥
the time stamps look a bit messed up ?
Hi ra pedro..... You are programming projects little bit satisfied as compared to my projects😅😂.....
pls include RTK QUERY
I used yoyr video to learn react
no product list in description rip
Please answer:
Is DSA necessary for improving logic in web development????
no
Necessary? No. Helps? Yeah, you can save some memory and optimize some stuff if u are good with dsa
@@PedroTechnologies okay, thanks.
Based off of the intro it really didnt look complex at all, maybe the next tutorial it can be a social media app, or chat app. If an app takes hours to build and looks like its not complex at all im not sure if "best practices" were followed
What we build is not complex, but the way the code is written is. I tried to follow as many best practices regarding code quality/organization as possible, which made the video longer. If I were to make a real super complex project and follow best practices, it would be a 20 hour video hahaha Maybe in the future :)
@@PedroTechnologies Hmm idk about 20 hours, theres plenty of MERN videos, or Nextjs videos that have 3-8 hour length building a complex project, that either involves a real time databse, note taking, or dynamic routes with a group chat, or social media app.
@@eshw23 Yes, but I myself watched a bunch of those videos and I know that they gloss over important topics. There is a difference between a tutorial and a code along type video. I always have the best intentions in trying to make a video with the best explanation possible.
@@PedroTechnologies I appreciate that, but you can at least put some effort into making a somewhat complex application with decent UI. Im sure you can if you work at twitch.
Hey Pedro, can you continue this video and show us how to deploy it for free and also on AWS. Thankyou!
2:26:27 why product stock only decreasing to -1, what if user bought 10 items of same product ?
yea thats a problem
why didn't we just created a vite app ?
does anyone have the data he used for product details
did you got it now ?
Bro are you Portuguese?
where is the data broo ?
code ?
53:48
eh, the video is not translated by the translator for more than an hour(((
lol each user should have a cart item in their database
bro dummy data
there is no filter, sort etc. this app is not react advanced project. its a regular e commerce clone
MERN is kinda dead man...and SQL > NoSQL for majority of use cases.
What made you say SQL is better than NoSQL?
@@gideonolaiya6665 The vast majority of data out there matches the format SQL was made for. For example youtube comments belong to a user. This belonging part is a piece of cake in SQL with foreign keys and primary keys.
@@skyhappyyeah referencing data is also a piece of cake in NoSQL, I know people have their preference but I actually don't see any difference between the two
Reall bad ui .
My videos are meant to focus on the functionality instead of the UI :) Tbh I wish I was good with UI but thats just not what I work with
@@PedroTechnologies data brother
@@mananbadaya6001 bro you got it now ?
please pray for palestine
Sensei 🫡
can i put this project in my resume in 2024🙃