app url: https://hiboo-challenge.herokuapp.com/
using react-create-app for simplicity
- Ordering of the list
- Map of the devices with hovering effect synchronized with the locations list
- google-react-map (allow to used components as markers, easy to use)
- momentjs (to validate & format dates)
"Where's my stuff?"
The goal is to build a React microsite that allows the user to see the GPS locations of all their trackers.
- Single page app that contains a list of devices with their
name,last_seendate,addressdisplayed bylast_seendesc. - When clicking on a device, show a list of all its positions:
addressand relativedate; This list should be ordered bydatedesc.
- Challenge is submitted as pull request against this repo (fork it and create a pull request).
- The microsite should be deployed to Heroku.
- Use ReactJS to build your app, that's the only must-have
- use any tool/framework you'd like, but make sure to explain why you choosed it in your PR.
- We love Sass, BEM and Webpack here at hiboo, but feel free to use what you're the most confortable with.
- Responsive design
- Allow the lists to be ordered by date / name
- Show a map of the devices using the lat-long coordinates stored in the JSON file (see below).
You will gather the data from a collection of online JSON files. These files are a simulated JSON API, with the following format:
- devices.json
[ { "id": "xxxxxxxxxxxxxxx", "name": "example", "last_seen": "2001-01-01T01:01:00.000Z" }, ... ] - locations.json
[ { "id": "yyyyyyyyyyyyyyyyyyyyy", "lat": 48.894436, "long": 1.404684, "date": "2001-01-01T01:01:00.000Z", "address": "Full address as a string", "device_id": "xxxxxxxxxxxxxxx" }, ... ]
Links :