Completed

Project for Web&Mobile App Developers

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();

}

Skills: Angular.js, node.js

See more: web and mobile app developers pakistan, web and mobile app developers, i am looking for mobile app developers and designers to partner with me for a share on the project, web mobile app developers, indian mobile app developers, mobile app developers wanted, iphone web mobile app launcher, web mobile app launcher, experienced mobile app developers, mobile app developers pakistan, project web mobile, transfer web mobile app, web mobile app conversion, project make mobile app, bidding mobile app developers

About the Employer:
( 0 reviews ) Sweden

Project ID: #16498250

Awarded to:

$150 USD in 5 days
(0 Reviews)
0.0

6 freelancers are bidding on average $141 for this job

$166 USD in 10 days
(1 Review)
2.0
shefjain03

i have more than 5 years of experience in wordpress php mysql with responsive design and also have expertise in angular and node and ionic also [login to view URL] [login to view URL] http://www.staples. More

$100 USD in 10 days
(0 Reviews)
0.0
parsysmedia

Hi, we can take your job pertaining to Angular.js, node.js and start work immediately as per your requirement, please chat

$256 USD in 10 days
(0 Reviews)
0.0
Grisha97924

Hello Nice to meet you I am interested in ur project I have experience of React js , and anular, node I can satisfy ur demand We can discuss more in detail Thank you Best regards

$88 USD in 10 days
(0 Reviews)
0.0
GauravNargotra

Hi, I have reviewed job description and basis the same I am excited to confirm that I would be much interested in making available my services for the proposed position. I have extensive experience with Angular More

$88 USD in 10 days
(0 Reviews)
0.0