JavaScript single page web application that lists a user's contacts.
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
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": "[email protected]",
"picture": "https://placehold.it/200/f7f7f7/424242/?text=Photo",
"note": "Building the Web since 1996"
},
...
]
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": "[email protected]",
"picture": "https://placehold.it/200/f7f7f7/424242/?text=Photo",
"note": "Building the Web since 1996"
}
Creates a contact, the following parameters are expected:
- name (required)
- title
- address
- phoneHome
- phoneWork
- picture
- note
Must return same data format as GET /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
- picture
- note
Must return same data format as GET /contacts/{id}
.
Deletes a contact by ID, returns true
if successful, false
if an error occured.
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
Start the development task by running the following command. It will give you a https://localhost:3000 URL with file change live-reloading and hot-reloading for CSS & React components:
npm start
Run the following command in order to build the CSS and JS:
npm run build
- 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!