Front-end capstone project that takes information from an API and displays it in an e-commerce format
Katana – Retail Web Portal
Overview
Web and mobile-friendly front-end capstone project that takes information from an API and displays it in an e-commerce format. The application is composed of 4 main components: product detail, related items and comparison, questions and answers, ratings and reviews.
Description
This project was built by a team of 4 developers over a span of 2 weeks. We adhered to a 26 page business requirement document that highlighted client requests. Main technology used includes React (hooks) and styled components on the frontend, Express to gather API data, and AWS for deployment.
Installation and Setup
-
Fork and clone the repo and navigate to the root directory.
-
To install dependencies:
npm install- To run webpack build:
npm run client-dev- To start the server (in a separate terminal):
npm run server-dev- Open http://localhost:3000 in your browser
Technologies
Components
Product Detail
This component displays the product details to the user through visuals and text. It allows the user to select specific sizes, styles, and quantities, along with the ability to check out a purchase.
Related Items and Comparison
This section displays products that are related to the current product, along with a list of products, that can be custom curated by the user to define an “outfit”.
Questions and Answers
This is where the user is able to view questions and answers about the product and also ask or answer questions themselves. It includes further interaction with the site, such as a searching functionality.
Ratings and Reviews
This section displays a summary of ratings and a list of reviews for the product left by other customers. It includes filtering and sorting functionality, photo thumbnails and popups, interaction with reviews, and the ability to add a new review to the database.