To run the server:
npm startTo run the client:
cd client
npm startCreate a single page web application to manage a task list using React.
The application provides the functionality to view the list of to-do items, create them, and mark them as done. The front-end technology is based on JavaScript / HTML / CSS. Tasks are stored using a Rest service. Please realize data transfer between web client and back-end service.
The server-side implementation is provided and implemented based on Node.js. The API is documented below. Please deliver an appealing, well-crafted and creative solution. You are free to extend the feature set.
Don't forget to polish your user interface with your flavor of CSS.
The back-end is based on Express, a Node.js web application framework.
To setup the server install Node.js in Version 12.18.3 or newer from the Node.Js Website. Then run the following command in the project root. This downloads all required dependencies to run the Server.
npm installRun the following command in the project root:
npm startThis is the main entry point, the server delivers the index.html file which is located in the project's public folder. Static files in public are served as well.
GET /
curl http://localhost:3000/HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Content-Type: application/json; charset=utf-8
Content-Length: 43
Date: Tue, 11 Oct 2016 09:52:06 GMT
Connection: keep-alive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo App</title>
</head>
<body>
<h1>Todo App</h1>
TODO: build app
</body>
</html>
This Method retrieves the list of tasks that the server currently knows about. Restarting the server will reset the tasks since it is using an in memory storage solution.
GET /api/tasks
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Content-Type: application/json; charset=utf-8
Content-Length: 43
Date: Tue, 11 Oct 2016 09:52:06 GMT
Connection: keep-alive
{
"1": { "id": '1', "text": "Read description of programming challenge" },
"2": { "id": "2", "text": "Implement an awesome web app" },
"3": { "id": "3", "text": "Polish project" },
"9": { "id": "9", "text": "Send solution to LogMeIn" }
}
curl http://localhost:3000/api/tasksThis will save the new task in the in memory storage.
POST /api/tasks
| Name | Type | Description |
|---|---|---|
| id | string | the id of the tasks, must be unique |
| text | string | the text of the tasks |
HTTP/1.1 204 No Content
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Date: Tue, 11 Oct 2016 09:47:41 GMT
Connection: keep-alive
curl -i \
-H "Content-Type: application/json" \
-X POST \
-d '{"id":"001","text":"my great task"}' \
http://localhost:3000/api/tasksThis will update the task in the in memory storage.
PUT /api/tasks/:id
| Name | Type | Description |
|---|---|---|
| text | string | the new text of the tasks |
HTTP/1.1 204 No Content
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Date: Tue, 11 Oct 2016 09:52:06 GMT
Connection: keep-alive
curl -i \
-H "Content-Type: application/json" \
-X PUT \
-d '{"id":"001","text":"my great new task"}' \
http://localhost:3000/api/tasks/001This method will delete the task in the in memory storage.
DELETE /api/tasks/:id
HTTP/1.1 204 No Content
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Date: Tue, 11 Oct 2016 09:52:49 GMT
Connection: keep-alive
curl -i -X DELETE http://localhost:3000/api/tasks/001