Cornershop Frontend Test

⚠️ Before you begin

Create a new git repository on the root of this folder, upload it to Github, and invite @mcarafie and @cornershop-hr as collaborators.

Overview

You have been commissioned to implement a counter application following the design specs provided here.

The application consists of several screens where each screen has one or multiple states that you will have to implement following the design specs the best you can.

We have provided starter boilerplate so you can write your application without any hassle and also a NodeJS dummy backend with all the neccessary endpoints to persist your data.

For bootstrapping the frontend application we're using react-scripts, so as you might have guessed you must use React (it's our primary view layer for frontend applications here at Cornershop).

Note: This is NOT a backend test. Don't make it require any databases. Don't touch the server folder. Just leave it as it is.

Requirements

Your submission will be evaluated considering the following criterias:

• Good implementation of UI elements, both visually and at code level.
  • Extra points for writing custom styling code for UI elements.
  • Use whatever CSS flavor you want: plane old CSS, SASS, LESS, CSS-in-JS, CSS modules, everything is allowed.
• Good architecture and software design.
  • Hint: Usage of design patterns, good code organization, separation of concerns, etc.
• Use of best practices when writing code.
  • Hint: Idiomatic & readable code, good use of composition, DRY, etc.
• The application must persist data back to the server.
• Feature completion (all features must be implemented for a perfect score).
• Good management of state using built-in React features or third party dependencies (context, redux, mobx, xstate or whatever you might like).
• You must include tests.
  • Behavior tests are perfect.
• Your project must be self-contained (make sure you're not using global dependencies).
• We would love to understand your thought process, so writing a little summary of your choices, what you did and how you solved the test is required (write it here on this README file).

Please consider that we expect your solution to be production-ready. In other words, that millions of users would be thrilled to use your product.

Note: You can use whatever dependencies/libraries you want, the only requirement dependency-wise is to use React.

Getting started

First and foremost, make sure you have node and npm (or yarn) installed on your machine, then run:

$ npm install
$ npm start

For yarn users:

$ yarn
$ yarn start

API endpoints / examples

Since the backend API runs locally on a different port (3001) than the react-scripts dev server (3000), we have setup a proxy so you don't have to do anything special to consume the API (fetching data from /api/v1/counter will do).

The following endpoints are expecting a Content-Type: application/json header.

GET /api/v1/counter.

Fetch a list of counters.

/* Response */
[]

POST /api/v1/counter.

Adds a counter.

/* Body */
{ title: "bob" }

/* Response */
{ id: "asdf", title: "bob", count: 0 }

POST /api/v1/counter/inc

Increments the value of a counter.

/* Body */
{ id: "asdf" }

/* Response */
{ id: "asdf", title: "bob", count: 1 }

POST /api/v1/counter/dec

Decrements the value of a counter.

/* Body */
{ id: "asdf" }

/* Response */
{ id: "asdf", title: "bob", count: 0 }

DELETE /api/v1/counter

Deletes a counter.

/* Body */
{ id: "qwer" }

/* Response */
"qwer" // The id of the deleted counter

---

Good luck! 🎉

We hope your submission is… to die for.