Catwalk

Catwalk is the re-imagined product detail page of an e-commerce web application, comprised of four main modules.

Main Modules

Product Overview

• Guides customer through selecting a specific style and size and adding it to their cart

• Tech Lead: Kevin Goble

Key Features

1. Image gallery
2. Product information
3. Style selector
4. Add to cart

Ratings & Reviews

• Allows customer to view and submit rating and reviews for the selected product
• Tech Lead: Adam Klingbaum

Key Features

1. Write new review
2. Reviews list
3. Sorting
4. Rating breakdown
5. Product breakdown by key characteristic

Questions & Answers

• Allows customer to view, ask and answer questions for the selected product
• Tech Lead: Takahiro Hirakawa

Key Features

1. View questions
2. Search for a question
3. Ask a question
4. Answer a question

Usage

Prerequisites

1. Node.js
2. Npm
3. GitHub personal access token (read:org, user)
4. Google Cloud Storage bucket

Setup

1. Clone the repository and change into project directory

git clone https://github.com/labbit-fec/catwalk.git
cd catwalk

2. Install package dependencies

npm install

3. Create a copy of server/config.example.js and rename it server/config.js

cp server/config.example.js server/config.js

4. Populate your GitHub personal access token in server/config.js to enable authentication for the back-end API

module.exports.TOKEN = 'Insert GitHub Token here';

5. Create a copy of server/gc/gc-config.example.json and rename it server/gc/gc-config.json

cp server/gc/gc-config.example.json server/gc/gc-config.json

6. Populate your Google Cloud Storage bucket configuration details in server/gc/gc-config.json

{
  "type": "FILL_ME_IN",
  "project_id": "FILL_ME_IN",
  "private_key_id": "FILL_ME_IN",
  "private_key": "FILL_ME_IN",
  "client_email": "FILL_ME_IN",
  "client_id": "FILL_ME_IN",
  "auth_uri": "FILL_ME_IN",
  "token_uri": "FILL_ME_IN",
  "auth_provider_x509_cert_url": "FILL_ME_IN",
  "client_x509_cert_url": "FILL_ME_IN"
}

7. Transpile and bundle React source code

# Production mode
npm run build

# Development mode (watch enabled)
npm run react:dev

8. Start Express server

npm start

# Or, with nodemon for automatic restart
npm run server:dev

9. Navigate to app server in your browser

Base url will show a default product

localhost:3000

Primary Tech Stack

• React
• Node.js
• Express.js
• Axios
• Multer
• Google Cloud Storage
• Jest
• React Testing Library
• Mock Service Worker

Contributors

The hard-working dev team at labbit

Made with contrib.rocks.

License

Distributed under the MIT License. See LICENSE.txt for more information.