Specialized Redux Bootcamp - Capstone Project

Overview • Project • Instructions • Deliverables

---

Overview

The purpose of this project is for you to demonstrate your knowledge acquired in the Specialized Redux Bootcamp. With this E-commerce project, you will have the opportunity to show your React skills by adding functionality and applying Redux Toolkit, the toolset for global state management that you have learned in this Bootcamp. Here you will find all the instructions to complete and deliver your Redux Capstone Project.

Project

This repository contains the minimum structure of an E-commerce called WizeStore with three modules: Login Products Cart Here is the link to the demo application. username: wizeline and password: Rocks!

Instructions

Before starting: Fork this repository to your GitHub account and make it a public repository. Invite your mentor as a contributor to your GitHub project. Now that you have cloned this repository in your local environment, run the following command to install all modules that are listed on the package.json file and their dependencies: npm install After that, run the app in the development mode: npm start You can message your mentor to have 1:1 sessions, or you can use the Slack channel if you feel stuck, want to share your progress, or need some feedback. Get started with the requirements specified below.

Deliverables

All deliverables are cumulative, and for each delivery: Use React Hooks in your components. Use styled-components for component styles or any other CSS library or framework like Material UI or Bootstrap. Ensure that your application does not log warnings and errors in the browser console. Create a pull request (PR) for each deliverable to merge into your main GitHub branch. Add your mentor as a reviewer of your PRs. Your mentor will review and leave feedback on your progress.

Dates You must submit three deliverables on the following dates: The first delivery is before 10 AM (CST) on Monday, July 4th, 2022. The second delivery is before 10 AM (CST) on Monday, July 11th, 2022. The third delivery is before midnight (CST) on Friday, July 15th, 2022.

First delivery

In this assignment, you will create the Products module.

Requirements of the first deliverable. Create a new branch with the name feat/deliverable1 derived from main on your forked repository. Create the Products module and fill it with data obtained from this mock file. Design your user interface (UI). You can base it on the layout proposed in this demo, or if you want, implement any other design, but include the following elements: A grid of products, and for each element on the grid, show the following elements: One image of the product. The product name. The first category. The product price. A button without functionality with the text "Add to cart". Deploy your app on Netlify, Firebase, Heroku, GitHub Pages, or any other hosting service you prefer. When you meet all Acceptance Criteria of this first deliverable, fill out this form and add the URL of your PR and the URL of your deployment.

Acceptance criteria for the first deliverable

The following is the list of acceptance criteria (AC) and points for completing your first deliverable:

AC	Description	Points
1	☑️ Your Products module reads data products correctly from this mock file.	30
2	☑️ Your Products module displays your CSS styles correctly.	20
3	☑️ For each product, the following elements render correctly:   • One image of the product.   • The product name.   • The first category.   • The product price.   • The "Add to cart" button without functionality.	50

Second delivery

In this assignment, you will create both the Cart and Login module.

Requirements of the second deliverable Create a new branch with the name feat/deliverable2 derived from main on your forked repository. Create the Cart module and fill it with data obtained from the same mock file used in the first delivery. Just take a few products and add the quantity of one to each. Design your UI. You can base it on the layout proposed in this demo, or if you want, implement any other design, but include the following elements: A heading with the text "Shopping Cart". A grid with the products of the cart, and for each product on the grid, show the following elements: A label with the text "Product details". At least one image of the product. The product name. An input field with a numeric type for the quantity of the product and its label "Quantity". The product price and its label "Price". The total by multiplying the quantity by the product price. And its label "Total". A button without functionality with the text "Remove". The summary section with the following elements: A heading with the text "Summary". The total items in the cart and its label "Items". The total cost of the items in the cart and its label "Total cost". A button without functionality with the text "Checkout". Create the Login module and design your UI. You can base it on the layout proposed in this demo, or if you want, implement any other design, but include the following elements: A heading with the text "Welcome to the WizeStore!". An input field with a text type for the username and its label "Username". An input field with a password type and its label "Password". A button with the text "Login". On the Login module, authenticate your user using the loginApi function located on src/utils/loginApi.js. If the users are not authenticated, redirect them to the Login module. Deploy your app on Netlify, Firebase, Heroku, GitHub Pages, or any other hosting service you prefer. When you meet all AC of this second deliverable, fill out this form and add the URL of your PR and the URL of your deployment.

