Kristin Gadgil
GitHub • LinkedIn
- About this project
- Workflow
- Installation
- Technologies
- Packages
- Product Overview (Don V.)
- Related Products & Outfit List (Kristin G.)
- Ratings and Reviews (Ben K.)
Description of the Project
Our Front End Capstone project was designed to emulate real life development work in a team. This project is a foray into real development work - building key components of a complex whole and integrating those with the rest of the system. The project offers exposure to new technical and project management challenges alongside shifting team dynamics and fewer clear-cut answers.
Objectives
Deliver a fully functional web application that meets the specifications and requirements outlined by project stakeholders. Work together on a single code base by dividing up the work among team members but working collaboratively to produce a single front end application. Integrate the front end with the existing API for the product, and demonstrate a working application at the end of the project timeline.
Support
Issues and Feedback can be reported through our GitHub Repository: ProjectCatwalk Issues
Our team used Agile workflow for this sprint.
- Trello for ticket management using the Kanban template.
- GitHub for source code versioning and Management
- VSCode for source code editing
ProjectCatwalk requires both NodeJs and npm to run
- Download the repo using git
git clone https://github.com/HR-TeamBrie-FEC/ProjectCatwalk.git
- Install dependencies
npm install
- Create a
config.jsfile in the root directory, store your GitHub token like so:
module.exports = {
TOKEN: 'YOUR TOKEN HERE',
};
- Note, this file is ignored in .gitignore but is required in order to pull data from the API.
- Run the Webpack compiler
npm run build
- Run the App
npm start
- Material UI
- Moment.js
- Formik
- Compression
- react-inner-image-zoom by laurenashpole
- react-items-carousel by kareemaly
- react-share by nygardk
- yup by jquense
Image Gallery Features
- Default Gallery View: A visual component that provides a way to browse the available photos for each product style. Using the arrows available on either side of the view or clicking the thumbnails indexed on the left of the gallery will allow you to peruse through the photos. Clicking on the view will open an Expanded view of the Image Gallery
- Expanded View: A visual component that is opened by clicking on the default view of the Image Gallery. The component spans across the entire browser width and provides a larger view of the selected photo. Navigation controls at the top of the photo will allow you to continue browsing through photos without having to leave the view. Clicking on the larger photo will allow you to view a "zoomed-in" portion of the photo at its maximum size. Moving your mouse while zoomed in will pan the photo until the mouse leaves the photo frame, or moves over the navigation controls.
Product DetailsFeatures
- Style Selector: Each product comes in a varied amount of styles. The style selector lists visual thumbnails of each available style and allows you to click on the desired style to update the image gallery and stock selection.
- Add To Cart: The Add to Cart form lists the available sizes available for the currently selected style. Selecting a Size allows you to select the available quantity of the product you'd like to order in that size, as well as enabling the Add to Cart button to finalize the sale. For Styles where there are no available stock, the Size and Quantity selection is not displayed and the disabled "Add to Cart" button displays "Out of Stock" instead.
Related Products List Features
- Related Products List: A carousel that displays four related product cards at a time and changes when the main product is changed. It has arrows that show up if more than four cards are provided that allow you to scroll through the list.
- Product Card: A card that displays the default image for the product, the category, the name of the product, the price, and the average rating. Clicking on a product card will change the main product featured on the page.
- Comparison Modal: When you click on the star icon located at the top of a product card, a comparison modal will appear comparing the product card's features to the main product's features.
Outfit List Features
- Outfit List: A carousel that displays three outfit cards at a time and is manipulated by the user. It has arrows that show up if more than three cards are chosen that allow you to scroll through the list.
- Outfit Card: The appearance of this card is very similar to the product card in the related products list. Instead of a star in the top right corner, it has an "x". When the "x" is clicked, the outfit card will be deleted from the outfit list.
- Add Outfit Button: Clicking on this button will add an outfit card for the main product into your outfit list carousel.
Ratings and Reviews Features
- Review List: A list that displays two review tiles at a time. Clicking the More Reviews button will cause an additional two tiles to display until all reviews have been rendered. Once the list reaches a specified height, the user will be able to scroll through the list without moving down the entire webpage. The list can also be sorted by most relevant, most recent, or most helpful.
- Ratings Breakdown: For each product, the reviews are broken down by the rating given on a scale between one and five stars. The number of reviews for a each rating is displayed next to a sliding bar that visually represents the percentage of reviews of that rating. Clicking on one of the ratings will filter the review list to show only the reviews with that rating. Clicking on additional ratings will add on to the filters and clicking on one of the added filters will remove it. Once a filter is added, there will be a button to remove all filters rather than having to remove them one at a time.
- Product Breakdown: Each product has a set of characteristics with average ratings from all of the reviews. A bar displays what that average rating is on a scale from one to five with the meaning of the highest and lowest ratings displayed below.
- New Review Form: Clicking on the Write A Review button opens a modal with a form for users to write a new review for the current product. The user can submit a rating, a summary, a review body, a recommendation, characteristic ratings, photos, a name, and an email. Upon submitting the review, the user's inputs will be validated and appropriate error messages will display if the input is invalid.