Michael Raisch, Miles Owens, Tuan Nguyen, Jonathan Navarrete
Project Atelier is a front-end business app for online retail. It was designed with simplicity and visual appeal in mind. The sleek, straight-forward, and user-friendly design of the website allows for easy access to the navigation panel that is always present at the top of the page no matter where the viewport is located. The navigation panel includes a search bar and a button to switch to dark-mode. There is also a button at the bottom-right corner for convenience to scroll back to the top.
The Overview is the first component that the user sees, which brings the products at the forefront in the image gallery. The image gallery was implemented as a slider component to allow for a seamless transition when viewing the different styles that are available.
The Related Products component that follows was also envisioned as a slider component to provide a better user experience while browsing through the catalog. Each related product is displayed as a card that will redirect to the image gallery when clicked. The card includes a star icon that brings up a modal to compare the features of the current product in the image gallery with the respective card that was selected.
Immediately below is the Outfit Creation component where the user can store a product with the Add to Outfit card. Any stored products will remain on the user's list even when refreshing or leaving the website.
The Questions and Answers component contains a search bar and a list to display the product's questions. The list can be expanded through buttons and users can upvote or report any questions or answers. The list will update automatically of any matching words typed into the search bar. New questions and answers can be submitted through modals where form validation will verify the input fields upon submission.
The Ratings and Reviews component contains two main subcomponents: a star ratings section and a review section.
Atelier was built with Node.js, Webpack, Babel, React, Axios, and conventional CSS.
In order to run the project locally please read Requirements section for instructions setting up a local .env and for installing dependencies. Find further instructions for setting up the project for development or production in the Development and Production sections.
Node.js - version 16.0 or higher
- Move into the root directory of the repository
- Rename .env.example to .env and supply the appropriate values. Note: API_URL should end with / but base URL should not. Do not include quotation marks or semi-colons.
- Run
npm installto install all required dependencies