Project Catwalk

This is a Hack Reactor front end capstone. We were approached by a client to update an old e-commerce front end to boost sales and activity.

Related Products and Your Outfits

I was responsible for the component that displayed related products and an outfit list created and managed by the user. It mainly consisted of two carousels, one that showed related products and another that showed the user's outfit, which consisted of products added by the user. Each carousel cycles left and right, with the arrows on either side only appearing if there are cards left to view on their respective sides. For the related products section, each card has a products image, its category, price (sales price in red if relevant), and its star rating. The top right of the card has a star, which opens the comparison modal. This modal shows comparisons between the product on the current page and the product card where the star was clicked.

The "Your Outfit" carousel has a button for adding the current product on the page to the list, with the same information on each card as the related products cards while replacing the star with an X icon, which removes the product from the outfit list when clicked. If the outfit list becomes long enough, the carousel will be cyclable similarly to the "Related Products" carousel.

Development Server

• Copy .env.example to a new file named .env and fill in the VITE_API_TOKEN field with a GitHub token. You may also want to replace the VITE_API field with the endpoint of your own API server.
• Run npm install to install dependencies.
• Start your application with npm run start.
• Visit http://localhost:3000.

Production Server

Building

npm install
npm run build:client
npm run build:server

Running

• Set the following environment variables:
  • PORT: port to which the server should bind
  • VITE_API: endpoint URL for the API server, e.g. https://app-hrsei-api.herokuapp.com/api/fec2/hr-rfp
  • VITE_API_TOKEN: GitHub token
  • PRODUCT_CACHE_SECONDS: number of seconds before a product's information expires from the server-side cache
  • PRODUCT_CACHE_SIZE: maximum number of products to store in the cache
• Start your application with npm run serve.