An ecommerce website to purchase and save retail products.
Contributors »
Pongsak Pattamasaevi
·
Amanda Klein
Table of Contents
The objective of the Runway36 website was to make a user friendly ecommerce site that provided detailed information of each product while also providing related products and saving capabilities. Our team of software engineers was given two weeks to create the application from a business requirements document. Product data was supplied to the team from a blackbox API. Our site is comprised of the features detailed below.
Product Detail --Amanda Klein
Features:
- Nav Bar: Customer can select the PEPMANDA logo to be redirected back to the original page.
- Product Information: When a customer selects on a product the page will show the name, category, original price / sale price, color option thumbnails, product description, and image carousel of the current selected colorway. To share global state throughout the site to have real time updates to the style selected we applied a Redux store.
- Image Gallery: The main colorway selected will have an image carousel of all images pertaining to that colorway. The customer can toggle between the images to decide if they would like to pruchase. This functionality was achieved using CSS.
- Style Selector: Each product selected refreshes the color option thumbnails. The customer can then toggle between the colors to decide which one they like best.
- Add To Cart: Once the customer has chosen the product and color they would like to purchase, they can now add to cart. The cart functionality provides them with the option of quantities and sizes available. If the style or size is out of stock, it does not appear. The customer will be alerted when their item has been successfully added to their cart. To achieve this functionality I utilized React Hooks.
Related Items and Comparison --Pongsak Pattamasaevi
Features:
- Related Product List
- Your Outfit List
| Frontend Languages |
|
|---|---|
| Frameworks & Libraries |
|
| Utilities |
|
| Workflow |
|
| Deployment |
|
Our team used Agile workflow for this sprint.
A Trello board was used to create and track tickets. We held daily scrum meetings to discuss accomplishments, challenges, and upcoming tickets. To effectively collaborate remotely while allowing for quick communication if needed, we utilized Discord, Slack, and Zoom.
We implemented Git Feature Branch Workflow. All pull requests in Github were reviewed by another team member before being merged into the main branch.
git clone https://github.com/https-github-com-amandaklein1/fec_project_catwalk.git
npm install
npm start
npm run build-prod