React E-Commerce Project | John Smilga | Skillshare

React E-Commerce Project

John Smilga

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (6h 17m)
    • 1. 0 react store intro

      9:11
    • 2. 1 react store setup

      4:42
    • 3. 2 react store fonts icons bootstrap

      13:06
    • 4. 3 react store component setup

      11:05
    • 5. 4 react store react router

      10:14
    • 6. 5 react store navbar component

      10:56
    • 7. 6 react store button styled compenents

      15:16
    • 8. 7 react store navbar css

      4:41
    • 9. 8 react store product list intro

      5:54
    • 10. 9 react store prop drilling problems

      4:37
    • 11. 10 react store context api setup

      11:26
    • 12. 11 react store productListComponent Completed

      11:40
    • 13. 12 react store product component html

      21:07
    • 14. 13 react store product component css

      14:11
    • 15. 14 react store product proptypes

      6:18
    • 16. 15 react store copying data

      12:36
    • 17. 16 react store details component

      21:33
    • 18. 17 react store props in styled components

      5:03
    • 19. 18 react store handle details functionality

      10:45
    • 20. 19 react store add to cart functionality

      11:40
    • 21. 20 react store modal functionality

      7:06
    • 22. 21 react store modal component

      21:47
    • 23. 22 react store cart initial functionality

      6:01
    • 24. 23 react store cart initial setup

      4:26
    • 25. 24 react store cartColumns component

      5:26
    • 26. 25 react store empty cart component

      7:05
    • 27. 26 react cart cartList component

      8:49
    • 28. 27 react store cartItem

      19:39
    • 29. 28 react store cartTotals component

      11:33
    • 30. 29 react store add totals method

      8:08
    • 31. 30 react store clear cart method

      5:20
    • 32. 31 react store remove single item

      6:07
    • 33. 32 react store increment functionality

      7:19
    • 34. 33 react store decrement

      4:30
    • 35. 34 react store page not found

      6:03
    • 36. 35 react store first deploy

      6:39
    • 37. 36 react store paypal button setup

      6:47
    • 38. 37 react store paypal setup

      10:31
    • 39. 38 react store env variables deploy to netlify

      8:03

About This Class

In this course we will create React E-Commerce Project

During the course you will work with

- React 

- ES6 Async Await

- Bootstrap 4

b243f2e4

-During the course we will explore

- Where to download google custom fonts

- Choose the colors for the website

- Download free stock images

- Download free stock video

- Download free stock loading images

- Download free icons for the website.

- How to work with @media queries

We will start a course by creating a navbar with logo, links and social media icons. The navbar will be responsive so on the smaller screen size the links and social icons will not be displayed and navbar toggler button will be displayed instead. As the user clicks the navbar toggler button the links will be displayed.Next we will create a header section with a background image and title on the left hand side. We will animation to the header so every 20 seconds the image will zoom in and move to the left. We will also work with a clip-path property to create a custom shape for our header section. After that we will create a skills section with four columns and section title. Next we will build a inventory section were all the cars will be displayed.Each car will have a bootstrap-card and inventory data will be added dynamically using javascript. Following we will make question section with background images and two column layout and font-awesome icons. After that we will create featured section, with special cars in one column and image of each car in other column.We will use javascript to select and add special cars to the list, as well as showing the image of the car as the car-icon is clicked. Following featured section we will make gallery section where we will learn how to work with nested columns in bootstrap. We will ad a hover effect to each image with css and create modal and display each picture in the modal with javascript. The contact section with two form will be next and services section will be right after that.  The services section will have video background with colored overlay and three service items position on top of video. Again we will create a custom shape for the section using clip path. The last two section we will be making will be reviews and footer section. In the review section we will make three cards, with car images and customer images. At the very end we will ad a custom class to navbar if the user scrolls be