Acceptance criteria for the second deliverable

The following is the list of acceptance criteria (AC) and points for completing your second deliverable:

AC	Description	Points
1	☑️ Your Cart module reads products correctly from this mock file.	10
2	☑️ Your Cart module displays your CSS styles correctly.	10
3	☑️ For each product, the following elements render correctly:   • One image of the product.   • The product name and its label "Product details".   • The quantity input and its label "Quantity".   • The product price and its label "Price".   • The total amount and its label "Total".   • The "Remove" button without functionality.	15
4	☑️ The "Quantity" input only allows positive numbers and affects the total cost of the product, the total items, and the total cost in the "Summary" section.	10
5	☑️ For the "Summary" section, the following elements render correctly:   • The heading with the text "Summary".   • The total items in the cart and its label "Items".   • The total cost of the items in the cart and its label "Total cost".   • The "Checkout" button without functionality.	15
6	☑️ Your Login module displays your CSS styles correctly.	10
7	☑️ Your Login module render correctly the following elements:   • The heading with the text "Welcome to the WizeStore!".   • The username input and its label "Username".   • The user password input and its label "Password".   • The "Login" button.	15
8	☑️ Your Products and Cart modules redirect to the Login module if the user is not authenticated.	15

Third and last delivery

In this final assignment, you will fetch the API and add Redux Toolkit to manage the state of your application.

Stay tuned on Slack because we will send you your API key on Friday, July 8th, 2022, so you will be allowed access to the API.

Requirements of the third deliverable Create a new branch with the name feat/deliverable3 derived from main on your forked repository. Add Redux Toolkit to your project to simplify your store setup, your reducers, and your update logic. On the Products module, instead of reading from the mock file, now use createAsyncThunk and your API Key to fetch data asynchronously from the /products endpoint of this API. Save products and quantities in the Redux store when the user clicks on the "Add to cart" buttons in the Products module. Read those products and quantities from the Redux store and allow updates and deletes when the user interacts with the "Quantity" input and the "Remove" button in the Cart module. Allow the user to click the "Checkout" button only if there are items in the cart, and when that happens, use createAsyncThunk and your API Key to post an order using the /orders endpoint of this API. Show the API response, the error if something goes wrong, or the "order" and "message" if the post is successful. Deploy your app on Netlify, Firebase, Heroku, GitHub Pages, or any other hosting service you prefer. When you meet all AC of this third deliverable, fill out this form and add the URL of your PR and the URL of your deployment.

Acceptance criteria for the third deliverable

The following is the list of acceptance criteria (AC) and points for completing your third deliverable:

AC	Description	Points
1	☑️ Your Products module fetches the API	15
2	☑️ Your project uses Redux Toolkit for its global state management.	25
3	☑️ On the Products module, the "Add to cart" buttons allow adding products to the Cart module.	15
4	☑️ On the Cart module, the "Quantity" input updates the Redux store and affects the totals of that product and the "Summary" totals.	15
5	☑️ On the Cart module, the "Remove" buttons allow removing products from the Cart module and affect the "Summary" totals.	15
6	☑️ On the Cart module, the "Checkout" button displays the API response on another page if there are items in the cart.	15

Bonus

The bonus is a plus that helps us know you better and increments your final score. Consider the following:

Bonus	Description	Points
1	☑️ Use unit testing to validate your components using Jest, React Testing Library, and/or Mock Service Worker.	10
2	☑️ Utilize third-party authentication providers for your Login module like Auth0.	10
3	☑️ Add a search bar functionality to the Products module.	10
4	☑️ Add products to the Favorites module.	10