Table of Contents
Alicia Villanueva - aliciav.texas@gmail.com
Project Repo Engineering Journal
My Module: Related Products and Your Wardrobe Documentation
Cory Ellerbroek - cory.ellerbroek@gmail.com
My Module: Product Overview Documentation
Travis Morse - travis503@gmail.com
My Module: Ratings and Reviews Documentation
My Module: Questions and Answers Documentation
Project Catwalk was a collaborative Front-End capstone between members of Team Havarti. This project simulated the real-world development of a product page to the demands listed in their customers Business Documentation Requirements:
"Our client-facing retail web-portal has become significantly outdated and has been proven to be hurting sales numbers. Project Catwalk comprises a complete redesign of the retail portal designed to address this concern and modernize the site. This document outlines the features to be implemented as part of Project Catwalk in its initial release. The following requirements define the new user interface required for customers to browse items in our retail catalog."
Team Havarti built this project from an empty directory to the Havarti Party product page presented to you. The project was completed and deployed on AWS EC2 within a 2 week time period.
Team Member Expectations and Workflow:
- Oversaw their own module while working in collaboration with teammates to ensure interactive functionality
- Communicated their progress in daily standups
- Created and completed their task tickets using Trello
- Brainstormed and reflected the teams work in 2 day mini-sprints
To explore the project, follow the instructions below.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
- Have your API token available or generate a new one with github following this link Generate Token
- Clone the repo
git clone https://github.com/your_username_/Havarti-Party/hr-atx58-fec-havarti.git
- Install NPM packages
npm install
- Enter your API key in
config.example.jstoken: 'API KEY';
- Remove the .example. from config.example.js to create config.js
Reminder to NEVER push your config.js file! - Compile Webpack
npm run build
- Run express server on port: 3030
npm start
- Navigate to
localhost:3030in your browser
As it happens in the development world, Team Havarti was handed a Requirements Update at the start of Week 1 for this project:
"There is an immediate need for visibility into customer interactions on our online retail portal. Specifically interactions with the Product Detail page should be collected for further analysis and interpretation by our Data Science team. Project Catwalk should incorporate click tracking on the Product Detail page within the scope of the initial release." The click tracking will not be through any 3rd party analytics platform. All will be done in-house. To track interactions, each click on the web page should be recorded, as well as metadata associated with that click. For each click on the page, we need to capture the following:
Element of the page which was clicked Time of click Module clicked
To complete this requirement, a helper function was created in the ProductContext file to be handed down to all child components. In each module's highest level componenent, an onClick property was invoked with that given module title and the target value of the users click. User click information was set to state, time-stamped, and was then sent to the Altier database for storage. All user clicks log a message to the console, confirming which module was clicked by the user.
Each member of Team Havarti was resposible for functionality within their own module as well as the overall presentation and functionality of the entire product page.
Developed by Cory E.
The Product Overview module is the main visual content that is above the fold on page load. It contains the image carousel, product details, product styles, and the various components involved with adding a product to the cart. The biggest challenge when creating the Product Overview module was storing and passing state so that the sub-components would render and re-render appropriately. It also had to communicate with the other modules. The solution we developed was a combination of storing state that needed to be shared in a context file (accessed using the useContext hook) while other state was stored locally.
Notable features of this module include:
-
When a style is clicked, the image carousel will present that style's images and will display at the same image index
-
The Select Size drop down will display OUT OF STOCK when appropriate
-
If size has not been selected, the Quantity drop down is disabled
-
If Add To Cart is clicked before a size is selected, the Select Size drop down will open
-
When a Related Product card or Your Wardrobe card is clicked, the module will re-render to provide the images and information for that product
Developed by Alicia V.
Related Products displays a responsive list of related items based on the current overview product. When a new product is selected, the component must make a request to the Altier API for related item IDs, then based on those IDs make requests for their product's information as well as their styles. Control of asynchronous requests and handling of state as to not disrupt the functionality of other's components mmatewas an important aspect of this module.
-
The related product cards are disaplayed with react-elastic-carousel
-
Arrows to glide through your list render only when the item list surpasses a length of 4
-
Clicking the item's content area places that item as the current overview product
-
A comparison modal will appear when the star icon is clicked, comparing the selected item's features with the overview product's features. This list does not allow for duplicate features and only displays a value if a value is present for that feature.
Your Wardrobe list dynamically adds the current overview product style to a growing list of products of the users choosing. Your Wardrobe list must grow without duplication and without disrupting the layout of the screen when items are being added and removed. Handling of object information was a large task for this component as much of the displayed information was shared between two different objects from two different API requests. Setting the overview product back to the selected style on click had to be done in strategy with the Overview Product module so that all lower components still had acccess to the associated overview product for their own API requests.
-
Outfit list utilizes the react-elastic-carousel
-
When empty, the Add To Outfit list is the only card appearing in the list
-
Items may only appear once within your wardrobe.
-
Arrows to glide through your list render only when the item list surpasses a length of 4
-
Clicking the item's content area places that style as the current overview product
Developed by Travis M.
The Ratings and Reviews module displays a dynamically rendered set of user-provided information regarding the currently selected product. As overview items are selected, this component makes a pair of requests to the Altier API to retrieve review data and metadata, then populates the display with visually expressive ratings, characteristics, and comments, and only loads displays for data that is actually present. The user can also submit new data with the "Write New Review" form, which formats and delivers new data to the API.
-
User reviews can be sorted by recency, helpfulness rating, or "relevance", which sorts reviews using an algorithm
-
To keep the page compact, only two reviews are initially loaded; more can be loaded using the "More Reviews" button
-
The "Write New Review" button will bring up a modal form that allows the user to share information and upload images to the server
Developed by Johnathan B.
The Question and Answers Module renders any questions, and their given answers, related to a currently selected product. It allows full functionality to interact with a given question or answer. This set of functionality does manipulate the database in our Atlier API and persists across loads. The functionality of this module can be found below:
-
User's questions and answers will be sorted by helpfulness
-
User's can mark questions and answers as being helpful, or if there was something inappropriate, report the selected question or answer
-
Reported questions and answers will be removed from the rendered module to be reviewed by a separate team
-
Adding of questions or answers can be done through the client via a modal popup that verify user's input, and immediately render them to the module and persists to the database