The Mercury Store is a JavaScript-powered front-end repo built with 4 foundational components of an industry-standard e-commerce web page.
The Mercury Store repo ensures that users are able to dynamically render a web page with the following 4 components: Product Overview, Related Products, Questions & Answers, and Ratings & Reviews.
Ensure you have the following prerequisites to run The Mercury Store:
-
Access to the API base URL
Note: To obtain the API Base URL, you need to be enrolled in the Hack Reactor Program.
Once you have completed the prerequisite requirements, follow these steps to run the repo:
-
Fork and clone the repo.
-
Run npm install to install dependencies within the frontendcapstone directory in your terminal.
-
Create a
config.jsfile with the following format and export it to theapiConfig.jsfile:const secretConfig = { BASE_URL: 'Insert API base URL here', API_KEY: 'Insert Generated GitHub Personal Access Token here' }; -
Create an
apiConfig.jsfile in the /src/apis folder. -
Run the following scripts in your terminal:
- npm start
- npm run dev
- npm run build
-
Open your browser and type http://localhost:3000 into the URL bar, or click here to render the Mercury Project.
At this point, your cloned repo of The Mercury Project should be functioning and rendering on your local host network.
At a glance, the 4 components ensure users are able to see a Product Overview, Related Products, Questions & Answers, and Ratings & Reviews.
Below are the detailed specifications and functionality of each component.
The Product Overview module is crafted to catch the user's attention and provide a smooth scrolling experience for reviewing the product's images. It maintains high-resolution images and offers expansion and magnification features, allowing users to confidently select their preferred size, color, and style.
The module consists of the following features:
- Image gallery
- Product information
- Style selector
- Add to cart
The Related Products module displays two sets of related products. The first set is a list of internally determined products that are related to the currently viewed product. The second set is a custom list created by the user, consisting of products grouped with the current product into an 'outfit'.
The module consists of the following features:
- Related products with main image and star ratings
- Product comparison modal
- Personal outfit closet
The Questions & Answers module allows users to ask and answer questions about the selected product. This module's functionality can be divided into several pieces.
The module consists of the following features:
- View questions
- Search for a question
- Ask a question
- Answer a question
The Ratings & Reviews module allows users to view and submit reviews for the selected product. This module's functionality can be divided into several pieces.
The module consists of the following features:
- Write a new review
- Reviews list
- Sorting
- Rating breakdown
- Product breakdown
Now that you've read about each component, you can start testing with the following terminal command:
- npm test
This will open a new terminal window, and you will see a test coverage of the total component and unit tests.
The following libraries and frameworks are installed to build the fully functioning and stylistic web page:
