Build a FULLSTACK React Ecommerce App that is fully Responsive with Stripe Payment

Подписаться 82 тыс.

Просмотров 248 тыс.

50% 1

React Responsive, Fullstack, Ecommerce App Tutorial from scratch. We will be using React, Material UI, Stripe, Formik, Yup, Strapi, and Redux Toolkit to build this entire application. This application will allow you to add products into a cart, have a form to fill out information and make payments through Stripe with a backend supported by Strapi.
Links:
create react app: create-react-app.dev/docs/get...
material ui: mui.com/material-ui/getting-s...
formik: formik.org/docs/overview#inst...
yup validation: github.com/jquense/yup
google fonts: fonts.google.com/
react responsive carousel: github.com/leandrowd/react-re...
redux toolkit: redux-toolkit.js.org/tutorial...
strapi: docs.strapi.io/developer-docs...
stripe dashboard: dashboard.stripe.com/test/das...
stripe quickstart: stripe.com/docs/billing/quick...
stripe code: stripe.com/docs/checkout/quic...
stripe api ref: stripe.com/docs/api/checkout/...
stripe api keys: dashboard.stripe.com/test/api...
github completed app: github.com/ed-roh/react-ecomm...
images: github.com/ed-roh/react-ecomm...
data for strapi items: github.com/ed-roh/react-ecomm...
-----------
Subscribe to my channel: / @edrohdev
for more web development and web 3.0 blockchain tutorials!
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
Chapters:
0:00 Create a Complete React Ecommerce Website from Scratch
4:04 Strapi Installation and Setup for Backend
13:11 React Ecommerce Frontend Installation and Setup
17:24 Theming Setup
24:50 React Router Setup
27:28 React and Redux File and Folder Architecture
34:15 Navbar
44:44 Redux and Redux Toolkit Setup building CartMenu
1:23:55 Individual Item Component
1:39:19 Home Page
2:22:17 Footer
2:30:56 Item Details Page
2:54:24 Checkout Pages and Forms with Formik and Yup
3:45:27 Stripe Setup and Integration
4:10:03 Final Complete Ecommerce Demo and Summary
4:11:40 Complete Ecommerce Website Built Fully in React

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 403

@EdRohDev Год назад

Hi everyone, I'm receiving valuable feedback from you all and definitely putting them into consideration in future videos. My backlog includes developing projects in Typescript, more MERN stack videos, Next JS (once 13 is not missing features), including both frontend and backend deployment, building feature by feature, and many more. Thank you for your patience as I make these transitions and improve my videos. Just want to say thank you all for the support! Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

@marcelobc2230 Год назад

thanks a lot.....friend ! I'll see all...

@ankushtagore4299 Год назад

youre doing great.. keep up the god's work

@mrrandom7920 Год назад

Thank you! i want to see a e-commerce website built with next 13.

@Ibrahim-fh6kv Год назад

Do you have a discord server?

@sdemockinterview322 Год назад

Make netflix clone

@betterbehappythannot3605 Год назад

You put more detail into explaining concepts instead of spamming us with code, I am very grateful for that!

@Rajkumar-sm6bi Год назад

people mostly make frontend specific videos like a landing page, we need more of this full stack for COMPLETE understanding on how things work as a whole. thank you, subbed

@girishpandey9976 3 месяца назад

Ed you really rock without putting unnecessary deversion, i am thankful to you...

@kenoxfps8598 Год назад

This is fantastic application, just what I have been waiting for

@thekontuli2828 Год назад

So generous with your knowledge, i had to subscribe. I will be attempting this project very soon, it's very enticing! Great stuff - thank you!

@thekontuli2828 6 месяцев назад

Done! Many moons later😆

@spectra.shohan Год назад

This is the perfect react-redux e-commerce project for your resume, and thanks a lot ed roh!

@nidhinm3301 Год назад

have you ccomplete this

@HosseinSalmani-ff2fp Год назад

Hello, I got this error at 02:12:00 when I was writing the values in ShoppingList: Error: Cannot read properties of null (reading 'replace') TypeError: Cannot read properties of null (reading 'replace') ((((((( Please Help Meeeeee ))))))))))

@user-sl3ls9bn1u 8 месяцев назад

Thank you Ed! I appreciate you putting this all together and sharing it with us.

@dalestewart Год назад

