Creating an Impressive Ecommerce Website with React JS, Firebase, & Stripe.js

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

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

50% 1

Welcome to my channel, your ultimate source for mastering the art of Creating an Impressive Ecommerce Website with React JS, Firebase, & Stripe.js from scratch. I will walk you through the process of building an impressive e-commerce website using these modern tools and technologies. From setting up the project to deploying it live, I will cover every step in detail. This tutorial is perfect for beginners who want to learn how to create an e-commerce website with React JS, Firebase, and Stripe.js. By the end of this video, you will have a solid understanding of how to create an e-commerce website from scratch and be able to confidently build your own projects. So, grab your laptops, and let's get started!
🛒 What You'll Achieve:
Learn to build a fully functional online store from the ground up.
In-depth tutorials on React, Stripe Checkout, TailwindCSS, and Firebase.
Expert insights and best practices.
Stay ahead of the curve with the latest web development trends and techniques.
Stay in the loop and keep your skills sharp by subscribing to our channel today! Explore the future of web development and embark on your journey to create a state-of-the-art e-commerce website.
#ReactProjects #ReactJS #development #webdesign #ReactjsEcommerce #Stripejs #StripeCheckout #StripePayment
🕐 TIMESTAMPS:
0:00 - Introduction
0:10 - Project preview
1:10 - Creating the project using npx
3:50 - Setting up the VS code environment
6:21 - Tailwindcss setup
11:55 - Creating Header Component
24:40 - Creating Banner Component
25:20 - Creating a custom Slider
28:50 - Configuring react-icons
35:45 - Creating Product Component
35:55 - Creating Footer Component
51:20 - Setting up React-router-dom
52:40 - Creating Dynamic Layout
57:20 - Creating API to fetch product data
59:00 - Passing product Data using loader from react-router-dom
1:02:25 - Creating ProductCard Component to show the products
1:24:40 - Creating Dynamic product Info page for each product
1:39:32 - redux-tookits configuration
1:41:55 - Creating Slicers and implementing that using dispatch
1:56:19 - Configuring React-tostify
2:02:23 - Creating Cart page
2:26:20 - Configuring redux-persist to save the product in real-time
2:30:20 - Creating Login Page
2:34:26 - Creating & Configuring Firebase app
2:38:35 - Creating Google login & logout method using firebase
2:56:25 - Implementing Stripe Checkout for Payment
3:00:15 - Creating Backend Server to configure Stripejs
3:11:50 - Testing the payment method
product data: fakestoreapi.reactbd.com/

Наука

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

15 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@shiccorama Год назад

Thank you so much for this perfect Tutorial, you have made my day.

@reactjsBD Год назад

You are most welcome dear. You comments also made my day. Those little things make a lot inspiration to do something more.

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

Thank you ❣️

@ratnaakter5358 Год назад

You are great sir ❤️❤️❤️

@reactjsBD Год назад

Thank you mam

@skyrosa Год назад

put webkitMaskImage: 'linear-gradient(to top, transparent, rgba(0, 0, 0, 1))' at the style of the banner to make it transparent at the bottom to have a prettier transition effect

@_BEC_Adarshpandey 5 месяцев назад

awesome bro

@codewithtoyin Год назад

Wow. Thanks so much for this i really needed the payment checkout with stripe video. Subscriber += 1 😅

@reactjsBD Год назад

You are most welcome.

@hafizehtisham7534 Год назад

Hey, I really wanna thanks to Yuh ...Its something that I was looking for and Yuh made it at the right time ... I really learnt a lot from it ... May GOD bless Yuh ... Keep smiling sir!

@reactjsBD Год назад

Thank you dear and stay tuned for the next one which is coming very soon.

@hafizehtisham7534 Год назад

@@reactjsBD ... Please do make responsive projects this time ...

@reactjsBD Год назад

@@hafizehtisham7534 Sure dear.

@Brlitzkreig Год назад

Yuh very grateful lol

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

please sir can we get the sorce code@@reactjsBD

@mikgizachee7098 Год назад

Best video by far thanks brother 🤩, from Tigray, east africa

@reactjsBD Год назад

You are most welcome brother.

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

@@reactjsBD please make this project responsive

@pankajgupta-tm2gc Год назад

It would be a very helpful for us, if you will provide assets also or github link from where we can use them. Great video and your way of teaching is very good.

@user-sy3pu6se8r 28 дней назад

do you have this code?

@fallanstar Год назад

I really Need of it thanks sir

@reactjsBD Год назад

You are most welcome fallan star.

@iabhishek Год назад

the fun fact about coding is how a 3 hour tutorial finishes in 3 days

