已完成

Project for Web&Mobile App Developers

该项目成功由DreamOne ,以$150 USD的价钱在5 天内完成。

为像这样的项目获取免费报价
项目预算
$10 - $150 USD
完成于
5 天
全部竞标
6
项目描述

Build a front-end application that communicates with the server provided in this repository. You should use react js framework or angular atleast.

The application you will build is a very simple player management tool. The user should be presented with a list of players received from the server, and have the option to add new players and update/delete existing ones. Think CRUD

How to run the server

The server is a minimal HTTP-server exposing a REST-type API written using nodeJS and Express. You may alter the server code in any way you wish.

You will need to have nodeJS installed on your computer to run the server.

Open a terminal and run npm i && npm run start from the project root.

The server is now running on localhost:3000. You can test the server by going to http://localhost:3000/players in your browser.

The API is described in [url removed, login to view] within the project root.

These are some of the things we need

Easy, clean and readable code, no unnecessary complexity.

Usage of a component-based library/framework (react, angular, or similar).

Testable code (separation of concern, referential transparency).

Handling of asynchronous fetching of data from an API.

Do not reinvent the wheel :)

Display some CSS/styling skills.

[url removed, login to view]:

const cuid = require('cuid');

const express = require('express');

const bodyParser = require('body-parser')

const app = express();

/* Setup express middlewares */

[url removed, login to view]([url removed, login to view]());

[url removed, login to view](allowCorsMiddleware);

/* API */

[url removed, login to view]('/players', getPlayers);

[url removed, login to view]('/player/:id', getPlayer);

[url removed, login to view]('/player/:id', putPlayer);

[url removed, login to view]('/player', addPlayer);

[url removed, login to view]('/player/:id', deletePlayer);

/* Start server */

[url removed, login to view](3000, () => [url removed, login to view]('app listening on port 3000.'))

/* The mock 'database' */

let players = [

{ id: 'cjeodaus60000poul1g030oia', name: 'Richard Garfield' },

{ id: 'cjeodaus60001poule3wjdz1p', name: 'Gabe Newell' },

];

/* IMPLEMENTATION DETAILS */

/* Return a list of all players

* Example: localhost:3000/players

*/

function getPlayers(req, res) {

return [url removed, login to view](200).json(players).end();

}

/* Return a specific player based on id

* Example: localhost:3000/player/cjeodaus60000poul1g030oia

*/

function getPlayer(req, res) {

const id = [url removed, login to view];

const player = [url removed, login to view](p => [url removed, login to view] == id);

return player ? [url removed, login to view](200).json(player).end() : [url removed, login to view](404).end();

}

/* Add a new player to the list

* Example: localhost:3000/player

* Body: { "name": "Fresh Prince" } */

function addPlayer(req, res) {

const name = [url removed, login to view];

if (!name) {

return [url removed, login to view](401).end()

}

const newPlayer = { id: cuid(), name };

players = [...players, newPlayer];

return [url removed, login to view](201).json(newPlayer).end();

}

/* Delete a player from the list

* Example: localhost:3000/player/cjeodaus60000poul1g030oia

*/

function deletePlayer(req, res) {

const id = [url removed, login to view];

const removedPlayer = [url removed, login to view](p => [url removed, login to view] == id);

players = [url removed, login to view](p => [url removed, login to view] != id);

return [url removed, login to view](200).json(removedPlayer).end();

}

/* Edit an existing player in the list

* Example: localhost:3000/player/cjeodaus60000poul1g030oia

* Body: { "name": "Steve Urkle" }

*/

function putPlayer(req, res) {

const id = [url removed, login to view];

const name = [url removed, login to view];

if (!name) {

return [url removed, login to view](400).end();

}

players = [url removed, login to view](p => [url removed, login to view] == id ? { ...p, name } : p);

return [url removed, login to view](200).json([url removed, login to view](p => [url removed, login to view] == id)).end();

}

/* MISC */

/* Add CORS-headers to every request */

function allowCorsMiddleware(req, res, next) {

[url removed, login to view]("Access-Control-Allow-Origin", "*");

[url removed, login to view]("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

next();

}

完成:
需要技能

想要赚钱吗?

  • 设定您的预算和时间框架
  • 列出你提案
  • 用你的工作赚钱

雇用同样在该项目上竞标的威客

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online