This is the frontend codes for an online superstore web application, which is part of the ECE-GY 9953 Advanced Project.
Created with React version 18.2.0 and Ant Design version 4.23.6.
Node version 16.15.0.
NPM or Yarn are both fine. In my experience, Yarn works with Ant Design better.
Run yarn install or npm start to install all the packages used for this project.
Locate the terminal to the src folder and run yarn start or npm start.
Consists features based on the CRUD operations.
The customer could register, log in, forget and reset password, change the password after logging in, go to the account information page and view the profile of the customer and edit the information.
Functionalities associated with the address include: adding an address to the customer profile, getting the addresses of the customer after logging in, and updating and deleting an address on the customer profile.
The customer could search for a product and view the details including the unit price and the discount percentage of the product. Then the customer can add products to the shopping cart and place an order. The customer can also view the order history and choose to return an order within 30 days of the shipping date.
The administrator could log into the system, and view and change the stock of a product.
JSX produces React elements and React produces separate components. Everything is converted to a string before being rendered. => Safe to embed user input and ensures that attackers can never inject anything that’s not explicitly written in our web application.
Chose the Bearer Token as the JWT. The bearer token is a cryptic string, generated by the Spring Boot backend. Sent in the HTTP Authorization header when making requests to protected resources.
Specifies the versions of packages and dependencies.
Set up routes for different pages using React Router. Includes the footer across pages.
Consistent styling across pages.
Constants including the security questions, quantities, regions, etc.
Home page of the web application.
Navbar used across all pages. Located at the top left corner is an icon with the text Awesome. By clicking the icon, the user is redirected to the home page. In the middle, there's a search bar for the customer to search for products, access limited to logged-in customers. At the top right corner, the first menu item is a user icon, disabled when the customer is not logged in, if logged in, submenu items include account info, address book, and log out. The second menu item with the text Log In/Register has the two submenu items, Register and Log In, after the customer is logged in, this submenu is disabled. The third one is a cart icon with two submenu items, View Cart and Checkout, access limited to logged-in customers.
CSS styling for the navbar.
Resgiter form.
Login form, double authetication with the security question.
Forgot password page for the customer to submit the email address and later receive a link in the email inbox to change/reset the password. No JWT needed for this page.
Change/Reset password page following the forgot password action.
Account Info page, displaying the name and email of the customer.
Two buttons, one for directing to the editing info page, the other for directing to the updating password page.
Renders the customer's info and allows the customer to edit it.
Allows the customer to update the password.
Account Info page, displaying all addresses of the customer in the format of table. A separate Card component that directs to the add address page.
In the table, the customer could click on the Edit Address button to direct to the edit address page and click on the Delete Address button to delete it.
Renders the customer's address and allows the customer to edit it.
Add address form page.
Constants of categories, used in the Results.js table.
Search Results data populated in a table. Sorters and filters of categories implemented.
A specific product page, allows the customer to choose a quantity of the product and add it to the shopping cart.
View Cart page, data populated in the table. Allows the cutsomer to updapte the quantity or delete a product. Could redirect to the checkout page by clicking the Checkout button.
Checkout page, asks the customer choose shipping address, order priority, shipping mode, and fill out payment info.
Successfully placed order page.
Order history data populated in the table. Allows the customer to return an order within 30 days of the shipping date.
Admin log in form page.
Admin update product page. Separate management from the customer.