This is a modernized retail portal based on design specifications and requirements outlined by project stakeholders. As an agile team of four, we created a dynamic e-commerce browsing experience on an accelerated development timeline, with each team member builing out one of the four required components.
We utilized React on to implement a responsive, single-page application capable of rendering data from a third-party API. We implemented click tracking with higher order React components.
Although the emphasis of this project was front-end development, we utilized an Express for Node.js server to route requests to a RESTful API with necessary authorization added. Express compression middleware was used for optimization.
A goal of this project was to deeply understand CSS without importing addtional styling frameworks, so all styling and functional implementations were written purely with CSS. The app includes both a light mode and a dark mode, which were implemented using only CSS. We also utilized Google Fonts and Font Awesome.
We used webpack as our solution for bundling static assets. The compression, imageminimizer and cssminimizer plugins help boost web performance.
Developed by Izzy Lee
The Product Overview contains an image carousel that can be toggled by left and right arrows, along with the thumbnail track. The gallery can expand over the product information for a zoomed in view that will track the user's cursor position for dynamic zoom. Customers can toggle styles and add products to their cart, as well as share products on social media sites.
Developed by Van Nguyen
Related product widgets consist of two parts. One is the Related products which present the user with products similar to the currently selected product, provided by the external API and it changes accordingly. Having carousel of cards let users navigate between the card. When a user clicks on the star icon in the upper righthand corner of the card, a modal will pop up comparing the feature of the current product and the selected product.
The second part is the outfit section which provides the user a way to keep track of their favorite outfits. It gives the user the ability to save the current outfit or delete any outfit from their outfit list and even away from the application and maintain their list of saved outfits.
Developed by Iris Huang
The questions and answers section has below features and functionalities.
- Search bar to filter out any questions after user typing more than 3 characters
- User can upvote Helpfulness in each question and answer and question list and answer list are sorted by Helpfulness
- User can report question and answer. If a question or an answer is reported, it will be deleted upon future rendering.
- User can add answer to each question with image upload function.
- User can add new question.
- The question and answer list is rendered with 4 questions and 2 answers each by default. Users can click on See More Answers and More Answered Questions to look for more information.
Developed by Caitlin Kinney
The ratings and reviews section includes a list of available reviews paired with a side panel displaying product metadata. The review list pulls in data from an API endpoint and dynamically renders individual reviews with varying sub-components.
The side pannel includes a review rating breakdown and product characteristic meter bars. Each star rating bar acts as filter for the review list, allowing the user to refine the review list based on average rating.
Selecting an option from the “sort by” dropdown menu sends a fresh request to the API for reviews ordered by the selected characteristic.
Within individual review tiles, users can mark a review as helpful or report the review, sending a put request to the API to update the review meta-data. Clicking on a review image thumbnail renders a modal created using React DOM.
Selecting the “add a review” button at the bottom of the review list renders a new React DOM modal housing a form that allows users to rate the overall product score and their satisfaction with characteristics, before writing their own review with an option to add photos. Submitting the form sends a post request to the API to save the data.
-
Clone this repository to your local machine
-
Using npm, install project dependencies :
npm install -
Make a copy of the file
config.example.jsand rename it toconfig.js -
Update the GitHub and PHOTO API token (from Cloudinary)
-
Using webpack, bundle the files:
npm run build -
To run the server:
npm run start -
Open localhost: 3000 in the browser