🔥 E-commerce Website Completely from SCRATCH with Material UI | React

[@pedrojunior4516]

Adding topics with their specific time in the video description would help to go back and revieing an specific topic.

[@Grepsoft]

added. Please see description.

[@pedrojunior4516]

@@Grepsoft Thank you.

[@Shakeel714]

You are great teacher -- straight forward, to the point. Learning important concepts of MUI and React during this video. Thanks for sharing your knowledge

[@Grepsoft]

Thank you. Please like and sub for more great content

[@WildHowlYT]

Amazing project! Material UI seems kind of hard to understand at first, but once you get used to it, you won't build another React project without it haha :)

[@Grepsoft]

That is so true

[@hiba_computer_federal_HSSC]

@@Grepsoft {matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@__PRIYANKABHAGAT]

can you tell if it's responsive or not?

[@sdfsfsfd437]

💯💯💯👍💛 great video!!! Many thanks!!

[@narayanadevarapu8083]

Thank you so much for this tutorial, I learned a lot. Coded along with you. Understood the importance of structuring the project. Got a good glimpse of Material UI components. Once again thank you 🤟 keep publishing this kind of detailed projects.

[@hiba_computer_federal_HSSC]

{matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@marjanrezvani7820]

Thank you so much for this excellent project tutorial

[@testify7228]

Great👏 man

[@harunabello503]

Amazing tutorial, please keep making more tutorial on MUI

[@sunithat6771]

looking cool, thank you very much

[@riamahmed7019]

wowwwwwwwww. just an awesome,unique and many things included this videos. I loved this. No one shows like you how to use MUI. Thanks. Requesting make another video where you'll show also dashboard how should design using mui v5.

[@Grepsoft]

Will make a dashboard, stay tuned :)

[@danielraducu9073]

love it !

[@alexsandromartins6073]

awesome bro I really enjoyed your tutorial , tks🔥

[@pedrojunior4516]

Great tutorial!

[@kamalmd.mostafa7598]

Awesome but hard to understand everything. If Possible make one using built in component and customize on it simply. Thanks. Waiting for next videos, hope will come soon.

[@Grepsoft]

Sure, any suggestions please?

[@PhamacThangph]

good lecture

[@surendrawagle1896]

Awesome tutorial... 👍👍Can you also please create tutorial on creating advanced dashboard using material ui 5??

[@Grepsoft]

Yes, I am already working on it and as soon as I am finished will be released. Stay tuned!

[@Grepsoft]

kzbin.info/www/bejne/aGK2o6WtgN2YeKM

[@shubhamgore4320]

Thanks for this excellent project tutorial ... but I have one request when you make tutorials please increase the FONT SIZE of VsCode ... it is really hard to code along with watching tutorials.

[@Grepsoft]

noted, will adjust the font size.

[@pasindudinushamadushan6983]

awesome . from Srilanka

[@Ks-oj6tc]

Thanks bro, wonderfull

[@Grepsoft]

My pleasure

[@guilhermewilly8916]

top amigão!

[@micaiahwambua1885]

A great tutorial, keep up! Anyone getting an error after wrapping the MyList in the actions function with a the Component? Any help?

[@micaiahwambua1885]

I figured it out, a careless mistake

[@Factvideo014]

Sir on middleDivider why you use backtick at end🤔

[@Grepsoft]

It’s a template literal

[@haroondeveloper]

make make more project sepacialy with material ui and react router plzplzplz i will wait for it sir u r so great mentor

[@haroondeveloper]

please dir make more projects on material ui

[@slohning]

I am finding extreamely interesting, although I am having some difficulties as I follow along. At the creating the appbar mostly works but when I adjust for mobile size I get the actions floating over the top not moving to the bottem as you show. Any ideas where I should look to fix this proble.

[@Grepsoft]

Can you please share the media query you are using?

[@hiba_computer_federal_HSSC]

{matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@MrMike44v]

interesting, but why would you make separate page for mobile , when in react you can customize it for desktop and mobile?

[@Grepsoft]

This is just my style since it keeps things separate and easy to manage but you can combine of you prefer.

[@estebansat]

Thank you so much for this tutorial, I've learnt a lot. Hopefully you make more in the near future. Just one questions, does anyone know why src is not working unless I use a variable? I mean, if I do: *import picture from "path"* and then ** the image will show. However, if I just paste the path on the src, like * *, the image will not show. Why is this happening?? Did I miss something?

[@Grepsoft]

You mean you are hard coding the path?

[@estebansat]

@@Grepsoft No, I want to use relative or dynamic path, just as you did in 1:02:58 ( * * ) but the image does not show and I get no error. However, doing *import banner from "./images/banner/banner.png"* and then including this *banner* in the source ( *src={banner}* ) it does work. Does it make more sense now?

[@Grepsoft]

@@estebansat try with ticks e.g. BannerImage src={`${picture}`}

[@hiba_computer_federal_HSSC]

{matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@adminzaappy8098]

Great session and thanks for that. One question: what about the backend. how to do connect this to a backend. is it possible with wordpress ecommerce. ?

