Fashion House is an e-commerce retail web-portal that aims to allow users to shop for apparel. By integrating the front end with the Atelier API to access different data services, this single page application serves detailed information about a specific product by organizing the information into four specific modules
I was responsible for building the front end infrastructure for Product Overview Module.
Fashion House was primarily built with ReactJS on the front end and a lean Node/Express server on the backend. Other key technologies used are listed below:
- HTML
- CSS
- Javascript
- React
- React Router
- Axios
- Jest
- Enzyme
- CircleCI
- ESLint (AirBnB Style Guide)
- Babel
- Webpack
- Node
- Express
I was responsible for Product Overview Module.
- User should be able to view all the styles available for a specific product id.
- User should be able to select a specific style by clicking on it.
- User should then be able to view all the images available corresponding to a specific style.
- User should be able to browse between and zoom in on these photos in the image gallery.
- User should also be view the images in default and expanded view.
- User should be able to view product information such as product description, style name, product name, price corresponding to the specific style.
- User should be able to select a size.
- User should be able to select quantity.
- User should be able to add the product, size and quantity to the cart.
- Once you clone the repo, from the root directory run
npm install
- You will need a gihub personal access token to access our API. Please create a file called 'token.js' at the root directory and copy and paste the following code in the newly created file:
const token = <YOUR ACCESS TOKEN>; module.exports = token;
- To compile, from the root directory run
npx webpack
- To start server (default port 3000)
node server/server.js
- Navigate your browser to
localhost:3000/products/:product_id(for the :product_id try 23175)
Our team utilized the Git workflow. The master branch contained our working code, and specific work on individual features were done on a separate branch. Daily code reviews were done for PR approvals.
We also followed Agile practices by dividing the project into multiple reasonable sprints, daily standups and reflection. With Trello board to keep track of our tickets, we held daily morning standups to track the progress made by each engineer and updated our tickets accordingly.
The product detail page consists of four distinct modules:
The overview module is the top-most module on the Product Detail page. The main functionality contained within this module can be divided into several pieces:
- Image Gallery
- Product Information
- Style Selector
- Add to Cart
The Ratings & Reviews module will allow viewing and submission of reviews for the product selected. The functionality contained within this module can be divided into several pieces:
- Write new review
- Reviews List
- Sorting
- Rating Breakdown
- Product Breakdown
The Questions & Answers module will allow asking and answering of questions for the product selected. The functionality contained within this module can be divided into several pieces:
- View questions
- Search for a question
- Asking a question
- Answering a question
The Related Items & Comparison Module displays two sets of related products. The first set will be a list of products, determined internally, that are related to the product currently being viewed. The second set will be a list, custom created by the user, of products which the user has grouped with the current product into an ‘outfit’.
- Related Product Cards
- List Behavior
- Related Product List
Please learn more about the overall project and contibutors here: https://github.com/7-Oscillating-Owls/hoo-dunit
Contributors Ankur Tandan, Kanchan Chauhan, Monica Bui, Philip Ho