Another top notch professional tutorial building the ecommerce website.

@leonidostrovskiy7815 Год назад

Special Thanks for having no disturbing ads

@codenissi Год назад

A fantastic effort to make this the best video tutorial ever. Legend.

@jamsranjavodgerel803 4 месяца назад

Another great project tutorial. Thanks Ed!

@derekprieur5258 Год назад

Great video! I think a good addition in future videos would be to include the deployment process to production at the end. Deploying the front-end is pretty straightforward but getting the backend stuff deployed can be more tricky

@leonardoalves7740 11 месяцев назад

did you manage to deploy the project? The images only appear when I start the strapi server locally, I would like them to appear without me having to start the server locally

@anmolchandra8370 10 месяцев назад

Im not able to download the stripe images from the github link given in the description , can anyone help me to get out of it ?

@shadmanuddin 7 месяцев назад

Did you ever manage to deploy?

@achilahsamuel7855 Год назад

very easily the best e-commerce video resource i ever came across

@AB-bu8ti Год назад

Love getting notifications of new videos from you in the mornings!

@EdRohDev Год назад

always a pleasure!

@russv3503 Год назад

Thank you so much, I been trying to build something like this for my resume and no thanks to you I would do it and learn along the way =)

@russv3503 Год назад

@@user-pg8ud3ce2m oh boy do I have questions lol I wanna try to figure it out on my own before asking for help =)

@brigadasgrifo Год назад

Amazing, you are the best!. Thank you for all this hard work

@jessecook845 Год назад

I really enjoy these long form build apps, :)

@isaacjon Год назад

Bro i really appreciate your content. Keep going 🔥🔥🔥🔥

@user-gh3uo3om9g Год назад

Beautiful explanation...Loved each and every minute. Thank you

@artinfarmani5829 Год назад

Hello bro, I got this error at 02:12:00 when I was writing the values in shoppingList. error: Can not read properties of null(reading 'replace') , my code is exactly the same with ed Roh, please help me .

@girishpandey9976 3 месяца назад

Your are great and so kind for everyone via providing such enriched contents to us.... we all are thankful to you!

@DeezHbar Год назад

Customer login page with add to favorites would be nice to add to this along with deployment of strapi to production. Thank you for the partial tutorial.

@pierre1979 Год назад

God bless you Ed, thank you for changing our lives.

@kenanxo7384 Год назад

You are such a great teacher, keep it up!

@gordonharper2961 Год назад

Loving this app so much!

@EricShans Год назад

I wanted to say thanks so much for this tutorial. Am about 70% done and I am using this to build an e-commerce site for my photographs. Learning a lot (been a FE dev for a long time, took a break but for the past year or two getting back to it with React and everything. you are using here :))

@_Zepp_ Год назад

Have you been using it in production, yet? If so, what's your experience been?

@EricShans Год назад

@@_Zepp_ I'm still trying to get it there - hopefully over the next week or two. I had to add some features (LocalStorage & few other customizations) so far.

@_Zepp_ Год назад

@@EricShans Awesome! Thanks for the reply!

@EricShans Год назад

@@_Zepp_ no problem! have you shipped it to production yet?

@_Zepp_ Год назад

@@EricShans Nah, literally just started haha. Seems like a very good walkthrough, though.

@appletree6741 Год назад

Wonderful thank you! One thing I wondered is whether the amount of is use is always necessary. E.g. in Item.jsx there's a box in a box in a box in a box in a box (5 nesting levels). Can't you just use 2 or 3 nesting levels and then multiple boxes following each other?

@divyanshugehlot2028 Год назад

Amazing one bro 🥰🥰loved your content and style of coding

@sourav1795 Год назад

as always amazing bro😁

@davronmaxmudov3972 Год назад

The best, good job man)

@unionpac Год назад

In the future it would be great to have the app deployed or some screenshots of the different pages for a reference when styling. That way people are less dependent on the specific styling code and can instead look at the img as a reference and try to recreate the style themselves! Anyways though, awesome video man, appreciate the hard work :)

@anmolchandra8370 10 месяцев назад

Im not able to download the stripe images from the github link given in the description , can anyone help me to get out of it ?

@TennoAndros 9 месяцев назад

@@anmolchandra8370 just go to the main repo and download the whole project then go to assets and take the images. That's what i did at least.

