Front End Capstone is an e-commerce site built with React and Express, following a business requirements document and an API provided by the project stakeholders. Working as a team of four engineers, the first phase of our development was becoming acclimated to utilizing project management and ticket management tools, including the Git Feature Branch Workflow and Trello. For the consistency of the codebase, we implemented Airbnb Style Guide. We adapted an agile scrum methodology and held daily standup to keep track of each member's progress on the sub-components of the product. The main strengths of this storefront are a cohesive user experience, clear and easy-to-read usability as well as its sleek and modern design. Our team challenged ourselves by learning new technologies, including styled-components and React Hooks, within a day of the sprint planning session.
This is the first widget displayed on the page and it gives various information about the product, including a description, price, set of features, and images.
Style selector
Read more about this feature
- Similar styles of a product can be selected via thumbnail images. A checkmark is displayed in order to indicate the currently selected style.
- Selecting a style will update the list of sizes available for that style, as well as the quantity for each of those sizes currently in stock.
- The "Add to Cart" button does not currently add to a cart on the site, but it will report an error when clicked without the proper size or quantity selected.
- Social media buttons are also included, without actual functionality at this time, but they demonstrate the appropiate layout that would be required for implementing the feature.
Image gallery
Read more about this feature
- The selected style will also be reflected in the image gallery to the left. The image gallery will have thumbnails that can be scrolled through on the left hand side. There are also arrows in the bottom right corner to navigate these images. - Upon clicking the large image, the image gallery will overtake the product overview component. Then the image can be clicked again to enter a image zoom mode. The enlarged image will pan in accordance with the movement of the user's mouse in order to fully explore the image at 2.5 times its previous size.
The Related Products carousel displays a list of products related to the main product while the Wishlist carousel is unique to each user, displaying only the products that have been wishlisted by the user. This widget includes the following features:
Scroll functionality and comparison table
Read more about this feature
Conditionally renderd scroll buttons
- The buttons appear when the number of products overflow past the page.
- They deactivate when there are no more cards to scroll through.
Feature comparison table
- On clicking the compare button in the product description, a modal containing a dynamically rendered comparison table is displayed.
Wishlist an item
Read more about this feature
Wishlist button
- The functionality to add a product to the Wishlist carousel is shared by the following buttons: the heart icon in each product card found in the related product carousel; the heart icon in the product overview section; and the '+ Add Current Outfit' button in the Wishlist carousel.
- Upon clicking a wishlist button, the product is added to Wishlist carousel. Once the product has been added, it cannot be re-added.
- Using the browser's localStorage, the data of wishlisted items persist even after a page refreshed.
Remove button
- Upon clicking the 'X' icon in the Wishlist carousel, the product is removed from teh list. The user can re-add the product after it has been removed.
This module wil allow asking and answering of questions for the selected product. The functionality contained within this module can be divided into five unique subsections:
Read more about this feature
- Search for a question
- View questions
- View answers
- Ask a question
- Answer a question
- All question and answer data is obtained through HTTP requests to the API. If a different product is selected, it will trigger a request to the API and the module will re-render. After the data is received, questions and answers are sorted by their helpfulness, or number of helpful upvotes. Users are able to report both questions and answers to the website, as well as vote on a question or answer helpfulness up to a total of one time.
- The search bar will only begin to filter questions after three characters are typed. It will also continuously resort both answers and questions by their helpfulness.
- Adding a new question or answer will trigger a modal view with a form to be filled out and submitted. Upon submission, each field is validated based on a set of requirements provided in the business documents. Upon a successful submission, an post request will be sent to the API to persist the data.
The Ratings & Reviews module is the bottommost on the product detail page. This component will allow customer to veiw and submit reviews for the selected product.
Read more about this feature
Ratings
- This component displays ratings about selected product dynamically.
- Star ratings are displayed to represent the various review scores of the product. Upon being clicked, they will filter the reviews featured to only include ratings with the specified score.
Reviews
- This component dynamically renders reviews about selected products, and reviews can be sorted by the drop-down button.
- The Write Review button opens a submmission form with validation for the client to rate products.
- Reviews can be sorted in several ways, including a drop down bar for various metrics (date, helpfulness, and relevancy).
Node v16.13.1
NPM v8.1.2
This project uses dotenv.
The environment variables necessary to run the application can be found in the .sample-env file. Modify the variable values in this file in a new .env file with a valid GitHub Token and PORT number.
From the root directory, run the following commands in your terminal.
- Install packages:
npm install
- To initialize Webpack & Bundle:
npm run build-dev
- To start the server:
npm run server-dev
- To automatically compile changes into the bundle file:
npm run react-dev
The site is currently deployed in AWS EC2, which can be accessed here.
- Colin Fitzhenry - Questions & Answers
- Haley Jung - Related Products and Wishlist Carousels & Header
- Jordan Moore - Product Information
- Yilin Liu - Ratings & Reviews