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

Channel:

Lets Full Stack

Subscribers:

1,770

Published on December 5, 2022 11:53:50 PM ● Video Link: https://www.youtube.com/watch?v=E0Cfp91fyKE

Category:

Tutorial

Duration: 4:21:12

849 views

46

-timestamps-

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 infidelity help you guys out a lot. Thank you for watching

For more web development videos subscribe to the channel
https://www.youtube.com/@UCKnJrAJ1rqY_vJJZAiCKmTg

Link to Git hub code base
https://github.com/blazeeebit/Ecommerce-Landing-Page

Support me on Patreon
https://www.patreon.com/LetsFullStack

Follow me on Instagram
https://www.instagram.com/lets.full.stack/

Ask me questions on Quora
https://www.quora.com/profile/Syed-1012

Connect with me on Linkdin
https://www.linkedin.com/in/syed-nauroz-ali/

Framer Motion Documentation
https://www.framer.com/docs/

Typescript Documentation
https://www.typescriptlang.org/docs/

React Documentation
https://reactjs.org/docs/getting-started.html

MUI Doeumentation
https://mui.com/material-ui/getting-started/overview/

If you enjoyed the video and want to see more hit the subscribe button and like the video.