@DI4MONDTOOL Год назад

Awesome video, please make a second series with one of your fancy frontends ;)

@lapphong8835 Год назад

Your course is awesome. Can you do the authentication part, accumulate points to promote % according to the bill value and finally integrate the credit card. Please go to part 2 to continue this application. Since ecom it is the first step towards the web dev approach, thanks

@raphaelraguette289 Год назад

Hi im from France and I follow ur tutorial is very clear and helpfull Thank you sir🙏

@idynxcode5744 Год назад

You are legend! Thank you so much!

@angell2341 Год назад

It's Brilliant, I love the video

@cristiannitu8458 Год назад

Thank you for this video Congratulations You did a great job

@VirajPadwalkar Год назад

Great work !

@itachicodes2506 Год назад

man you on another level

@thedigitalgurutech 11 месяцев назад

Where is Part 2 where we complete the validation, the navigational components/pages, create user log-in/database, complete the other informational pages in footer, resolve the 3 errors present in the order.js stripe controller, and deploy our pages via gh-pages or web-host otherwise? Fantastic job with this project and the react admin dashboard otherwise. As you mentioned feedback, I would like to see how you resolve more errors and how to strategize the development of each page/not just the composition of each. More documentation back and forth would also be appreciated. Let's get part 2 on this one and the admin dashboard when you find the time. - Love that you provide all your code and assets otherwise - this is helpful on 4hour long projects if we get stuck along the way - for instance, you had some editing issues on react admin and having the code handy provided crucial to my study of your tutorial - you are usually very thorough and informative though - so these 2 projects were a huge undertaking and very informative endeavor otherwise - I appreciate you!

@anmolchandra8370 10 месяцев назад

Im not able to download the stripe images from the github link given in the description , can anyone help me to get out of it ?

@TRIGO_ALLINE Год назад

Great stuff, thank you so much!

@davidwahinya9171 Год назад

cool stuff man. Thanks alot

@kennedyfreitas7548 Год назад

Ed is the type of guy that make the world a better place by helping others

@qAntBcn 10 месяцев назад

you are so naive... NO ONE will do NOTHING for free in this world. in this case its just a coincidence that you feel like he helps make the world a better place by helping others, take a look at the readme of his videos, there is NO instructions how to run the project because he need you to watch the video ) This is how he get the compensation and build the community of juniors that he MAY BE going to teach in the future.

@knvsf2829 10 месяцев назад

@@qAntBcn Bro, are you okay ??

@ViiRuS47 Год назад

To acces the URL of image you have to replace line 19 to 28 of Item.jsx by : const { data: { attributes: { url }, }, } = image;

@lea_goldsmith Год назад

god bless you!

@user-wr8lp8ou6t 7 месяцев назад

Saved my Soul! Can't thank you enough!

@lokeshnegi5051 Год назад

please try to include typescript too it'll be really helpful and thanks for this amazing tutorial

@majesticglue9100 Год назад

Fantastic app Mate!

@lifehackshortys Год назад

Hey ! Amazing build ! is it possible to show how to retrieve the costumer billing information when filling the form? Thanks

@alexdabruh Год назад

Great video! Wont gatsby or nextjs be more suited for a e-commence application such as this one?

@SanAnimatedWebVideos Год назад

thanks edroh. i have some comment , when building part of the component it is better to open browser and visual studio side by side and show us the effect of each change

@FinCoder-ce8yb 6 месяцев назад

Constructive criticism - First of all, thank you to EdRoth for the trouble of making this video, it is a huge endeavor. This is wonderfully well made video if you enjoy watching someone doing marathon coding and mostly reading aloud the code he writes but not much else, it is indeed very well made and entertaining for that purpose. BUT! if your goal is to learn to code and understand how the code functions, unfortunately this video explains surprisingly little, almost nothing in that way compared to other React training videos. After watching more than half of this video I have gained tremendous respect for coding teachers who go way further and spend third of the videos running time to teach and explain things, like Brad Traversy and Maximilian Schwarzmüller (both are in RU-vid and udemy). EdRoth could tremendously add value to this video if he, in addition to what he has done this far, would spent more time in explaining how/why each part works. Your presentation skills are top level, but just the educational part could be made way better.

@Develoquent Месяц назад

