Overview

This is a React project in a udemy by Li Renmi as following:

https://www.udemy.com/course/react-lean-by-doing/

The project covers basic online store operations except payment process. I like this project because it focuses on practical approach of web application by React, which I found very helpful to understand how everything fixes together in Single Page Application(SPA) using React.

Requriements

• display and search for sneakers,
• register, login and logout for uesr,
• login email and password frontend validation,
• show user information,
• add to and edit the shopping cart,
• admin login and logout,
• add, change and remove inventory by admin.

Frontend

3rd party CSS

Bulma(https://bulma.io/) is used as basic style sheet to the site, which addes more flavor the project. Bulma is added into the project as a module along with node-sass so that css can be compiled into the project. The below screenshot shows the example of the flaver.

Component breakdown

The breakdown of components comes very naturally.

react-route is used to route from page to page.

Axios

Axios is used for intercation with Backend REST server.

Authentication

In traditional webapp, the authentication information is usually stored in session along with cookie, which are not applicable in SPA. JWT(Json Web Token) is the common practice for anthentication instead, where the JWT can be stored into Local storage after authentication, then sent along with further REST request as identification.

Cart

the Cart information is stored in state of frontend components, which is syned to the server side database/json file.

React Hooks

Functional components are used along with Hooks to access necessary state information. React-hook-form is used for frontend validation.

Modal panel

A global panel is used as modal to show/add/edit the inventroy detail informaiton.

Other tools used in frontend.

• react-transition-group is uesed for smooth transition of display
• react-toastifiy is used as pop up notification.
• react developer tools is used as browser plugin for easy debuging.

Backend

Express is used along with Json Server to simulate the backend operation. Basically Express is for the authentication and Json Server for Product and cart information which are stored in Json files. Json Web Token module is used for the operation of authentication tokens.

Dry run

Try me

user: admin@163.com pass: admin111

• Frontend: 'npm build' and published as static content in Sprint Boot server.
• Backend: Json Server wiht JWT, tested using AWS cloud9 on EC2.