# Project Atelier: Graviton Front-End Capstone <!-- omit in toc --> ## Overview <!-- omit in toc --> This is a web-based front-end for the Atelier API, a web-based e-commerce platform for buying and selling clothing. Our team consists of four developers: Ari Tavikoli, Benny Van, Gabriela Taylor, Melodie Peck. We utilized React and Node.js to create the user interface, and utilized the Atelier API to fetch and display data about clothing products. ## Table of Contents <!-- omit in toc --> - [Description](#description) - [Overivew Module](#overivew-module) - [Related-Products Module](#related-products-module) - [Questions-And-Answers Module](#questions-and-answers-module) - [Reviews Module](#reviews-module) - [Installation](#installation) - [Usage](#usage) - [Contributing](#contributing) - [Credits](#credits) - [License](#license) ## Description Project Atelier is an updated client-facing retail web-portal that allows users to view details of specific clothing products. This project can be broken up into four main components: Overview, Related-Products, Questions-And-Answers, and Reviews. ### Overivew Module The overview module allows users to examine the product further. Users can view different styles of the product, expand the product image, and selecting ### Related-Products Module The related products feature displays other products a customer might be interested in, based on the one currently selected. - Click the star icon to view a comparison of any related item to the one currently being viewed. Also included in this module is an "outfit" feature which allows a customer to build a look by adding and removing products of interest. - Click "Add to Outfit" to add the item currently being viewed to the outfit list. - Click the "x" button in the top-right corner of any outfit item to remove it from the list. ### Questions-And-Answers Module The Questions-And-Answers module allows users to query questions and answers related to the product. It sorts both questions and answers by usefulness, allows querying for specific questions, and allows users to submit their own questions and answers. ### Reviews Module The reviews module provides an accurate star rating for the product, sorts reviews list by various criterias, and allows users to submit their own thoughts about the product. ## Installation To install the project, follow these steps: 1. Clone the repository to your local machine. 2. Run `npm install` to install the required dependencies. 3. Create a `.env` file in the root directory of the project and add the necessary environment variables for your API. 4. Run `npm start` to start the development server. ## Usage Once you have the website running, you can use the navigation menu at the top of the page to access the different pages on the website. Each page is designed to be fully responsive and optimized for any device, so you can view the website on a desktop, tablet, or mobile phone. ## Contributing We welcome contributions to our project! If you would like to contribute, please follow these steps: 1. Fork the repository to your own GitHub account. 2. Clone the forked repository to your local machine. 3. Create a new branch from the main branch for your changes. 4. Make your changes to the code or documentation. 5. Test your changes to ensure that they work as expected. 6. Commit your changes with a descriptive commit message. 7. Push your changes to your forked repository. 8. Create a pull request from your branch to the main branch of our repository. 9. Wait for our team to review your pull request and provide feedback or merge it. ## Credits This project was built using the following technologies: - React - Axios - React Router - Node.js - Express.js - Webpack ## License This project is licensed under the MIT License.