Build a FULLSTACK React Ecommerce App that is fully Responsive with Stripe Payment
HTML-код
- Опубликовано: 2 июн 2024
- 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 
Наука
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
thanks a lot.....friend ! I'll see all...
youre doing great.. keep up the god's work
Thank you! i want to see a e-commerce website built with next 13.
Do you have a discord server?
Make netflix clone
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
You put more detail into explaining concepts instead of spamming us with code, I am very grateful for that!
This is fantastic application, just what I have been waiting for
Thank you Ed! I appreciate you putting this all together and sharing it with us.
This is the perfect react-redux e-commerce project for your resume, and thanks a lot ed roh!
have you ccomplete this
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 ))))))))))
Ed you really rock without putting unnecessary deversion, i am thankful to you...
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!
Done!
Many moons later😆
Another top notch professional tutorial building the ecommerce website.
A fantastic effort to make this the best video tutorial ever. Legend.
Another great project tutorial. Thanks Ed!
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
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
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 ?
Did you ever manage to deploy?
Special Thanks for having no disturbing ads
Bro i really appreciate your content. Keep going 🔥🔥🔥🔥
Amazing, you are the best!. Thank you for all this hard work
very easily the best e-commerce video resource i ever came across
Beautiful explanation...Loved each and every minute. Thank you
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 .
I really enjoy these long form build apps, :)
Your are great and so kind for everyone via providing such enriched contents to us.... we all are thankful to you!
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 =)
@@user-pg8ud3ce2m oh boy do I have questions lol
I wanna try to figure it out on my own before asking for help =)
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
You are such a great teacher, keep it up!
Amazing one bro 🥰🥰loved your content and style of coding
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.
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?
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 :)
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 ?
@@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.
Love getting notifications of new videos from you in the mornings!
always a pleasure!
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 :))
Have you been using it in production, yet? If so, what's your experience been?
@@_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.
@@EricShans Awesome! Thanks for the reply!
@@_Zepp_ no problem! have you shipped it to production yet?
@@EricShans Nah, literally just started haha. Seems like a very good walkthrough, though.
Awesome video, please make a second series with one of your fancy frontends ;)
God bless you Ed, thank you for changing our lives.
Loving this app so much!
as always amazing bro😁
Hi im from France and I follow ur tutorial is very clear and helpfull Thank you sir🙏
The best, good job man)
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 RUclips 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.
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!
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 ?
You are legend! Thank you so much!
Thank you for this video
Congratulations
You did a great job
please try to include typescript too it'll be really helpful and thanks for this amazing tutorial
It's Brilliant, I love the video
i wanted to say thanks because i am beginner but this channel help me to become expert
Great work !
cool stuff man. Thanks alot
Great stuff, thank you so much!
man you on another level
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
Fantastic app Mate!
Hey ! Amazing build ! is it possible to show how to retrieve the costumer billing information when filling the form? Thanks
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
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 ?
Just go get your own ımages. it is not necessary to get the exact same images
@@anmolchandra8370
A masterpiece tutorial. This video is full of knowledge and boost your skill at least by 30%. Thanks a lot!!!!
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
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
@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.
To acces the URL of image you have to replace line 19 to 28 of Item.jsx by :
const {
data: {
attributes: { url },
},
} = image;
god bless you!
Saved my Soul! Can't thank you enough!
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.
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.
Ed is the type of guy that make the world a better place by helping others
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.
@@qAntBcn Bro, are you okay ??
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.
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👍
Great video! Wont gatsby or nextjs be more suited for a e-commence application such as this one?
you are the best, thank you soooo muchhh
Thankyou Ed !
Great tutorial
thank you, great content
Great stuff
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!
will you do a continuation of this project by adding user validation and authentication as well as updating the user profile?
@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.
@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.
Great video! Any chance for Typescripts projects in the future
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!
Wow great bro thank you
@EdRoh Please can you make a short video on how to deploy the Strapi back-end for this application?
Hola muy buen video !!!! tienes algun curso o que rutas recomientas para empezar con la programacion? gracias !!
nice lesson sir.
Good stuff man! How would you deploy this? Do one on that!
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
it worked your way . Thank's !
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 ? 😄
Awesome🔥 I hope you make big project like this with next js
Love fullstack apps!
☝🏼✍🏻
Please make Part 2 of this video fixing the errors and adding additional functionality..It's been 8 months..I tried donig it myself but as a beginner I couldn't.
Great video to learn concepts which is this VScode theme?
Please include Typescript in your every project. Thanks
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 ??
this video is great.
thank you so much.
what's the name of extension that you mention it?
Please go over deploying if you can!
why when you post the project on github on file checkout and server you create localhost2000 how i can understand
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
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.
Thank you for the video! As its my first react project I am having some trouble though. Can you tell me how you got the backend images in your client images folder? I can't seem to connect the back-end and front-end, so I have to start again I think
This looks dodge ??? @edrohdev
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 ))))))))))
Good stuff and thanks
you are welcome!
hey can you solve this error
3:50:24
This expression is not callable.
Type 'typeof import("stripe")' has no call signatures.
@@EdRohDev
noob question here but what would be the terminal command to restart the localhost server after restarting vscode/computer?
beautiful tutorial, one question: this project can be used in production? Can be indexed by google ? can i add products in google ads ?
@@forhelpwhatsapp4295 i dont understand
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?
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?
This is a nice tutorial.But please when u are coding you can show the build as the codes take effect.Thanks.
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 .
Unable to download strapi package, lots of errors are coming.. Any solution?
Any chance you will revisit this just the explain the deployment process with strapi? It has been difficult figuring out how to deploy the backend of this project.
did you figure out how to deploy?
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 .
@@artinfarmani5829 I had to comment out the regex part and it worked
@@artinfarmani5829 I also encountered the same issue. I believe it is because the 'item' prop that was passed down was still empty as the async function is still fetching the data. What I did was to add a condition to it.
{category && category
.replace(/([A-Z])/g, " $1")
.replace(/^./, (str) => str.toUpperCase())}
@@CodingLiv did you manage to deploy?
Hi edroh ... My problem is how to get storage for storing real images and use them in client side At production
1:05:51 why did he wrap the zIndex ina curly braces? Before he used single quotes. Now curly braces. What difference does it make?
I don't know... seems You read in my mind: dream stack... many thanks!!!
same, love this stack!
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?
I tried to deploy it but my backend data is not showing what to do ?
Cool project. You could do it with typescript. thank you very much.
will consider doing typescript in the future if enough people request!
And thanks for great project
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?