A modernized e-commerce site built for an optimal user browsing experience.
Brett Tanonaka
Majd Saleh
Minseok Song
Nicholas Milligan
- Light/dark mode toggle
- Optimized performance using Redux
- Details providing a product overview, price and key features
- Ability to add items to cart with with only in-stock items visible
- Scroll through images, expand images and zoom in on specific parts of the image
Zoom view tracks mouse to expand parts of image
- In the expanded view clicking the image enlarges the image by 2.5x
- The user can view different parts of the image by moving the mouse around
- List of suggested items that are related to the current product
- Outfit list generated by the user that saves when the browser is closed
- Item lists become carousels when number of items extend beyond the size of the screen
- Modal toggle that compares the features of the selected product to the current product
See Comparison Details
- View and add questions and answers using a modal window.
- Filter questions using a search bar.
- Report or mark questions and answers as helpful with immediate feedback.
See Q&A Forms
- Product ratings breakdown, visual representations of ratings and product characteristics
- Product specific reviews including uploaded images
- A custom form for adding reviews and a drag and drop image upload widget
- filter reviews by rating, relevance, helpfulness or date posted
See R&R Form
Form to submit a new product review
See R&R image upload
Modal window to upload images to product reviews
</details>
Installation
- Clone the repository
git clone https://github.com/Wired-Wardrobe/project-atlier.git - Install the dependencies
npm install - Copy example.env file and rename to .env with the following within
PORT=3000 HOST='localhost' API_TOKEN='Insert GitHub API token' - Run the following script
npm run build npm start