The most common phrase in this tutorial has to be 'Just be careful, theres a lot of boxes' lol. I cringe seeing this. Im building it out and creating components for a lot more things and its helping organize things correctly. I dont have more than 1 box without a child component inside of it broken out. Its much cleaner and makes it so much more readable. Still though, im very appreciative of this tutorial!

@cedricgraffe5407 Год назад

Hello from France! Without a doubt the best tutorial I have watched this year. Would it be possible to mount a solution with a free plan like render or other to put the backend of strapi online. Thanks again.

@iuashrafi Год назад

Thankyou Ed !

@khadabaalgaming7489 Год назад

hey ed, it would awesome if you also include a login, logout functionality for this series. Also, we need to print the billing info, so it would be awesome to have an api to save pdf of billing info and attach it with the order. kindly add one more tutorial and include these small things too to make this tutorial a complete tutorial. thanks

@anmolchandra8370 10 месяцев назад

Im not able to download the stripe images from the github link given in the description , can anyone help me to get out of it ?

@dannydiara 9 месяцев назад

Just go get your own ımages. it is not necessary to get the exact same images @@anmolchandra8370

@joemurray1664 Год назад

thank you, great content

@MarioTrazzi Год назад

you are the best, thank you soooo muchhh

@tjcalabroso6211 Год назад

@EdRoh This video is great! But just like your past video you're not building it feature by feature and It's really hard for some beginner's to follow without seeing an output on screen after coding a lot. I hope this criticism can help to your future content.

@khadabaalgaming7489 Год назад

@Anuj I bhai react to acche se aani chahiye, 6 pack programmer ke channel pe hai react ka tutorial, waha se atleast basics kar lo, baaki 1-2 ghante ki koi lama dev ki strapi ka project kar lena, you will all be set for this.

@HappyKatze Год назад

Great video! Any chance for Typescripts projects in the future

@EdRohDev Год назад

will definitely consider it! only thing that makes me hesitant is adds a lot of "dead" time and 'extra' code during tutorial but i'll give it some thought!

@DharmendraSharma-tp3go Год назад

A masterpiece tutorial. This video is full of knowledge and boost your skill at least by 30%. Thanks a lot!!!!

@qAntBcn 10 месяцев назад

Not really to be honest... If you starting from 0 so its 100% boost ))) BUT its just a ONE way to build the VERY basic shop app.... EVEN its not bad example at all. Also its free. Its way better if he just teach of the concepts instead of show the ONE particular way of doing something... THERE IS where the knowledge is coming... Because when you know the WHOLE concept and WHOLE vision of it, you can easily swap any component you need. For example REDUX is a HUGE overhead almost in EVERY project... take a look at zustand how easy is this and how small this package in size compared with Redux

@DieumerciRudegeza Год назад

i wanted to say thanks because i am beginner but this channel help me to become expert

@fadodundamilare4392 Год назад

@EdRoh Please can you make a short video on how to deploy the Strapi back-end for this application?

@dianab536 Год назад

will you do a continuation of this project by adding user validation and authentication as well as updating the user profile?

@zeshanshaikh0401 Год назад

Great tutorial

@abhishekmishra9841 Год назад

Wow great bro thank you

@harrisonekpobimi4764 Год назад

Great stuff

@hamzabadii3575 Год назад

why when you post the project on github on file checkout and server you create localhost2000 how i can understand

@jeromeblaek3521 Год назад

How did you connect client side with server side, because products on the backend are not showing on the frontend, its as if I built 2 separate projects

@davidt510 6 месяцев назад

Working my way through this atm. One of my only critiques so far is that it'd be good if you showed the progress of the website as you're doing it just so we know if we're on track. It felt like a lot of code was written without actually being able to compare it with yours.

@morokammopane3910 3 месяца назад

this is what I seeing, and I'm 1 hour deep but hasn't seen what am building, what if there is an error, what will I do, I have to go back hours and try figure out where its coming from? what about cd/ci with github? deployment? the project is great but the teaching style is !== great.

@arunbm123 Год назад

Great video to learn concepts which is this VScode theme?

@manolo_ai Год назад

Good stuff man! How would you deploy this? Do one on that!

@abuhossain4274 Год назад

nice lesson sir.

@luistapiero2826 Год назад

Hola muy buen video !!!! tienes algun curso o que rutas recomientas para empezar con la programacion? gracias !!