@reactjsBD Год назад

That's right brother.

@Sanjaykumar-ts1gb Год назад

@salahaldinedouard5299 Год назад

wow Noor you have Quick become a favorite teacher on RU-vid Maashaa Allah Is there a way i can donate to you brother ?

@reactjsBD Год назад

Thank you so much for your compliments. You can donate me by buying me a coffee: www.buymeacoffee.com/reactbd

@virajkoradia7468 Год назад

Nice explanation i had completed the tutorial and made the project 😎😎😎😎❤❤❤❤🥳🥳

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

can you please provide the source code?

@Ali-in6yn Месяц назад

"src= {product.image}" is not working in Productscard component . "TypeError: Cannot read properties of undefined (reading 'image')" can you help me with this

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

@@Ali-in6yn make the product?.image

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

@@tosinibiwoye3959 updating it brother cant share right now

@Ali-in6yn Месяц назад

@@virajkoradia7468 let me try, Thank you viraj

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

please make an video for responsiveness of this project

@salahaldinedouard5299 Год назад

salam Noor I know how to update the cart quantity in the navbar icon when I add the same product more than once . Can you please tell me how did you do It

@SamStroyy Год назад

where i can found the images you used ?

@Ali-in6yn Месяц назад

@Noor Mohammad, "src= {product.image}" is not working in Productscard component . "TypeError: Cannot read properties of undefined (reading 'image')" can you help me with this

@MorganWager-zz4dr 10 месяцев назад

hey, at 26:44 how did you generate the url for banner images in array

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

How do you find the photos for Ecommerance projects? Is there a video explaining this?

@lucasleon4362 Год назад

Hi! After creating the Dynamic Layout, another Footer is created again, and it remains duplicated, how can I fix it? I followed each step of the video and it's still the same. Thanks!

@ChristoferAlves Год назад

Where can i find the different logos?

@adhdmed Год назад

Salaam Noor, can you please provide link to GitHub repo for the front end?

@sektorrr Год назад

This is not responsive, how do I make it run on smartphones?? PLEASE HELP!!!

@JhonHFA Год назад

amazing tutorial! can u give git source?

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

how do i get he images ? i tried using the link provided but not showing images

@ZorigooSWAGxD Год назад

how can i get pictures?

@anshgoyal3671 Год назад

Hello sir all working fine, but in my stripe dashboard, payment status showing incomplete

@Gustav-dev Год назад

cool content It would be great if you add subtitles in the video please. thanks for your knowledge

@reactjsBD Год назад

Sure bro. It will be added in the next video onwards. Thank you for your response.

@hasibulhasan6500 Год назад

@@reactjsBD i have a problem . const productDatas = useSelector((state) => state.bazar?.productData) console.log(productDatas) i can't get any data.code is same

@reactjsBD Год назад

@@hasibulhasan6500 First check the state by doing console.log(state) and also make sure the name you give to you reducers.

@yashwardhandwivedi2781 Год назад

How can i add new products ?

@AmitSharma-xv1jf Год назад

At the time 1.03.00, I am getting an error that I am unable to add photos. Can you help me, please

@merlinpraks1788 Год назад

Source code will be helpful. Some things are gone through so fast. Very difficult to follow.

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

Dear Sir, it's a great learning project for me. But my Stripe payments are not working. Can you please me?

@FahadKhan-cr9gb Год назад

sir icons??

@aditya8raj Год назад

At 1:03:00 , if you are getting errors to display 20 ProductsCard then put a '?' before the '.' like this: {products?.map((item) => ( ))}

@reactjsBD Год назад

Yeah I got your point. Thank you borther.

@AmitSharma-xv1jf Год назад

Brother I am also facing the same problem but after lots of time checking the error I am unable to solve the error can you help me , please

@jatin97801 Год назад

I am also getting same error can you help me brother

@aditya8raj Год назад

@@AmitSharma-xv1jf Copy paste the below code: {products?.map((item) => ( ))}

@aditya8raj Год назад

@@jatin97801 I used the below code , it worked for me: {products?.map((item) => ( ))}

@maheboobpatel573 Год назад

where is the admin panel to handle the products

@ektuhaso Год назад

sir first of all thanks for this beautiful tutorial , sir i am requesting you to please provide the information how to deploy this web application

@reactjsBD Год назад

You are most welcome dear and you can follow this video to have your free full functional e-commerce website and how to deploy it in vercel here - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_JluE_1oGnI.html or follow along this video to get full understanding of deploying reactjs or nextjs application - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GqAVT84-XwY.html

@ektuhaso Год назад

