React.js test assignment

devices.json

{
  "devices": [
    {"name": "Device 1", "description": "This is device 1", "location": "Living room", "lastResult": 123141 },
    {"name": "Device 2", "description": "This is device 2", "location": "Office", "lastResult": 267 },
    {"name": "Device 3", "description": "This is device 3", "location": "Kitchen", "lastResult": 725 },
    {"name": "Device 4", "description": "This is device 4", "location": "Living room", "lastResult": 975 },
    {"name": "Device 5", "description": "This is device 5", "location": "Kitchen", "lastResult": 2244 },
    {"name": "Device 6", "description": "This is device 6", "location": "Kitchen", "lastResult": 1 },
    {"name": "Device 7", "description": "This is device 7", "location": "Living room", "lastResult": 5714 },
    {"name": "Device 8", "description": "This is device 8", "location": "Office", "lastResult": 23467 },
    {"name": "Device 9", "description": "This is device 9", "location": "Living room", "lastResult": 123141 },
    {"name": "Device 10", "description": "This is device 10", "location": "School", "lastResult": 14151 },
    {"name": "Device 11", "description": "This is device 11", "location": "School", "lastResult": 6747 },
    {"name": "Device2 1", "description": "This is device 12", "location": "Living room", "lastResult": 2313 },
    {"name": "Devic3e 1", "description": "This is device 13", "location": "University", "lastResult": 41421 },
    {"name": "Devi4ce 1", "description": "This is device 14", "location": "Living room", "lastResult": 222 },
    {"name": "Dev5ice 1", "description": "This is device 15", "location": "University", "lastResult": 21131 },
    {"name": "De6vice 1", "description": "This is device 16", "location": "University", "lastResult": 1414 }
  ]
}

Test Assignment.md

React.js test

Assignment

Your task is to create one-page application with list of devices and their details. Devices data are stored in 'devices.json' which should be loaded dynamically via http request.

The result should be uploaded to github. If you don't have a user yet, you might need to create one.

You should be able to fetch the device list directly from https://gist.githubusercontent.com/Tehnix/c9d53939b2ed600b321fed8e1898f3a7/raw/dfe7adaf6f73e320ae4ed42761d6b50cf25eb569/devices.json meaning you don't need to keep a server running.

Wireframe description:

+--------------------------------------------------------------------------------+ | | | +-----------------------------------------------------+ | | | Search bar | | | +-----------------------------------------------------+ | | | | +-----------------------------------+ | | | Name: Device 1, Location: ... | Name: Device 2 | | +-----------------------------------+ Location: Somewhere | | +-----------------------------------+ Last result: 1232 | | | Name: Device 2, Location: ... | | | +-----------------------------------+ | | +-----------------------------------+ | | | Name: Device 3, Location: ... | | | +-----------------------------------+ | | +-----------------------------------+ | | | Name: Device 4, Location: ... | | | +-----------------------------------+ | | +-----------------------------------+ | | | Name: Device 5, Location: ... | | | +-----------------------------------+ | | +-----------------------------------+ | | | Name: Device 6, Location: ... | | | +-----------------------------------+ | | +-----------------------------------+ | | | Name: Device 7, Location: ... | | | +-----------------------------------+ | | | | | +--------------------------------------------------------------------------------+

• Devices list: Every item will display a devices name and location. When user clicks on an item, it will display devices's details on the right.
• Search bar: It will search all the devices names and descriptions. Results are displayed in the list, as a filtered list of devices that match on the search.

Stack

You are entirely free to choose the whole stack, with some minor requirements:

• Free to use plain javascript, typescript or flow
• must use react.js
• you don't have to use redux, flux, or any other state management library (unless you want to)
• build tool of your choice (npm, yarn)
• you can use CSS framework, CSS/HTML preprocessors of your choice
• git is required