@carlosv.3351 Год назад

Hey Ed, in order to see the IntelliSense when importing your files you must have the file you want to import open otherwise it won't work. Thanks for the video

@alinionutraileanu7887 Год назад

it worked your way . Thank's !

@eshw23 Год назад

Love fullstack apps!

@Dr.mandell Год назад

☝🏼✍🏻

@shreyanshtiwari5736 10 месяцев назад

As a newbie as well as enthusiast I just wanted to know about the reliability and scope of stripe for backend I mean i have learnt about whole MERN and built some projects too but i just wanted to know that whether it is right to trust on this stripe thing or carry on with my node and express only ??

@AtoZshow115 8 месяцев назад

working along with this tutorial, it seems good so far but a bit of advice for the future. Test the code more often, I have went 1:21:53 into the video before testing anything that i have written and now have to essentially go through all of this and find the errors

@davidt510 6 месяцев назад

@AtoZshow115 - I'm in the same boat right now. Getting this error: export 'cartReducer' (imported as 'cartReducer') was not found in './state' I've checked the complete code on Github as well and there is no 'cartReducer' within the /state folder.

@thegardomon2348 Год назад

hey, I was 1:24:00 of the video and I tried opening my website and checking if everything works, but the shopping cart isn't opening, I looked for the problem and it shows "at onClick at Navbar 72" I don't know what to do, I keep rewatching the video trying to find my mistake and can't find it.

@MrPghs2kid Год назад

noob question here but what would be the terminal command to restart the localhost server after restarting vscode/computer?

@cynthiachiang8320 Год назад

Hi Edroh , thanks for sharing, I learned a lot logic from your idea, is it any way to show host this website, which method you think it is possible ? 😄

@MichaelMartins-vq8gz Год назад

An amazing video but won't advice a newbie to use cause its a bit complex and would just confuse them. But a good tutorial👍

@himayukhan4659 Год назад

Unable to download strapi package, lots of errors are coming.. Any solution?

@dmaberlin Год назад

do you think it makes sense to repeat other people's video projects if you are already more or less pre june? but if I like to repeat other people's projects on videos, especially on videos in English.. How to get more out of it?

@abbaskareem5281 Год назад

Awesome🔥 I hope you make big project like this with next js

@idynxcode5744 Год назад

Please include Typescript in your every project. Thanks

@ShivamSingh-ld3qf Год назад

I tried to deploy it but my backend data is not showing what to do ?

@thaynethetigerbarnes 9 дней назад

I am struggling commiting this to github sees it a submodule, so i remove the .git file in the client folder, then it worked just fine, then on my next commit it wont stage the changes made in client folder at all no cli commands worked period. should I use it as a submodule?

@nargesmohammadzade6554 Год назад

this video is great. thank you so much. what's the name of extension that you mention it?

@KennethHKristiansen75 Год назад

Tried to follow this awesome tutorial, but I get 1000 error messages just by installing strapi?? Is there something I need to do before I install this?

@zte185 10 месяцев назад

But how do you show the stock in each product sold?

@morokammopane3910 3 месяца назад

Hi guys, just finished the setups and now im thinking, i haven't seen him create a github repo and deployment for cd/ci. will he do that as the video continues and should i just do it myself?

@davidt510 6 месяцев назад

export 'cartReducer' (imported as 'cartReducer') was not found in './state' ??

@cristianvargas2257 Год назад

Please go over deploying if you can!

@subhranshudas8862 Год назад

How do you create 1 time payment and subscriptions payment in the same app?? thanks!

@cjs4912 7 месяцев назад

this is considered JAMstack application as it is using headless CMI (Strapi) right?

@dmitruz1900 10 месяцев назад

Hello. Can I go back latter to Strapi dashboard and add more items, price and descr?

@hishamkhan4913 Год назад

Hi edroh ... My problem is how to get storage for storing real images and use them in client side At production

@hamzabadii3575 Год назад

I love the strategy you work on code it's so beautiful my friend you code the Js first and after the content on website like lines but the CSS is difficult but it's nice do more projects with credit card and payment for another ideas 💡

@qAntBcn 10 месяцев назад

I wonder why not use the zustand instead of redux stuff... Is any particular reason for this?

@hamzabadii3575 Год назад

One question my friend why you don't do navbar.css why inside the jsx