Atelier Rogue
Background
Atelier Rogue is a front-end e-commerce platform that utilizes HackReactor's legacy API as a server to seed the website with product information. React hooks and styled components were used to render an interactive and responsive platform. The three main features of the website are:
Overview
Contributor: Peggy Tran
Product Overview
Features:
- Dynamically render product selected from HackReactor's legacy server API Image gallery carousel with the ability to zoom and expand the photo Styles Selector dynamically lists out styles based on the item Size Selector dynamically fills out based on product Add to cart feature Share to social media buttons
Add To Cart
BLURB GIF OF USAGE
Related Products:
Contributor: Jessica Yu
Related Products:
-
Related Products Cards displays product cards of similar related items that the user might like: and the components includes features of:
- a Scrollable list of product cards
- Product Preview Image
- images in a carousel of thumbnail images
- Each product card includes information of:
- Product Category
- Product Name
- Price
- Start Ratings (# of Reviews)
- A pull up feature of comparison Modal
Adding Outfits:
-
Outfit cards allow users to save and track individual products based on their interest.This component includes:
- Add to Outfit card which adds the current product to Your Outfit list
- No duplicate outfit
- The list should persist per customer even if they exit the website and return later
- Remove card icon('X') that removes the product from the list
// link your git
Ratings and Reviews:
GIF OF USAGE
Contributor: Joshua Ham
BLURB GIF OF USAGE
Getting Started
-
- short video
-
Getting Started (steps such as npm install, set up .env, run webpack, run serve)
Technologies Used
Setup and Workflow
Frontend Development
