Atelier is a modern fashion e-commerce site front end with over 1 million products built with ReactJS and ExpressJS, following a business requirements document and an backend API provided by the project stakeholders. Working as a team of four engineers, the first phase of our development was becoming acclimated to utilizing project management and ticket management tools, including Git Workflow and Trello. For the consistency of the codebase, we implemented Airbnb Style Guide. We practiced agile methodology and held daily standup to keep track of each member's progress on the sub-components of the product. The site has a clean, minimal and modern design. With end users in mind, it also offers a cohesive user experience, high readability and accessibility. Our team challenged ourselves by learning new technologies, such as CSS framework SASS, within a day of the sprint planning session.
Overview, whete the user can view current product images, select different styles, and expand the currently displayed image to full size.
The Related Items and Comparison component consists of two sections. One is the related products carousel which displays a list of products related to the main product, the other is the outfit list carousel which displays a list collection of user selected outfits and is unique to each user.
The above gif demonstrates the ability to dynamically render all products related to the main product. When clicking on a specific related product, it will take the user to the overview section to view the details of that product. Upon clicking the star icon, a comparsion table modal which compares features and characteristics of the current product with the main product will open, to help the user decide which product is right for them. Discounted price will also be reflected if the product is on sale.
It also demonstrates the ability to dynamically render the user's customized outfit list which contains all of the user selected items. Upon clicking plus button, the current viewing product will be added to the outfit list. To remove an item from the list, click 'X' button. Users cannot add the same item twice to the collection. When a duplicate selection happens, a modal will pop up showing the style has already been added.
The Questions and Answers component allows asking and answering of questions for the product selected. This component extends the ability to view and search questions, ask questions, answer questions and provide feedback on questions about the current product. Questions and answers are displayed in order of their user voted 'helpfulness'.
The above gif demonstrates the ability to view all of the questions related to the currently selected product. By clicking on the individual questions any associated answers will open in an accordion, with the ability to view more answers in groups of five until all of the available ansewrs are displayed. The first modal displayed is the user input for asking a question related to the currently selected product. Also demonstrated is the ability to answer any of the posted questions. A user can open an answer modal and fill out a form. The form incorporates client side validation before sending the information to the database.
The above gif demonstrates the ability to upload images to be displayed with answers. It also demonstartes the search feature which will filter questions according to user inputs.
The ratings and reviews component allows users to post reviews for any product. Reviews can be filtered by relevancy, date, and helpfulness rating. They can also be sorted by rating in combination with the other filters. The component has a search function to filter reviews by keywords, which will be highlighted when matched. Image thumbnails expand to a full screen modal when clicked.
The gif below displays the modal for adding a review for a product. This includes helpful descriptions for what the different characteristics are and form validation to ensure necessary inputs are entered and the minimum length for a review is met. Users can also attach photos (up to 5) to a review using cloudinary, which will display as thumbnails.
Ensure that you have node working on version 16.8.2 or higher. If you do not you can install it here https://nodejs.org/en/download/
- Install all dependencies
npm install- Start server
npm run server- Start webpack
npm run dev- Create .env file and paste your Github personal token like this
GITHUB_API_KEY = 'YOUR TOKEN GOES HERE'We hope you enjoy the site! We loved working together, and had tons of fun building Atelier. If you'd like to get in touch with the Atelier developers, please contact us below.
| Full Name | Widget | GitHub | ||
|---|---|---|---|---|
| Parker Sturtevant | Product Overview | Parker Sturtevant | Parker Sturtevant | |
| Lei Liang | Related Products | leiliangmichelle | Lei Michelle Liang | [email protected] |
| Andrew Dye | Questions and Answers | Andrew Dye | Andrew Dye | [email protected] |
| Max Philip | Ratings and Reviews | Maxwell Philip | Maxwell Philip | [email protected] |