Demo project GOAT

React 16 + Rxjs + Typescript + create-react-app

At root directory, run commands:

# install dependency
npm i
# build static assets to /build
npm run build 
# Serve HTTP at localhost:3000
npm run start:static

Open another terminal, and run command

npm run start:json

Yes, I choose to use my limited time on writing end-to-end test instead of unit test in reality too.

At first time, need to install Webdriver manager and other required dependencies.

npm run test:init

Then run actual test.

npm test

During run test, above start:json and start:static commands should also be kept running.

Other user story assumptions

As a user, I can see responsive grid layout for sneaker list page, with 2-3-4-6 columns in difference size device, the grid cell border should be drawn properly.
As a user, I can see responsive layout in sneaker detail page.
As a user, I want to visit specific sneaker page through human readable URL path like slug
As as user I can see loading indicator properly ( a line of poor text is for demo only)
As a user, when I am visiting sneaker detail page, I can history back to list page and see page is scrolled to proper position where I was.
As a user, I want to see fancy animation during route switching.
- No, the author is too tired to demo it in this exercise.
As a SEO crawler, I want see those static pages served in /sneakers/.... address.
- No, the author is too tired to demo it in this exercise.