One doubt sir , sir this particular tutorial consists of technologies like react js stripe and firebase , so sir will the before video link will work for deploying a application with react stripe and firebase?

@bhushanbhale3309 Год назад

can u please check responsiveness of this website....... I think it not responsive

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

Great video and i even understand that you don't wanna give out the source code but change your FONT please!!!.

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

Does the code work completely fine?

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

What can be done to get the source code of this project?

@elkanaliman-wj2us Год назад

I am here again. Thank you for your job. I have a query. What if I wanted to use another api of the same function but different parameters, like I want to pass some other data other than products data from the fakeapi. Keep in mind that loader data in the app.js has been initiated. How can I do so?

@reactjsBD Год назад

You can do it by initializing another async function in your api in a different name and then passing that to loader data in the same or different parameter.

@hetchap6976 Год назад

How to change the product according to your wishes?

@Ali-in6yn Месяц назад

Please make part where we can add new product and also edit that , thanks

@prince-mq7np Месяц назад

Yes please @noormohammad

@shivanshishukla657 Год назад

can anyone tell me from where we can get the images

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

where I can find the assets?

@davidkelly156 Год назад

Add a search feature

@fahmidurarnob2470 Год назад

where can i find all the assets???

@k.m.al-amin6200 Год назад

If you provide the source code that will be very helpful ❤❤❤

@derposaurus1421 Год назад

Hello. Thank you for the tutorial! I do have a question though. I get this error for the Product.js page: "React Hook useEffect has a missing dependency: 'location.state.item'. Either include it or remove the dependency array react-hooks/exhaustive-deps." I have tried researching how to fix this error because I think it is causing my app to be in an infinite loop. How do I fix that? Thanks again for the video!

@derposaurus1421 Год назад

Just as an update, I tried one solution I found which was to add "// eslint-disable-line react-hooks/exhaustive-deps" inline at the end of the useEffect. I am pretty new to all of this but it seems to be working so I am going to run with it for now.

@sankaranarayanankm7049 27 дней назад

Where can i get the images

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

At 25:46 why aren't my banner inages not showing

@odogwu-1918 Год назад

please for you next tutorial project. Can you help us put time stamp. I am already suffering looking for how you implemented firebase

@reactjsBD Год назад

Sure buddy I will do that and stay tuned because walmart clone is on the way.

@thearcadiusproject Год назад

I am getting an error for the useState in src/components/Banner.js: 'useState' is not defined // I would appreciate if anyone could share. Thanks you.

@shiccorama Год назад

same happened to me, in a mysterious way it works fine when I changed the component name from (banner) to , for example (carousel) or any other name. try it and give me your feedback.

@Harishcoder Год назад

Can I get github code for this?

@IFLIXIN Год назад

Link to download assets

@jeremyashley1668 Год назад

I had issues with deploying. is there another video explaining that or walking us through it?

@reactjsBD Год назад

Where are you willing to deploy your website? Vercel or any other platform?

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

how can i do it in vercel please@@reactjsBD

@moseskoroma6092 Год назад

Please add admin panel

@mohamed.z6219 Год назад

Can you provide the source code, please

@okanece579 Год назад

Hello sir can you help me? I am getting an error like You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary prop on

@reactjsBD Год назад

It could be because of the router setup. Try to set up the layout & routes again.

@indiasbhushan986 Год назад

Responsive?

@invinciblevikas9553 14 дней назад

sir , when I am entering my card number details after proceed to payment then the card number goes without spacing which does not making me payment . how to solve this issue

@reactjsBD 12 дней назад

Need to see the code you have been written to debug this issue.

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

is that responsive website

@SukhdeepSingh-tb1vl Год назад

how can i add my own products for my business website not fakestoreapi

@PlayWithAyaan Год назад

He made frontend you can make backend

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

1:51:39

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

anyone has the source code?'

@haiffy Год назад

Before I start following the tutorial, I want to ask, are the tools used in this vid completely free? Firebase, stripe, etc.

@reactjsBD Год назад

Yes, all the packages is free.

@EbrahimKhan-bj2ds Год назад

Is this project code available?

@reactjsBD Год назад

Yes

@sudhanshugautam425 Год назад

make tutorial for food delivery website using react

@reactjsBD Год назад

Sure I will after finishing my current one.

@sudhanshugautam425 Год назад

@@reactjsBD I am trying to replace these products with food products so can you please provide me good api for that

@reactjsBD Год назад

@@sudhanshugautam425 I will add that api by tomorrow on my page. Visit- jsondata.reactbd.com/ to get it by tomorrow.

@BilalAli-eh9no Год назад

