Contacts

JavaScript single page web application that lists a user's contacts.

Data API

For now API is mocked with an initial state inside the Redux store, and all operations are applied on the client, not the server. This section outlines what the app expects.

The API must be RESTful, have the following endpoints, and returns data in JSON format

GET /contacts

Returns a list of all available contacts:

[
  {
    "id": 1,
    "name": "Guillaume Lambert",
    "title": "Senior Front-End Developer",
    "address": "2675 Basile-Routhier, Laval, QC. Canada",
    "phoneHome": "514-555-5555",
    "phoneWork": "514-555-5555",
    "email": "glambertmtl@gmail.com",
    "picture": "https://placehold.it/200/f7f7f7/424242/?text=Photo",
    "note": "Building the Web since 1996"
  },
  ...
]

GET /contacts/{id}

Returns a contact by ID:

{
  "id": 1,
  "name": "Guillaume Lambert",
  "title": "Senior Front-End Developer",
  "address": "2675 Basile-Routhier, Laval, QC. Canada",
  "phoneHome": "514-555-5555",
  "phoneWork": "514-555-5555",
  "email": "glambertmtl@gmail.com",
  "picture": "https://placehold.it/200/f7f7f7/424242/?text=Photo",
  "note": "Building the Web since 1996"
}

POST /contacts

Creates a contact, the following parameters are expected:

• name (required)
• title
• address
• phoneHome
• phoneWork
• email
• picture
• note

Must return same data format as GET /contacts/{id}.

PUT /contacts/{id}

Edits a contact by sending the entire data back to the server, the following parameters are expected:

• name (required)
• title
• address
• phoneHome
• phoneWork
• email
• picture
• note

Must return same data format as GET /contacts/{id}.

DELETE /contacts/{id}

Deletes a contact by ID, returns true if successful, false if an error occured.

Installation

The following are required:

• Node Stable LTS (6.9.1 as of writing this)
• NPM (3.10.8 as of writing this)

The easiest way to install Node is to use nvm, which enables you to install multiple node versions on the same machine.

Once nvm is installed, run the following command in your terminal:

nvm install v6.9.1 && nvm alias default v6.9.1

You can now run the node modules installation from the project root:

npm install

Development

Start the development task by running the following command. It will give you a http://localhost:3000 URL with file change live-reloading and hot-reloading for CSS & React components:

npm start

Building

Run the following command in order to build the CSS and JS:

npm run build

Next steps

• Implement photo upload
• Use real API, consider all possible cases (errors, timeouts etc.)
• Fine-tune UI responsiveness & UX
• Add inline form validation
• Use CSS modules to encapsulate components-specific styles
• Add routing with HTML5 history/state
• State connect optimization
• Save app state in storage
• Add state transitions & animations
• Tests!