React & Node Tutorial For Beginners – Build MERN ECommerce Website 2022
š Website Demo: https://amazona.onrender.com/
š Source Code : https://github.com/basir/mern-amazona
š Questions : https://codingwithbasir.com/questions/ask
š„ Get Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90
00:00 Introduction
00:03:31 01- What you will build
00:09:53 02.1- Install Tools On Windows
00:15:07 02.2- Install Tools On Mac
00:19:06 02.3- Config VS Code
00:25:01 03- Create React App
00:31:24 04- Push To Github
00:37:36 05- List Products
00:50:11 06- Add Routing
00:59:52 07- Create Node Server
01:08:50 08- Fetch Products
01:15:12 09- Manage State By Reducer Hook
01:25:12 10- add Bootstrap
01:34:12 11- Create Product Component
01:48:03 12- Add Product Screen
02:02:38 13- Create Loading Component
02:10:22 14- Create React Context
02:21:36 15- Improve Add To Cart
02:27:59 16- Create Cart Screen
02:37:47 17- Complete Cart Screen
02:48:08 18- Create Sign-In Screen
02:54:07 19- Connect To MongoDB
03:05:44 20- Create Sample Products
03:18:01 21- Create Sample Users
03:21:47 22- Create Sign-In API
03:31:26 23- Complete Sign-In Screen
03:48:38 24- Save Shipping Address
04:00:05 25- Create Sign-Up Screen
04:06:05 26- Create Payment Screen
04:12:55 27- Create Place Order Screen
04:20:49 28- Place Order Action
04:36:24 29- Create Order Screen
04:48:47 30- Pay Order By PayPal
05:03:41 31- Display Order History
05:13:45 32- Create User Profile
05:24:55 33- Publish To Heroku
05:37:40 34- Add Sidebar Search Box
05:50:59 35- Create Search Screen
06:10:11 36- Create Admin View
Part 37 and more on my Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90
YOU WILL LEARN By React & Node Tutorial – Full ECommerce in 9 Hours [2022]:
1. React Bootstrap: Semantic Elements, CSS Grid, Flexbox
2. React: Components, Props, Events, Hooks, Router, Axios
3. Context API: Store, Reducers, Actions
4. Node & Express: Web API, Body Parser, File Upload, JWT
5. MongoDB: Mongoose, Aggregation
6. Development: ESLint, Babel, Git, Github,
7. Deployment: Heroku
š„ Get Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90
Amazona extra e-commerce features: https://gist.github.com/basir/1ec5008896d19707039c2f12d0699038
#React #Node #Tutorial #MongoDB #ecommerce #Context
—
Follow me on:
š Website: https://codingwithbasir.com
š Twitter: https://twitter.com/basrijd
š Linkedin: https://www.linkedin.com/in/basir-j
š Github: https://github.com/basir
source
very nice toturial. I am having issues on commit to gitHub, it does not work I deleted the app and rebuild the app again it starter the setting on my computer. please help
Hello sir, I have a question for the deployment. Since I didn't find your backend api deployed online. How can it work after it will be deployed to heroku to interact with your api.
Oh my god, what is your native language?…….
sir can u please tell me that that u create a product screen component so does it works for all product cards? i mean like when i click on each product card does it show their detail page by that product screen code if it is like that so then how this code works for all proudcts cards .. looking for your response
What is the difference between this video uploaded to youtube for free and the one you provide for a fee?
at lesson 12 ,when I click on the product, image wont load, everything else like title, rating and price is working.
Please help me i my images are not rendering while maping image from data.js
hello mstr basir thank you for this tuto but i have a question why u don't use redux why u use usecontext ?? i am biginner
hi, does your source code in description is the completed version?
Thanks for your series, can i find the rest of the backend, please reply soon
Heroku is not free to use
From post 9 Manage State By Reducer Hook 01:15:12, I ran "npm install use-reducer-logger –force" to make it usable.
But when it comes to post 10 add Bootstrap 01:25:12, "npm install react-bootstrap bootstrap" and "npm install react-router-bootstrap" must add the flag "–force"
To fix: run "npm uninstall use-reducer-logger" and then no need to mention –force
Also to see the message you can write the logger() function yourself for logger(reducer)
logger.js
function logger(reducer) {
return (prevState, action) => {
console.group(action.type);
console.log('Prev state: ', prevState);
console.log('Action: ', action);
const newState = reducer(prevState, action);
console.log('Next state: ', newState);
console.groupEnd();
return newState;
};
}
export default logger;
long videos are kind of intimidating to watch. it would be nice to turn this into a playlist, but still going to watch this. Thank you sir Basir.
still available to get complete course?
click is a word…. kilick is an emotionš
await Product.remove({});
^
TypeError: Product.remove is not a function I get this error, anybody know how to fix it ?
I cannot run npm start (it says localhost refuse to connect on browser) after i do "audit fix", how can i fix it ?
Your tutorial is good, easy to understand. Thanks for ur video!
@Coding with Basir Sir I want to purchase your udemy course …. In that course Do you add all functionality of multivendor website ..?
@Coding with Basir sir , Is this a multi vendors project which you upload amazona project in github ?
Amzing tutorial, I learned a lot. Thank you!
I just finished part 17. When there are no items in the cart, the cart page doesn't show anything, but when I add items to the cart it works perfectly fine, and when I removed all of the items, the cart page doesn't show anything again. Am I the only one experience this? please help
you are the best , thanks a lot
got badly stuck with the invalid token issue tried to resolve but unable to do .
Damet garm Basir aziz
2:02:00
Hello basir sir ,
could you provide me admin password of this project ?
ahaaaaa <3
Hi Thanks for this video I learn a lot from this, but it seems the video is not complete since the screens for the admin are not yet finished, may ask where can I find the other videos? hope this message will be noticed. thank you!
Hi Basir – really great instructional video! Do you have a video that continues & finishes up the last chapter on the Admin view?
I'm at 17 and I'm getting an error that says:
Each child should have a unique key Prop
I'm thinking this error is contributing to the fact that when I add a new item to the cart it replace the current one instead of adding both. Any idea on how I could fix this?
hi where is the full course of this?
hey bro, i can put this project into my porfolio to pass internship react interview, is it too weird?
1:30:31
Thank you for this. Really helpfu.
My notes:
51:20 – Installation of React Router
56:37 – useParams() Hook
58:11 – Router Link
1:00:22 – Installation of Backend modules
1:06:34 – Setup nodemon
1:09:41 – add proxy from backend
1:10:36 – Install Axios
Hello,
What are the things that are in the lesson that you sell that are not here for free ?
can you tell me why you have to create an endpoint to get the paypal client id ? I found that the keys are exposed if you view the network tab on inspector. Is it better to be on env file on the frontend ?
while installin react-bootstrap its getting error
like this:
While resolving: use-reducer-logger@1.0.2
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR! peer react-dom@">=16.8" from react-router-dom@6.7.0
npm ERR! node_modules/react-router-dom
Is the course complete? Towards the end of the tutorial you said untill next lesson and the tutorial ends