MERN Ecommerce App With Authentication - Build A React Advanced Project
Ғылым және технология
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
Пікірлер: 116
Checkout Twingate: www.twingate.com/? Use Promo code (15% OFF Teams or Business annual plan): PEDROTECH
@Alok_ih
7 ай бұрын
Hey, Pedro can you please share all the product details if possible & ThankYou for all your Hardwork
@abduljamalolakunle8685
6 ай бұрын
please pedro can you share the product data. thank you
@EK1L
6 ай бұрын
Arquivo Json?
@renjisekhar
6 ай бұрын
Where can I get Dummydata ?@@abduljamalolakunle8685
@renjisekhar
6 ай бұрын
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🤩🤩🤩🤩
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 👍
@PedroTechnologies
7 ай бұрын
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!!
@matt112fly
7 ай бұрын
@@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 ❤️
Love this! So cool can’t wait! 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!!
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
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?
thanks for the video pedro🎉
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😊
Fantastic. Thanks bedro
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.
@mauroreis4006
5 ай бұрын
Thank you
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
@kdot78
7 ай бұрын
it's been 58 minutes. how did you watch ~4 hours of video in 58 minutes?
@user-um1yr7lg2m
7 ай бұрын
@@kdot78😂😂😂😂😂
@skyhappy
7 ай бұрын
Watch code with Antonio. He builds big things.
@mindblown9365
7 ай бұрын
He can't do that. It's above his level. He is only good at doing trash toy projects.
@user-um1yr7lg2m
7 ай бұрын
@@mindblown9365 if you see it toy someone see a bigger toy, let's say a beginners vids
This is what i am waiting for❤
Please create full video of this like admin page and everything needed, i would even pay for it !
suberb work boss ..keep it up its a lot helping☺☺
Can you deploy this somewhere to try it ? Like firebase hosting or similar?
Obrigado Pedro.
Loved this❤❤🔥🔥
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!
@lalatech8946
7 ай бұрын
Can you help with the TECH STACK you are using to achieve that. 😇
Sweet and awesome. Might u have added otp verification ❤
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?
I'm unable to find Products json fie
champion good work keep it up
Thank you!
Where is the product json file? Couldn't find that?
Thanks Pedro! Is the project on github? I can't find it.
Can you tell me where the product.json file is
Yo ! Is MERN SEO friendly ?
i don't why we are not fetching user and populate its previous perchases ? instead axios request again and again
Can i get the custom data added to the product.
Why do use create node project with no nest js? Is it good for production? Thank you for your job
@pmrebel2733
2 ай бұрын
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?
the theme that you are used in Vscode?
Need React native Projects plz start as soon as possible
I Need for admin dashboard so can add crud
hey brother please make a social media web-app with next and mern-stack technologies 🔥🔥🔥🔥
where is the json file pedro ?
Pedro, we need project with Stripe 🤗
Hey Pedro, can you continue this video and show us how to deploy it for free and also on AWS. Thankyou!
Hi ra pedro..... You are programming projects little bit satisfied as compared to my projects😅😂.....
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
@PedroTechnologies
7 ай бұрын
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 :)
@eshw23
7 ай бұрын
@@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.
@PedroTechnologies
4 ай бұрын
@@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.
@eshw23
4 ай бұрын
@@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.
Love from India❤
the time stamps look a bit messed up ?
Cool tutorial, do you also show how to deploy online ?
@k303k
7 ай бұрын
if u want to deploy you can use render for backend and vercel for frontend
2:26:27 why product stock only decreasing to -1, what if user bought 10 items of same product ?
@luckyluke1647
5 ай бұрын
yea thats a problem
Please answer: Is DSA necessary for improving logic in web development????
@kdot78
7 ай бұрын
no
@PedroTechnologies
7 ай бұрын
Necessary? No. Helps? Yeah, you can save some memory and optimize some stuff if u are good with dsa
@zunnoorainrafi5985
7 ай бұрын
@@PedroTechnologies okay, thanks.
no product list in description rip
Logic matters👍👌
Thx from Madagascar
why didn't we just created a vite app ?
Nice!
I used yoyr video to learn react
Bro are you Portuguese?
pls include RTK QUERY
does anyone have the data he used for product details
@human2579
5 ай бұрын
did you got it now ?
where is the data broo ?
eh, the video is not translated by the translator for more than an hour(((
code ?
lol each user should have a cart item in their database
53:48
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.
@gideonolaiya6665
7 ай бұрын
What made you say SQL is better than NoSQL?
@skyhappy
7 ай бұрын
@@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.
@gideonolaiya6665
7 ай бұрын
@@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 .
@PedroTechnologies
7 ай бұрын
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
@mananbadaya6001
6 ай бұрын
@@PedroTechnologies data brother
@human2579
5 ай бұрын
@@mananbadaya6001 bro you got it now ?
please pray for palestine
can i put this project in my resume in 2024🙃
Sensei 🫡