Static E commerce Landing Page with React Typescript MUI Tailwind Framer Motion & Swiper | Front End

letsfullstack •
2 Views
0:00 - intro 1:40 - Creating Our React App 2:40 - Setting Up Our Dependencies 7:30 - Creating A Layout 10:50 - Setting Up Our File Structure 12:30 - Creating Our Navbar 33:30 - Creating Our Animations Component 59:00 - Building A Reusable Slider 1:47:00 - Building Our Hero Section 1:56:00 - Building Our Featured Product Slider 2:30:00 - Building A Masonry Layout 2:42:00 - Accordion Component & FAQS 3:09:00 - Building A SideBar 3:36:00 - Context API & Global State 3:56:00 - Cart Side Bar 4:10:00 - Responsive Design & Footer 4:19:00 - Outro - P.S - Some of you might notice I called using the spread operator destructuring that was a mistake on my part I did not pay attention when I said it so sorry about that Hey guys welcome to my first youtube video. We are going to build this really cool looking front end landing page with React Typescript MUI Tailwind & Framer Motion. This project is fully customizable. All the components are fully reusable for any project you would want to build. I will show you guys how you can better structure your code base to impress potential recruiters. We will focus a lot on reuse ability and how to create components efficiently. We will look at how we can add animations with framer motion. We will see how we can incorporate typescript into our react app as well. We will style our app with tailwind and also include components offered by material UI 5. This video will help you guys out a lot. Thank you for watching For more web development videos subscribe to the channel https://www.youtube.com/@UCKnJrAJ1rqY... Link to Git hub code base https://github.com/blazeeebit/Ecommer... Support me on Patreon https://www.patreon.com/LetsFullStack Follow me on Instagram https://www.instagram.com/lets.full.s... Ask me questions on Quora https://www.quora.com/profile/Syed-1012 Connect with me on Linkdin https://www.linkedin.com/in/syed-naur... Framer Motion Documentation https://www.framer.com/docs/ Typescript Documentation https://www.typescriptlang.org/docs/ React Documentation https://reactjs.org/docs/getting-star... MUI Doeumentation https://mui.com/material-ui/getting-s... If you enjoyed the video and want to see more hit the subscribe button and like the video.

Latest Videos

Partner Program Latest Videos Terms of Service About Us Copyright Cookie Privacy Contact