In phase 3, we will be connecting our Virtual Store to a live API so that our data is persistent and able to be separately managed.
The user stories from Phases 1 and 2 remain unchanged. For this phase, we are now adding the following new user stories to meet the new requirements.
- As a user, I want to interact with live inventory so that I have confidence that the displayed products are in stock
- As a user, I want to know to that when I add an item to my cart, that it is removed from inventory so that no other users can purchase it
As developers, here are the high level development tasks that address the above end user requirements and workflow
- Continue to use Material UI Components for layout and styling
- Load the category and product list from a remote API on page load.
- Update the product quantity in stock when adding items to (or removing from) the cart
- Continue to use multiple reducers
- You will need to use
useEffect()to dispatch a load action on the initial page load- This will need to use
thunkas it will be asynchronous
- This will need to use
- When adding/removing/updating items in the cart, the action/reducer will need to update the server
- Perform the appropriate
post,put, ordeleteaction via API call (using thunk in an async action) on each of these actions as performed by the users
- Perform the appropriate
In phase 2, we will be adding the “Add to Cart” feature to our application, which will allow our users to not only browse items in the store, but also select them and have them persist in their “shopping cart” for later purchase.
The user stories from Phase 1 remain unchanged. For this phase, we are now adding the following new user stories to meet the new requirements.
- As a user, I want to choose from products in the list and add them to my shopping cart
- As a user, I want to see the products that I’ve added to my shopping cart so that
- As a user, I want to change the quantity of items I intend to purchase in my shopping cart
- As a user, I want to be able to remove an item from my shopping cart
Application Flow:
- User sees a list of categories
- Chooses a category and sees a list of products
- Clicks the “Add to Cart” button on any product
- Clicks the “Cart” link in the header
- Sees a list of all products in the cart
- Clicks the delete button on an item and sees the item removed
- Changes the quantity selector on an item and sees the cart total change
As developers, here are the high level development tasks that address the above end user requirements and workflow
- Continue to use Material UI Components for layout and styling
- Add a “Cart” indicator to the header, like this: Cart (0)
- Create a new Cart component to show the items in the user’s cart
- Add a new component to the page:
<SimpleCart />- Displays a short list (title only) of products in the cart
- This should be present at all times
- Home Page Operation:
- When the user selects (clicks on) a category …
- Identify that category as selected
- Show a list of products associated with the category, that have a quantity > 0
- Add an “add to cart” button to each product
- When a user clicks the “add to cart” button add the item to their cart
- In the
<SimpleCart/>component, show a running list of the items in the cart (just the titles) - Change the
(0)indicator in the header to show the actual number of items in the cart - Reduce the number in stock for that product
- In the
- When the user selects (clicks on) a category …
- Categories
- State should be a list of categories as well as the active one
- Each category should have a normalized name, display name, and a description
- Create an action that will trigger the reducer to change the active category
- Update the active category in the reducer when this action is dispatched
- State should be a list of categories as well as the active one
- Products
- State should be a list of all products
- Each product should have a category association, name, description, price, inventory count
- Create an action that will trigger the reducer to filter the product list when the active category is changed
- HINT: Different reducers can respond to the same actions
- Create a reducer that will filter the products list based on the active category
- Create an action that will trigger the reducer to reduce the stock counter
- Create a reducer that reduces the # in stock when that action is dispatched
- State should be a list of all products
- Cart
- State should be an array of products that have been added (all product details)
- Create an action that will trigger the reducer to add the selected item to the cart
- Hint: this could be the same action type as you create for the Products reducer
- Create a reducer that adds the product to the array of items in state
The first of a 4-Phase build of the storefront application, written in React. In this first phase, the goal is to setup the basic scaffolding of the application with initial styling and basic behaviors. This initial build sets up the file structure and state management so that it can progressively build this application in a scalable manner
The following user/developer stories detail the major functionality for this phase of the project.
- As a user, I expect to see a list of available product categories in the store so that I can easily browse products
- As a user, I want to choose a category and see a list of all available products matching that category
- As a user, I want a clean, easy to use user interface so that I can shop the online store with confidence
As developers, here are the high level development tasks that address the above end user requirements
- Create a visually appealing site using Material UI
- Use a Redux Store to manage the state of categories and items in the store
- Display a list of categories from state
- When the user selects (clicks on) a category …
- Identify that category as selected (change of class/display)
- Show a list of products associated with the category
Create the Virtual Store application as follows:
- Begin with creating your application using
create-react-app - Install Material UI as a dependency
- Write an
Appcomponent that serves as the container for all sub-components of this application- A
<Header>component which shows the name of your virtual store - A
<Footer>component which shows your copyright and contact information - A
<Categories>component- Shows a list of all categories
- Dispatches an action when one is clicked to “activate” it
- A
<Products>component- Displays a list of products associated with the selected category
- A
-
Categories
- State should contain a list of categories as well as the active category
- Each category should have a normalized name, display name, and a description
- Create an action that will trigger the reducer to change the active category
- Update the active category in the reducer when this action is dispatched
- State should contain a list of categories as well as the active category
-
Products
- State should be a list of all products
- Each product should have a category association, name, description, price, inventory count
- Create an action that will trigger when the active category is changed
- HINT: Multiple reducers can respond to the same actions
- Create a reducer that will filter the products list based on the active category
- State should be a list of all products
-
Active Category
- State should store active category
- Other components (products, etc) might need to reference this
- State should store active category
Heather Bisgaard, Software Engineer
Kris Esvelt, Software Developer
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
- Class videos & github repo
- How to deploy React App to GitHub Pages
