For this Capstone Project, you will be tasked to create a Web Store using React. To

be able to successfully do this, you will need to consolidate all the concepts you

have learnt about React, JSX$,$ and JavaScript.

Create a React app that displays products of a fictional $($or real, if you have a client

in mind$)$ online store.

The app you create should meet the following criteria:

$1.$ It should be created using Create React App.

$2.$ It should include at least $4$ different types of attractively styled components

that respond to user interaction. Feel free to use React$-$Bootstrap or another

library and$/$or your own custom stylesheets.

$3.$ The user should be able to register by entering the following details:

$$ First name

$$ Surname

$$ Username

$$ Email address

$$ A password

Make sure that all input is appropriately validated $($i$.$e$.$ ensure the user has

entered a valid email address, a strong password and any other validation

checks that you think are necessary$).$

$4.$ The user should be able to log in by entering a username that is stored in a

state and displayed in a header component.

$5.$ The header component should include a navigation menu and be displayed

at the top of the page for all URLs.

$6.$ The application should contain at least $3$ components:

$$ a landing page,

$$ a store or product page that displays the items to the user,

$$ and a cart page.

$7.$ A number of components should be rendered using the array.Map$()$

method. Each component rendered in this way should have a key that

uniquely identifies it$.$

$8.$ User interaction should modify the state of some components.

$9.$ The application should make use of Redux to manage the state.

$10.$ The user$$s purchases should be added to a $$cart$$ state that is used to display

the user's selection and the total cost, etc., on the cart page.

$11.$ The user should be able to select a method of shipment.

$12.$ The user should easily be able to request $$help$,$ which will inform the user

about the details of the shipping options.

$13.$ The UI should be attractive and intuitive.

$14.$ Initialise a Git repository in your project folder to track changes as you go

along.

$15.$ Ensure that your project folder includes a file called $$README$.$md$$ that

explains the application and how to use it$.$

$$ In your editor, create a new file and name it README.md$.$ The $.$md

extension stands for Markdown, which is a lightweight markup

language used for formatting text and creating documentation.

$$ You can quickly brush up on Markdown syntax for your README.md

file here. Keep it simple! Provide clear instructions that an end user

will be able to follow to install and run your app on their local

machine. You can also read more about the README GitHub guide

here.

$16.$ The code reviewer should be able to launch your app by typing the following

into the command line interface:

$$npm install$$

$$npm start$$

$17.$ The file structure of the project should be well organised and in line with

these guidelines. The code should also be easy to read, adhering to

Google$$s style guide about indentation, meaningful variables, component

names, etc.

$18.$ Your code should be well$-$documented with appropriate comments.