React Project Six: Build an eCommerce Shop


Not CompletedeCommerce Application Overview

Hi and welcome back to the course. In this set of videos we are going to build out the e-commerce application.

Not CompletedGenerating the eCommerce Application in React

Welcome back to the course. Let's go ahead and generate our project with the js-generate command.

Not CompletedHow to Build the eCommerce App's Header and Navbar Components

Let's go ahead and build some components. Let's close out this terminal window, let's head over to our application in the browser, and we'll see what we got.

Not CompletedSign In and Sign Up Component Setup

All right, welcome back to the course, great job in setting everything up. We're going to go ahead and start out actually building out some of the main core features in our application starting now.

Not CompletedHow to Setup Redux Form and the Redux Dev Tools for the eCommerce Shop

We've got this built out so far. We've got the sign in here. We've got this Header and Nav. It looks like our design. Everything's all great.

Not CompletedBuilding out the eCommerce Sign In Form Component

Hey there, and welcome back to the course. Let's go ahead and throw in some fields into our SignIn component here.

Not CompletedHow to Build a Form Input Component in React

All right, let's go ahead and start building out some components for our form fields.

Not CompletedCreating a Form Button Component

We've built out a formFields file with a FormInput component in it. Now, what we need to do is provide a login button, so that we can actually submit this form and do something with this data.

Not CompletedHow to Build a Title Component and Import Multiple Fonts

Welcome back to the course. In this video, we are going to style our application here, so let's look at our design real quick.

Not CompletedHow to Style Form Fields Components in React

We got those fonts in. We created the PageTitle component. What we want to do now is finish the styles for this page. Let's start off by styling the field components here.

Not CompletedBuilding the Sign In Form Grid Styles

All right, let's go ahead and let's throw in the rest of these styles and then throw in the quick links.

Not CompletedHow to Build a Details Components for Quick Links

Welcome back to the course. In this video, we're going to add in the quick links. Let's go ahead and make a component so that we can use this throughout our application.

Not CompletedHow to Style a Details Component

All right good job, we've handled those quick links. Let's go ahead and place them on our screen where they belong now.

Not CompletedHow to Re Use Old Code for a Similar Form

Okay, we've got the signin form built. Let's go ahead and basically replicate this exact same thing in our login or our signup and we will make it have a few more forms okay.

Not CompletedFinishing the Sign Up Form

All right let's go ahead and finish off this form here by basically fixing up our grid and placing them where they belong and then making this go back and couple other small things okay.

Not CompletedBuilding a Header NavBar Reducer in Redux

All right good job, we got the login form and the create account form.

Not CompletedHow to Use Redux Connect and Map State to Props

Okay so we built out that reducer and now we have headernavbar in our state with headerLinks and navbarLinks.

Not CompletedBuilding the Header NavBar Styles

All right, so we've got those connected to redux. Now what we need to do is we need to style them so they actually display correctly.

Not CompletedCreating the Account Components

All right welcome back to the course. What we need to do now is we need to get rid of this test data and then develop an action that we can basically tell our reducer to modify this to what we want it to be.

Not CompletedIntegrating Navbar Action Creators for the eCommerce Application

All right let's go ahead and develop that action creator and get the data into our component.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.