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

  • @PedroTechnologies
    @PedroTechnologies7 ай бұрын

    Checkout Twingate: www.twingate.com/? Use Promo code (15% OFF Teams or Business annual plan): PEDROTECH

  • @Alok_ih

    @Alok_ih

    7 ай бұрын

    Hey, Pedro can you please share all the product details if possible & ThankYou for all your Hardwork

  • @abduljamalolakunle8685

    @abduljamalolakunle8685

    6 ай бұрын

    please pedro can you share the product data. thank you

  • @EK1L

    @EK1L

    6 ай бұрын

    Arquivo Json?

  • @renjisekhar

    @renjisekhar

    6 ай бұрын

    Where can I get Dummydata ?@@abduljamalolakunle8685

  • @renjisekhar

    @renjisekhar

    6 ай бұрын

    Product dummy data? Can yo get me the ink

  • @kabagambedaniel2468
    @kabagambedaniel24686 ай бұрын

    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

  • @keshavjuneja6499
    @keshavjuneja64997 ай бұрын

    I WAS REALLY WAITIN FOR THIS VIDEO ONLY THANK YOU

  • @MichaelOmotayo
    @MichaelOmotayo7 ай бұрын

    Thank you so much pedro!Your explanations are always top notch.

  • @user-em7kk4ku7z
    @user-em7kk4ku7z7 ай бұрын

    oh my god i was waiting so long to watch this amazing project on youtube 😍😍😍 you are amazing pedro thank you very much🤩🤩🤩🤩

  • @Hedi_Developer
    @Hedi_Developer7 ай бұрын

    Hi pedro, i learned many things from you thanks..... Wish you all the best

  • @matt112fly
    @matt112fly7 ай бұрын

    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

    @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

    @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 ❤️

  • @BooksWeCanRead
    @BooksWeCanRead7 ай бұрын

    Love this! So cool can’t wait! Thank you!!

  • @arjunnagar2415
    @arjunnagar24154 ай бұрын

    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

  • @briancornielle2991
    @briancornielle29916 ай бұрын

    Sorry, but I fell in love with this project, pretty decent advanced tutorial. Thanks!!

  • @overviews-with-themiya
    @overviews-with-themiya5 ай бұрын

    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

  • @LowProFile1803
    @LowProFile18037 ай бұрын

    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?

  • @k303k
    @k303k7 ай бұрын

    thanks for the video pedro🎉

  • @randomandrandomfacts
    @randomandrandomfacts7 ай бұрын

    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😊

  • @mooo2146
    @mooo21467 ай бұрын

    Fantastic. Thanks bedro

  • @Razax7
    @Razax76 ай бұрын

    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

    @mauroreis4006

    5 ай бұрын

    Thank you

  • @tohirul
    @tohirul7 ай бұрын

    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

    @kdot78

    7 ай бұрын

    it's been 58 minutes. how did you watch ~4 hours of video in 58 minutes?

  • @user-um1yr7lg2m

    @user-um1yr7lg2m

    7 ай бұрын

    ​@@kdot78😂😂😂😂😂

  • @skyhappy

    @skyhappy

    7 ай бұрын

    Watch code with Antonio. He builds big things.

  • @mindblown9365

    @mindblown9365

    7 ай бұрын

    He can't do that. It's above his level. He is only good at doing trash toy projects.

  • @user-um1yr7lg2m

    @user-um1yr7lg2m

    7 ай бұрын

    @@mindblown9365 if you see it toy someone see a bigger toy, let's say a beginners vids

  • @ravishbisht502
    @ravishbisht5027 ай бұрын

    This is what i am waiting for❤

  • @waleedsharif618
    @waleedsharif618Ай бұрын

    Please create full video of this like admin page and everything needed, i would even pay for it !

  • @muhammadshahid444
    @muhammadshahid4447 ай бұрын

    suberb work boss ..keep it up its a lot helping☺☺

  • @JoonasKarp
    @JoonasKarp7 ай бұрын

    Can you deploy this somewhere to try it ? Like firebase hosting or similar?

  • @ConcurseirosSP
    @ConcurseirosSP7 ай бұрын

    Obrigado Pedro.

  • @niteshprajapat7918
    @niteshprajapat79187 ай бұрын

    Loved this❤❤🔥🔥

  • @mariocartzl
    @mariocartzl7 ай бұрын

    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

    @lalatech8946

    7 ай бұрын

    Can you help with the TECH STACK you are using to achieve that. 😇

  • @dummymail2495
    @dummymail24957 ай бұрын

    Sweet and awesome. Might u have added otp verification ❤

  • @user-dc9lg9ez9r
    @user-dc9lg9ez9r4 ай бұрын

    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?

  • @vasukalluru4039
    @vasukalluru40397 ай бұрын

    I'm unable to find Products json fie

  • @mywaycoding6413
    @mywaycoding64137 ай бұрын

    champion good work keep it up

  • @user-sp2kv5gd5o
    @user-sp2kv5gd5o4 ай бұрын

    Thank you!

  • @vasukalluru24
    @vasukalluru247 ай бұрын

    Where is the product json file? Couldn't find that?

  • @Elena-us3kz
    @Elena-us3kz7 ай бұрын

    Thanks Pedro! Is the project on github? I can't find it.

  • @psychofreak9014
    @psychofreak90146 ай бұрын

    Can you tell me where the product.json file is

  • @mediacreatif
    @mediacreatif7 ай бұрын

    Yo ! Is MERN SEO friendly ?

  • @YashTiwariji
    @YashTiwariji2 ай бұрын

    i don't why we are not fetching user and populate its previous perchases ? instead axios request again and again

  • @jithuboi
    @jithuboi3 ай бұрын

    Can i get the custom data added to the product.

  • @biLLie_wiLLie
    @biLLie_wiLLie7 ай бұрын

    Why do use create node project with no nest js? Is it good for production? Thank you for your job

  • @pmrebel2733

    @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"

  • @ipreet6850
    @ipreet68507 ай бұрын

    Is admin panel is also there in website?

  • @MuhammadEldeeb
    @MuhammadEldeeb28 күн бұрын

    the theme that you are used in Vscode?

  • @hubesh716
    @hubesh7167 ай бұрын

    Need React native Projects plz start as soon as possible

  • @AlanEtz
    @AlanEtz5 ай бұрын

    I Need for admin dashboard so can add crud

  • @gavit633
    @gavit6337 ай бұрын

    hey brother please make a social media web-app with next and mern-stack technologies 🔥🔥🔥🔥

  • @louaisiradjeddinebenkedda259
    @louaisiradjeddinebenkedda2593 ай бұрын

    where is the json file pedro ?

  • @true227
    @true2277 ай бұрын

    Pedro, we need project with Stripe 🤗

  • @adhirajkar7396
    @adhirajkar73964 ай бұрын

    Hey Pedro, can you continue this video and show us how to deploy it for free and also on AWS. Thankyou!

  • @blueProgrammer
    @blueProgrammer7 ай бұрын

    Hi ra pedro..... You are programming projects little bit satisfied as compared to my projects😅😂.....

  • @eshw23
    @eshw237 ай бұрын

    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

    @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

    @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

    @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

    @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.

  • @sagarchilivery6112
    @sagarchilivery61127 ай бұрын

    Love from India❤

  • @unhandledexception1948
    @unhandledexception19487 ай бұрын

    the time stamps look a bit messed up ?

  • @adhdmed
    @adhdmed7 ай бұрын

    Cool tutorial, do you also show how to deploy online ?

  • @k303k

    @k303k

    7 ай бұрын

    if u want to deploy you can use render for backend and vercel for frontend

  • @human2579
    @human25795 ай бұрын

    2:26:27 why product stock only decreasing to -1, what if user bought 10 items of same product ?

  • @luckyluke1647

    @luckyluke1647

    5 ай бұрын

    yea thats a problem

  • @zunnoorainrafi5985
    @zunnoorainrafi59857 ай бұрын

    Please answer: Is DSA necessary for improving logic in web development????

  • @kdot78

    @kdot78

    7 ай бұрын

    no

  • @PedroTechnologies

    @PedroTechnologies

    7 ай бұрын

    Necessary? No. Helps? Yeah, you can save some memory and optimize some stuff if u are good with dsa

  • @zunnoorainrafi5985

    @zunnoorainrafi5985

    7 ай бұрын

    @@PedroTechnologies okay, thanks.

  • @anishpatel8498
    @anishpatel84984 ай бұрын

    no product list in description rip

  • @abhishekcode
    @abhishekcode6 ай бұрын

    Logic matters👍👌

  • @thierry9726
    @thierry97267 ай бұрын

    Thx from Madagascar

  • @kap139
    @kap139Ай бұрын

    why didn't we just created a vite app ?

  • @celodit1646
    @celodit16465 ай бұрын

    Nice!

  • @panzagamesplay902
    @panzagamesplay9024 ай бұрын

    I used yoyr video to learn react

  • @ricardocunha109
    @ricardocunha1097 ай бұрын

    Bro are you Portuguese?

  • @regilearn2138
    @regilearn21386 ай бұрын

    pls include RTK QUERY

  • @mananbadaya6001
    @mananbadaya60016 ай бұрын

    does anyone have the data he used for product details

  • @human2579

    @human2579

    5 ай бұрын

    did you got it now ?

  • @rapartmaroc8905
    @rapartmaroc89057 ай бұрын

    where is the data broo ?

  • @alexeyfilippov42
    @alexeyfilippov427 ай бұрын

    eh, the video is not translated by the translator for more than an hour(((

  • @webber5629
    @webber56297 ай бұрын

    code ?

  • @kisuhara7844
    @kisuhara78446 ай бұрын

    lol each user should have a cart item in their database

  • @user-me9bq9dk2u
    @user-me9bq9dk2u5 ай бұрын

    53:48

  • @human2579
    @human25795 ай бұрын

    bro dummy data

  • @Metovski
    @Metovski7 ай бұрын

    there is no filter, sort etc. this app is not react advanced project. its a regular e commerce clone

  • @skyhappy
    @skyhappy7 ай бұрын

    MERN is kinda dead man...and SQL > NoSQL for majority of use cases.

  • @gideonolaiya6665

    @gideonolaiya6665

    7 ай бұрын

    What made you say SQL is better than NoSQL?

  • @skyhappy

    @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

    @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

  • @Sky-yy
    @Sky-yy7 ай бұрын

    Reall bad ui .

  • @PedroTechnologies

    @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

    @mananbadaya6001

    6 ай бұрын

    ​@@PedroTechnologies data brother

  • @human2579

    @human2579

    5 ай бұрын

    @@mananbadaya6001 bro you got it now ?

  • @yacine5046
    @yacine50467 ай бұрын

    please pray for palestine

  • @Ageless_Rahul
    @Ageless_RahulАй бұрын

    can i put this project in my resume in 2024🙃

  • @akinlooseemmanuel5232
    @akinlooseemmanuel52327 ай бұрын

    Sensei 🫡

Келесі