Source code please

@dantrrrrr Год назад

but when i access single product with the link it dont have state and show errror , how can i fix this sirr ?

@reactjsBD Год назад

If you are trying to use single product from the array of products then you need to destructure it first and only then it will work.

@dantrrrrr Год назад

@@reactjsBD i still have no idea abt that , sorry sir . i mean when i access the single product page with the url like "localhost:30000/product/product-1 " it don't have the state from home page ,and it show error .how i can access with the url of single product without any state from homepage

@reactjsBD Год назад

@@dantrrrrr Ah okay I got you. For that you need to pass the product as props for the page you are going to view and the page need to be dynamic. It's like when you click on that product, all the product related info for this product need to pass by using the router. Just make sure to see the video portion where I have done that.

@dantrrrrr Год назад

@@reactjsBD thank sir

@reactjsBD Год назад

@@dantrrrrr You are most welcome

@UnKnown-id7ih Год назад

did we need to provide bank details to active payment in stripe? please reply I'm waiting

@reactjsBD Год назад

For real payment you need to provide the card details but for my application you can use the default stripe test card details to save the purpose.

@UnKnown-id7ih Год назад

@@reactjsBD after making payment it is showing this error "Uncaught runtime errors: × ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (localhost:3000/static/js/bundle.js:129237:14)"

@UnKnown-id7ih Год назад

@@reactjsBD and also my stripe account payment section is empty

@UnKnown-id7ih Год назад

@@reactjsBD this is the server code const express = require("express") const app = express() const cors = require('cors'); app.use(cors()); require("dotenv").config(); const port = process.env.PORT; const bodyparser = require("body-parser"); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({extended:true})); const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY); console.log("hello") app.get("/",(req,res)=>{ res.send("Hello world"); }) app.post("/pay", async (req, res) => { try { console.log(req.body.token); await stripe.charges.create({ source: req.body.token.id, amount: req.body.amount, currency: "usd", }); // Payment successful res.status(200).json({ message: "Payment successful" }); } catch (error) { console.error(error); res.status(500).json({ error: "Payment failed" }); } }); app.listen(port,()=>{ console.log(`server is running on port ${port}`); })

@UnKnown-id7ih Год назад

@@reactjsBD please reply

@FahadKhan-cr9gb Год назад

give the icons link

@reactjsBD Год назад

For the icons you can use react-icons brother.

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

40:42

@lancetv4826 Год назад

Sir can you create a tutorial instead of using Fake Store API, we use data from Firestore and perform CRUD operation?

@reactjsBD Год назад

Sure I will create with Firestore and MongoDB database very soon. Stary tune.

@shreyaverma5276 Год назад

is it responsive?

@UnKnown-id7ih Год назад

@entertainmentadda4849 Год назад

Wow amazing... Code please 😇

@sahilmantri5731 Год назад

stripe payment is not showing

@UnKnown-id7ih Год назад

did u solve this problem?

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

how did you get 3 MdOutlineClode in just one times you write

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

because he is using map when you add 3 item in cart then you will see three MdOutlineClode icon

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

thanks@@CodeGeekStudio

@Ankit-bd9zp 6 месяцев назад

Can we get the source code for it

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

i have client side source code

@mohammedhassan-kx2yf Год назад

its very difficult following alone without access to those images, i think you should hvae provided them

@reactjsBD Год назад

Images you will get from the api. plz link from here - fakestoreapiserver.reactbd.com/products or visit: jsondata.reactbd.com/ for more similar data.

@mohammedhassan-kx2yf Год назад

@@reactjsBD how about images like logo and the images used on footer? Please

@reactjsBD Год назад

That's a custom logo. You can keep your logo on it or any suitable photo along with it brother.

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

This is not responsive for all devices please make this responsive

@breathmadrid9823 Год назад

give me your github link sir

@reactjsBD Год назад

sure. github.com/noorjsdivs

@titaschowdhury8860 Год назад

Can you provide source code??

@annoniimous Год назад

yes, sir!! it 'll be very helpful if u can provide git hub repo of this project

@UnKnown-id7ih Год назад

please don't copy paste code it is hard to understand and follow along with you .

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

This video is giving error at 1:3:00 sex

@UnKnown-id7ih Год назад

sorry to say but most of the time you are copying pasting the code which is not good for beginner to follow your tutorial but this video is good.

@reactjsBD Год назад

Maybe it's because for the time management. Apologies for that. Feel free to see my new amazon clone video where no copy paste present - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vviFia-Stqk.html

@prince-mq7np Месяц назад

Please show us how to add new product and edit it. @noormohammad