React E-Commerce App Design Tutorial | React Shopping Cart UI Design
Ғылым және технология
React.js eCommerce app UI design full course. React shopping app UI project for beginners. React eCommerce website design from scratch.
Support the channel:
Buy me a coffee: www.buymeacoffee.com/lamadev
Join me: / @lamadev
Learn CSS animations: lama.dev/learn-css-animation
Learn SVG animations: lama.dev/learn-svg
Source Code: github.com/safak/youtube/tree...
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Twitter: / lamawebdev
Discord: / discord
0:00 Introduction
01:13 Installation
06:30 Ecommerce App Navbar Design
27:02 Create Pure React Slider
51:27 Shopping Categories Design
01:00:05 Shopping Product List UI
01:12:18 Styled Components Hover & Animation
01:14:42 React Newsletter Design
01:21:15 React Footer Design
01:33:20 Shopping Category Page
01:41:58 Ecommerce Single Product Page
01:59:16 React Login and Register Page Design
02:11:23 React Shopping Cart Page Design
02:36:00 Styled Components Converting Responsive Design
02:57:48 Outro
Пікірлер: 953
There is something about the simplicity in your explanations and coding style that really sets you apart and make your projects a joy to work through. Im learning so fast now thanks to you!
@ravijai6101
2 жыл бұрын
@Captain america How do I create that ECOMMERCE shown at the start.....???? (I am new to react)
You've made styled-components much easier for me and you've helped build my confidence as a self-taught. Now, over to the backend. Best teacher ever!
I can't believe this kind of content exist in the KZread. Love your calming voice and clarity. Thank you 💟
for all the people asking what shortcut extention used during the video, the extention name is 'vscode-styled-components'. found it during watching his other video called: Don't Use a Mouse Anymore! VSCode Shortcuts Tips and Tricks, which is also extremely useful and highly recommended.
@ezgi7364
Жыл бұрын
thankss
@TechnologyRelatedStuff
Жыл бұрын
you saved me from quitting the video
@dtawantawng5131
Жыл бұрын
thanks. I was wondering my code editor wasn't prompting me like his was 😅
I cannot stress how detailed and beginner-friendly this project is. I never finish any project but I spent the entire yesterday and today building this project. I just finished the project. I'm really glad about the outcome. Thank you so much, Lama. wherever you are, I wish you more knowledge, good health, more wealth, happiness, and successful life. Please don't stop creating content, and if you have the time make a udemy course because I am sure many people out there starting their coding journey will benefit from your knowledge so much.
@LamaDev
2 жыл бұрын
Hi Mariam thanks for your support. I just want to show people that they can find beginner friendly and high quality content on KZread for free. That's why I don't create a basic Udemy course. When I have enough time I'll create a life changing, real premium course that deserves your money :)
@mosescodes3677
2 жыл бұрын
@@LamaDev you have a new sub sir. Thank you so much
@usufdev
2 жыл бұрын
I really agree with this comment))
@akansharangari715
2 жыл бұрын
I also want to build this project plz share images used in this project I can't find it
@mano5529
2 жыл бұрын
@@akansharangari715 how to get the images can u help me
I knew he would deliver, thank you so much. Can't wait for the backend.
This is one of the best tutorials I've ever done! I had no idea styled-components was so useful. Thank you so much Lama!
@aakarshpal5304
Жыл бұрын
Hey man, I believe you have completed the video, but I just wanted to ask, is this only the UI part or does he also teach us how items are added into the card and other code logic?
Brother i love the way you explaining each stuffs in a calm and simple way! I really appreciate your effort and keep provide good quality stuffs on KZread!
I'm an Android developer, I stayed because your voice is so relaxing. And now apparently I'm a React developer.
@daivatdhimmar6378
9 ай бұрын
Is this video is just about UI or with logic also?
Lama dev is the best youtuber and most underated person out there, the efforts he takes for providing free projects where as all others provide paid version , is just unbelievable , Hope you get everything you wish for wishing you 1 million subscribers , You cannot imagine the no of students you are helping world wide. A BIG THANK YOU
@rahulprajapati9324
2 жыл бұрын
Wow, Captain America learing MERN stack😍
@captainamerica2992
2 жыл бұрын
@@rahulprajapati9324 i can do this all day
@rahulprajapati9324
2 жыл бұрын
@@captainamerica2992 then saving the world from aliens is your part time job I guess🤣
@Jp_codes
2 жыл бұрын
Absolutely
@mofufox5855
2 жыл бұрын
IS the picture at 35:42 still working?
Crazy you did this in 2.5 hours, it took me the day to get through the video. Good job man!
The best hands-on Teacher on KZread ! Best Delivery, so much details to learn on this projects!
Truly a masterclass in react. Your lessons are greatly valued. Keep on shining your light
@ravijai6101
2 жыл бұрын
@Captain america How do I create that ECOMMERCE shown at the start.....???? (I am new to react)
Amazing! You have become my favorite web dev KZreadr because of the high quality of your content and scope of your projects! I really enjoy that you take the time to explain concepts in detail, don't rush, and have a calm attitude. Your UI is very clean and aesthetic. One suggestion I would make is that there is a lot of repetition in the CSS, a side effect of using styled components. The CSS would be a lot more DRY with sass/scss.
@ashwiN27Deshpande
Жыл бұрын
U there how did u manage to import slider.jsx pls explain
The way he makes MERN look simple is Incredible. You are already a great mentor to me... I have literally followed your lessons, and that enough has made me sufficient... Now I reason the Lama Dev's Way... Would be back here when I get my first MERN Stack Job...
This is by far the most detailed project I have ever seen. We appreciate your effort Lama. Your are the best
As a new programmer, I understood all what you did, oh man you are so amazing. I will make sure I buy you a coffee when I start earning
Nice tut appreciate it. I would suggest for anyone coming behind and doing this to move your colors, text, and any other item you use frequently to break them out into separate styled components so they are reusable.
Just finished the UI . Fire design , exceptional explaining. Props to you!
I finished this in 4 days...this video deserves a million likes.. I am super proud of myself...all thanks to you
I am just completing this project coz of simplicity and melody in your voice
Your commitment to helping beginners succeed in coding is incredible. Thank you for providing a wonderful space for learning on your channel.
@PIYUSH-lz1zq
2 жыл бұрын
does this project has admin panel ??
@shixuenchin1396
2 жыл бұрын
@@PIYUSH-lz1zq yes
I'm delighted for having found this course. Such an amazing project. Thank you!
Lama dev is the best developer youtuber ever!! While he's developing, he explain clearly what he's doing like no one else
Thanks so much for these videos! I would feel too bad if I didn't buy you a coffee with how much time you spend on these tutorials. Not to mention, insane quality as well. :)
As in ehn.... He never fails!!! You've just made me realize React isn't as hard as I thought it is. Lama! Lama!! Lama!!! 🙌🏼🙌🏼🙌🏼🙌🏼🙌🏼🙌🏼🙌🏼
@solomon1244
2 жыл бұрын
Shode from Sagab? the name rang a bell in my head
@shodeolumide2140
2 жыл бұрын
@@solomon1244 Lol, yes o
It was great man i worked for 3 hour per day to complete the UI and finally it takes 4 days to complete...now moving to yours backend development part...keep going thanks you so much Lama
Im from sri lanka. Lama Dev, you are the best programming teacher I ever had. I wish all your dreams of your life, will come true. Thanks from bottom of my heart.
this is literally a dream for a front end dev learning react thank you!!!
absolutely amazing...keep up the excellent work
I watched this video becuase I want to build my first e-commerce website project but and I needed to see what things to include and get some inspiration and ideas. This was also my first time seeing styled components in use and I have to say, I really like the way they work. I'll be practicing using them in my next few React projects to get used to them. Thanks!
The best of the best! I haven't seen this kind of tutorials anywhere else! His teaching methods are the best in the industry
Lama dev is the best youtuber.🥰🥰
Thank you LAMA ... Really amazing .. For those having issues with auto-complete not working in styled component, a simple solution would be to search for Emmet in your VS Code settings, and then ensure the Trigger Expansion On Tab button is checked.
@NewToneMusicOfficial
2 жыл бұрын
Still not working
@saurabh3755
2 жыл бұрын
my auto complete in backtics is not wroking after your solution!!!????
@rxmanx
Жыл бұрын
@@saurabh3755 use Extensions: path intillisense and vscode-styled-components
@aakarshpal5304
Жыл бұрын
Hey man, I believe you have completed the, but I just wanted to ask, is this only the UI part or does he also teach us how items are added into the cart and other code logic in video 1 ?
There is only one LAMA, done! You are unique man! Thank you so much for all you effort.
One of my Favourite Channel and appreciation for the high quality content that you have been teaching and sharing for free .
Hi Lama, I can't nearly thank you enough for the amount of learning I got from the video, and this is one of the best videos that anyone can find to update their skills in front end technologies. I still couldn't believe that you released this is in KZread for free. I am humbled by your painstaking efforts to educate everyone and be honored for contributing for this noble cause. Another help that would be great would be teach us how to reuse the styled components that we are repeatedly creating for every page. Could you please do a video or share an example. so, we can refactor the rest of the code from the example. Also, it would be great to show us how to deploy the front end alone for free, if possible, in Vercel / Render. Your way of explaining and teaching rocks and keep up the great work! Thanks a lot Krishna
@funnjoy2499
Жыл бұрын
Hey bro have you complete this project, I have some question. If you are free please reply me.
@Prohduct
11 ай бұрын
bro just write 'export const Container' instead of 'const' or you could create a utils folder that holds all of your styled components
Lama doing it again ! thank you for the delivery ! i wanted to ask if in the future we will see implementation of redux and authentication as well....
Wow! I love your tutorials, the way that you did the responsive design with Styled-Component is just awesome. Thanks so much! 🙌🏼
@ravijai6101
2 жыл бұрын
@Captain america How do I create that ECOMMERCE shown at the start.....???? (I am new to react)
Man, I can`t even find the right words to thank you for this project. It is huge, it is awesome and u even don't have to explain each sterp because everything is clear without words!! Thank you so much. I've leraned tones of cool things just from this one video! Hope you will make some more big and interesting projects! The work you have done is HUGE! Thank you mate, you are AWESOME!!!
Amazing as always! The most useful part for me was a slider, responsive design, and styles using props. I had no idea that the latter was even possible.
@akansharangari715
2 жыл бұрын
@Olga Rublova Can You plz tell me how to get the images used in this project ?
I have had the best learning experience with you so far. Really thankful for your source code.
@akansharangari715
2 жыл бұрын
@Roronoa Zoro I am just a beginner I'm unable to find images used in this project can You plz help me how to get the images ?
@TwoMinuteGyan_
2 жыл бұрын
Me tooo
@gksaisaketh5413
2 жыл бұрын
@@akansharangari715 all images are available in the git repository
@phucinhtrong3710
Жыл бұрын
@@gksaisaketh5413 can you give me the link
@abdullahmiah1913
11 ай бұрын
@@gksaisaketh5413 you give me image repository git link. I can't find it.
This is one of the CLEANEST tutorial EVER!
Damn dude... just damn. I am excited to get started on this one. Many of us are here trying to practice skills and see new things done so we can recreate it on our own and really learn industry standard things. This just goes above and beyond.
@mano5529
2 жыл бұрын
How to put images?? Please help me
We ask for it, he delivers 🙏🙏
Thanks Lama, I've really enjoyed following your tutorial, but I feel it's way too heavy on the CSS, to not deliver on a more responsive UI. IMO using something like Bootstrap will make the CSS easier and responsive, without the extra configurations. For example, different mobiles have different resolutions, so definitely there would be some people who fall through the cracks. I know this is just a tutorial, but everytime I build, I assume I'm making something for commercial use so I really cross my Ts and dot my Is. But I've learned so much, I wasn't as strong going in, as coming out on CSS, especially with Styled Components. I can't thank you enough!
This was sooo awesome!! I am glad that you go throught little steps and show how it works. Thank you for this content. Excited for the backend now :) . Really hope we have projects that includes MaterialUI or Tailwind CSS in the future.
Thank you so much for this video, it totally emphasize the React front-end part. its very helpful because when I search projects people tend to use UI Framework.
Your content is excellent. Just a suggestion, when you are about to code a new component, it will be great help if you bring up design of the component that you are about to code and discuss what are different components that will be a part of a bigger component. That would help user imagine what are we about to code.
@glenhong8028
2 жыл бұрын
I've watched a lot of online coding videos (a lot of paid ones too) and apart from this little improvement these are just as good if not better than the paid videos.
Hi Lama can you add search functionality in this project. BTW LOVE YOUR AMAZING CONTENT 😃
Amazing guide, just finished creating the app! Explanation and pace is on point, keep up the good work, appreciate it!
Thanks you so much. I sat for 12 hrs and finally I completed the project.
Hey man, the image links for slider aren't working anymore. Could you update them?
thanks for such an awsome video Lama, can you please tell me the extensions you have used in vscode especially for styled-components?
@puneet9593
2 жыл бұрын
can you please tell me
@AjayKumar-id7mb
2 жыл бұрын
First install it Then Call it
@puneet9593
2 жыл бұрын
i did not see any thing ..what i call
JUST FINISHED! I've learned so much already. THANK YOU!!!
thank you soo much @Lama , i wish you all the success in life , there is nobody like you on the whole youtube , keep up the good work man ❤️
dear lama dev , your img linK does not work . 😢😢
Hey great video ! Do you know that if you type _rafce instead of rafce you dont import react from react ? I keep seeing you delete it :D
@LamaDev
2 жыл бұрын
Thank you :)
Wow I'm preparing to switch my career to IT industry, and I found this. holy...moly..it's the best tutorial video ever. Thanks to your detailed information, I could find the fun in programming again. Thank you so much and god bless you! from KOREA
Best coding video i've seen. seriously, better than most teachers out there
Man you are god for us...... We exist in Development industry just because of you brother.... God bless and keep uploading more projects
brother you deserve million subscriber. the way you explain and take things with slowly slowly explaining every single thing is not done by 99% you tubers. Lovee
make a project from scratch to finish. Thoroughly explain each place. each command. each framework. When we have difficulty somewhere, you explain it. This is the right way to learn. i like this way. Learning by watching syntax clips without examples, without a project is very boring. Overall you are doing very well. About 10 more projects like this are great.
Amazing work my friend! Concise, informative, and easy to digest. I really appreciate you taking the time to make this!
You have a unique talent of keeping things simple. It has been the best web development tutorial so far in KZread. Thanks for the video, really helped me to develop a project for my college.
@PIYUSH-lz1zq
2 жыл бұрын
does this project has admin panel ?? if yes then you build
You make learning frontend so easy and simple to grasp. Thanks, i have little experience though, so am picking it up fast courtesy your tutorial.
Thank you so much for your time and effort put in to make these tutorials. Simple explanation so that anyone can understand yet uncovering the best practices and industry standards. All the very best and keep up the good work!
@ravijai6101
2 жыл бұрын
@Captain america How do I create that ECOMMERCE shown at the start.....???? (I am new to react)
i'm currently learning the MERN stack and your tutorials are the most beginner friendly on earth ..
You are an Angel sir. Your youtube site is not just a site , it is a Ray of Hope for beginners who are struggling to learn MERN from youtube.
Appreciate your efforts and the manner in which you explain ! One suggestion - before starting the code for the UI part for a page - please show the original screen or screen-shot and compare with it as we build a page. You sure have it clear in your mind - for learners they only get the complete picture when they see the full page at the end.
Thank you LamaDev. I learned many things from you and cant express how grateful i am to you.
You are wonderful. Everything you create and explain them so nicely that even a kid can understand. Thank you a lot.
its been months since i started learning react and This project will be so helpful to craft my skill.thankk you so much ! #great UI man
holy cow and you were usign styled components, this is absolutely amazing, grettings from venezuela! lama master!
I love you lama dev ….. I have struggled a lot understanding responsiveness and today everything is cleared
Simplemente te amo! el tono de voz es magico, la velocidad la justa, y la forma tan simple, entiendo todo sin complicaciones! Saludos desde Junin Bs As Argentina!
This is amazing. Thanks for this awesome tutorial, Lama. I love it
UI is simple and sleek. Loved it!
i just finished the first part. no more long long udemy courses. The simplicity and clarity of your explanations are such a gift for the young programmers and those who are making their first step as web juniors. Thamks a lot i have leaend so much
@scientofia4108
Жыл бұрын
Bro how u add popular product
you are helping me to become mern stack developer.... You have the most quality tutorials on youtube ... keep it up
I appreciate so much what you are doing; your approach is one in many that really works; it's simple, thorough, to the point...it delivers excellently; thank so much! Paul, in Uganda
Cant believe this is free content. God bless you Keep doing what you do, you are great!
OMG OMG , i was waitingfor this and you uploaded !!!!!!!!!!!!!! Anxiously waiting for NODE part!!!
Just Completed this, It's really awesome I am so thankful to you.
Coding react made so easy by Lama. Very awesome e-commerce tutorial.
I was searching for this kinds of project based video on react. I was prety sure that it's not exist on youtube... Finally i got it.. Glad to find this types of video.. keep it uppppppppp............
Finally, the much awaited application has unveiled
Took me almost a week to complete but now I am feeling very great for such an accomplishment and I have learned a lot now I am heading over to the REST API part. Thanks LAMA DEV your tutorial are great keep making such videos.
@PIYUSH-lz1zq
2 жыл бұрын
does this project has admin panel ?? if yes then you build
Dude, the content you make is priceless! Keep doing, amazing job!
Your pace of teaching and content is perfect. Thanks.
I finally finished this video! Thank you so so much, you have helped me a lot! Bless you, now on to the next video!!
your videos on how you explain things and the layouts you produce are absolutlly superb. Keep up the good work be Kardas
Great job Safak! Please keep continue your videos.
This channel is underrated, Great video thanks a lot for this amazing tutorial🙌🏼.
Waw.. I am grateful that I found your channel.. You are real GOAT 🙌🏻🙌🏻
I have no idea How I would really want to tell you that I am so thankful to you :). We look forward to seeing many projects.
finally, i finished the video as a beginner in two days. Thank you so much for this easy and helpful tutorial. Now moving toward the nest part
@learnwithsk-developer9926
2 жыл бұрын
@@robinlittle5431 I have used my personal images and its simple
the best tutorial ever. I'm learning a lot here, thanks so much for give this amazing content for us, Lama Dev.
Lama you write so clean and scalable code. I have learnt a lot from you just in one video.
@sahibalaskar1192
Жыл бұрын
Please tell me what tools i need to install before implementing the project
A great project with clear descriptions.Thank You!!