DevCamp

React Project Six: Build an eCommerce Shop

Not Completed Building the Shop Search Bar Component

Okay, let's quickly develop a search bar component that we can put in here.

Not Completed How to Filter Products with the SearchBar Component

Okay awesome, great job in developing that component. What we're going to do in this video is we are going to actually filter these items when we type into our search bar.

Not Completed Implementing the SearchBar Input Styles

All right, welcome back to the course. We just need to style these now, let's start with the search bar.

Not Completed Building Shop Product Child Components

All right welcome back to the course. Let's go ahead and continue developing the product component so we can actually style it and make it look good.

Not Completed Styling the Quantity Component

Okay, awesome job in getting those last few videos done they were kind of long and fast. So what we're going to do in this video is we're going to style the quantity component.

Not Completed Styling the Shop Product Child Components

All right welcome back to the course. In this video I'm going to show you how we can style the rest of our component.

Not Completed Using CSS Grid for the Products

All right, let's continue building out this course. In this video we're going to build the grid for our product.

Not Completed How to Flip a Card in CSS with Transition Animations

All right, let's go out and get started. We have to get the front of our card in now alright.

Not Completed Integrating CSS Grid into the Shop Cart Subcomponents

Hi and welcome back. Let's go ahead and start developing this component by first getting a grid going okay, with this X button in here.

Not Completed Building out the Shop Cart Content Structure

All right, welcome back to the application we're building.

Not Completed Cart Footer and Button Styles

All right welcome back. Let's hustle through and complete this component.

Not Completed Finishing the Cart Footer Component

All right, welcome back to the course. Let's go ahead and look at our code real quick by closing the terminal. All right, now let's go to Chrome and we're working on the check out component. So let's go get these other things in here, these other styles and then align it on a grid.

Not Completed Integrating the Shop Cart Grid

Okay, welcome back to the course. We've got the footer built, now what we need to do is we need to basically put a grid in here and then get the data in here to actually have a product in there, okay and then the product component.

Not Completed Building the Cart Product Component

All right, welcome back. Let's get started with the actual cart product component.

Not Completed Working with Products and Users in the Cart Component

All right, welcome back to the course.

Not Completed How to Map Cart Product Data into Cart Product Component Instances

All right welcome back. That was a long video but we got a lot set up so we can throw these into our products, our cart products and get things going really well.

Not Completed Implementing the Cart Product Grid

All right welcome back to the course. Let's go ahead and style this component.

Not Completed Finishing the Cart Styles

Welcome back to the course. Let's go ahead and finish the styles for this and then learn how to increment this in the next video.

Not Completed How to Slide a Cart Component on and Off Screen with CSS

All right welcome back.

Not Completed How to Add Cart Products to a User's Cart

All right welcome back. Let's go ahead and make it so when we hit Add to Cart it will add it to the cart. And when we hit plus on these buttons it will increment it.