thomas0306 / adidas-code-challenge

Adidas-Code-Challenge

Demo

How to deploy

1. To run development environment

npm install && npm start

2. To deploy on a server

npm install && npm run start:production:notest

3. To build and deploy on docker

npm run docker

Requirements checklist

Functional requirements

• Route for searching product: [GET] /api/suggestions #5
• Able to search for an article: [GET] /api/suggestions #2
• Able to get a full wishlist: [GET] /api/wishlist/:identifier #6 #1
• Able to add it to a wishlist: [POST] /api/wishlist/:identifier/item #3 #20
• Able to delete from a wishlist: [DELETE] /api/wishlist/:identifier/item/:id #4 #8

Non-functional requirements

• Single Page Application (SPA) #14
• Preferred technology stack: React & Redux #9 #10
• In-memory storage backend #19
• Dockerized application #12
• CI/CD Pipeline proposal #13
• Documentation #34

Reason for choosing technologies / methodologies

• react-boilerplate
  • I have used this application template because I need speed.
  • It is pre-built and very easy to use
  • I don't have to take care of expressjs, react & redux integration
• alpine linux image
  • Light-weight and minimal linux image
  • Ready for production
• http-proxy-middleware
  • Reverse proxy for suggestions API
  • Prevent CORS issue
• agile work mode / feature branch
  • Better tracking
  • Prioritization

Worklog

Day 1

• Requirement analysis
• Issue/User story documentation
• Search for boilerplate projects

Day 2

• Implement proxy for Adidas suggestions API

Day 3

• Backend MVP completed

Day 4

• Revisit concepts with React/Redux
• Frontend skeleton completed
• Implement display wishlist
• Implement search & display suggestions

Day 5

• Implement add an item to wishlist
• Implement delete an item from wishlist
• Implement sharing functionality
• Implement scrollable view
• Documentation

Day 6

• Build enhancement backlog

Inspirations / Lesson learned

1. Connecting new concepts with existing knowledge

I believe linking new knowledge with the existing knowledge is the best way of learning.

	New Knowledge	Existing Knowledge
1	Redux state/action concept	Makrov decision process
2	conditional render in React	*ngIf in angular
3	generator function in react-saga	generator function in python

2. What's new in React ecosystem?

The last time I have used React & Redux was 2 years back. I felt in the latest version it is already a big difference:

	New Concept
1	react-saga (async/await/yield) for API calls
2	hooks instead of component lifecycle

3. Identifiers from repl.it

Inspired by the web application, I have used concatenated words for unique identification, i.e. WhimsicalCheapAdministrator

adidas-code-challenge's Issues

As a user, I want to be blocked by an overlay when async requests is happening

As a frontend user, I want to delete an article from my wishlist

As a frontend user, I want to search for articles with adidas suggestions api

As a backend system, I want to integrate express server

As a user, I want to use the suggested keywords as auto completion

suggestions api provides more narrow keywords for query, it should be shown as a autocompletion in the search input.

As a backend system, I want to issue a random phase for identification

As a full application, I want to have regression testings

For both frontend and backend

As a frontend app, I want to integrate react

As a user, I want the columns in frontend to be individually scrollable

As a frontend app, I want to integrate redux

As a code reviewer, I want to have a markdown documentation

• How to deploy
• Reason for choosing technologies
• Methodology used
• Basic architecture diagram
• Tasks on each day

As a frontend user, I want to add an article to my wishlist

As a backend system, I want to implement more validations check

• Check if any parameters are missed in the [POST] api calls

As a backend system, I want to serve my data structure in observable/subject pattern

As a backend system, I want to serve the wishlist post api

As a backend system, I want prevent CORS

• Integrate JWT token
• Issue temporary token in /api/token endpoint
• Check Authorization Bearer for the other requests

As a frontend app, I want to serve a helloworld page

As a backend system, I want to serve the wishlist item post api

As a full application, I want to have a CICD pipeline

As a backend system, I want to serve the wishlist delete api

As a backend system, I want to host a in memory data structure for wishlist storage

As an user, I want to share and reopen my wishlist in another browser

As a user, I want to see Adidas logo in the UI

As a full application, I want to lint and comment my code

• linting
• improve comments

As a user, I want to share my wishlist to friends and my other devices

• Share button on top right
• Show and copy the current url

As a full application, I want to deploy to kubernetes clusters

This is to ensure the availability of the application

As a frontend user, I want to view my wishlist

As a backend system, I want to proxy the adidas suggestions api

As a backend system, I want to serve the wishlist get list api

As a full application, I want to deploy to Docker instance