[@Grepsoft]

definitely possible. WC has an api and you can easily call it to fetch products, pricing and more woocommerce.github.io/woocommerce-rest-api-docs/#products

[@adminzaappy8098]

@@Grepsoft : why dont you create a video which shows how to connect it with WC. Thanks advance. Or any video you can advice.

[@Grepsoft]

@@adminzaappy8098 check this out kzbin.info/aero/PLD8nQCAhR3tQ5GvL6zkPb-ASbvgTiCiUb

[@hiba_computer_federal_HSSC]

{matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@Grepsoft]

are you sharing the correct code? You are using the ternary operator the wrong way. It should be like this: condition ? do this when condition is true : do this when condition is false.

[@hiba_computer_federal_HSSC]

@@Grepsoft yeah fixed it. thankyou :)

[@-thepighunter2819]

Does it have backend Please tell all the techs used in this project

[@fuukowatty9817]

2:44:24 - Should be FullPageSearch not AddingDrawer

[@manikantabalaga3255]

suuuuuiii 😆

[@rogerjohnson8344]

awesome tutorial

[@AnissaLopez93]

Hi! Where is your video linking the animations?

[@Grepsoft]

Please see my channel. I have videos on animation.

[@lewisnt_]

CANADAAAAAAA

[@deprasmahaputra6235]

please someone explained why my code error in AppbarDesktop " export default function AppbarDesktop ({ matches }) . how i can solve for ({ matches }) can works ?

[@Grepsoft]

what is the error?

[@deprasmahaputra6235]

@@Grepsoft can't works to see the result, it's because i use typescript?

[@Grepsoft]

@@deprasmahaputra6235 without looking at code, I would say probably.

[@deprasmahaputra6235]

@@Grepsoft may i contact you from your social media ? I will send you the screenshot

[@Grepsoft]

@@deprasmahaputra6235 sure

[@Factvideo014]

Sir on last I not understand I am using navlink for product detail page u doing complex 🤔😕

[@Grepsoft]

Hi, why is it complex?

[@Factvideo014]

@@Grepsoft sir really I not understand on modal and useCallback

[@bijendernagar15]

awesome tutorial sir pls increase the font size of vs code

[@Grepsoft]

sure, will remember :)

[@branden8915]

Why do you separate your styles out into a different folder? Why not just leave them in the file

[@Grepsoft]

This is just my style but you can definitely do that. For large projects it's good to split items by functionality into separate folders.

[@lehuynh7637]

can you build backend for this project?

[@Grepsoft]

What kinda tech stack you prefer?

[@abhishekcode]

Upload mern curd operation from scratch

[@smartjefreycoca5425]

make a tutorial for User Management System using React and Mui

[@Grepsoft]

Sure I can make

[@hussamuddin1604]

subscriber #955

[@hiba_computer_federal_HSSC]

{matches? :Desktop} function AppBarDesktop({matches}) { return ( AppBarDesktop ) } how AppBarDesktop content appeared in AppBar without calling it? someone help please.

[@riamahmed7019]

after the full video watched , I feel like its more complex, you are using everything custom. So, why need to use MUI? you didn't use Build in component Appbar,....anyting. Its really hard to understand and need much much time to do something. Sorry.

[@Grepsoft]

My goal is to teach you how to customize everything. I can make a basic video if you want.

[@riamahmed7019]

@@Grepsoft Sure, I want .please make one for us.

[@muneebmalik_8]

can you provide me the source code

[@Dulaat_e_deen]

where is sourcce code

[@Grepsoft]

It’s somewhere

[@overunityinventor]

The title of the video should be "How to do transition from HTML/CSS to MUI in React", because you are not using full potential of MUI, you are just using MUI components but for styling you are using custom CSS.

[@Grepsoft]

Can you please make a video showing full potential of MUI. This will benefit us all :)

[@overunityinventor]

@@Grepsoft i can't, i don't have video recording setup, youtubing is not my aim, but i can make a document, and infact there are already a lot of documents on this, if u Google.

[@overunityinventor]

@@Grepsoft if you are fond of learning by videos, I have found a good video here, which shows to use the full potential of MUI, please watch it here -- kzbin.info/www/bejne/nKvbdnh5fdOmrLc

[@Grepsoft]

@@overunityinventor i see

[@fayzullo007]

24:03

[@mohtasham1]

sounds like Ronaldo is speaking .

[@Grepsoft]

😂

[@kashafudduja_17]

Material ui is not working in my project i have downloaded npm install @mui/material @emotion/react @emotion/styled but still its not working in my project

[@Grepsoft]

what error are you getting?

[@kashafudduja_17]

@@Grepsoft There isn't any error but the result on Web page is showing like I wrote an html code

[@Grepsoft]

@@kashafudduja_17 can you check package.json to see if mui is ineed there? Also check browser console for any errors.

[@kashafudduja_17]

@@Grepsoft mui is installed in my project but the font is not changing neither the color of button is changing i have installed montez font also but it is not working