Build a 2D store map, showing location of all products and robots.
DEMO: http://2d-store-map.surge.sh
- React@^17.0.2
- TailwindCSS@^2.2.17
- Typescript@^4.4.4
Builds dependencies.
Compiles and runs project on http://localhost:3000
Builds project for static deployment.
Runs unit test cases.
With surge
Install surge
if you haven't already:
npm install -g surge
Then, from within your project folder:
npm run build
surge --project build --domain 2d-store-map.surge.sh --token <SURGE_TOKEN>
- I am assuming there will be a large size JPG image for store map. We should also know the intrinsic width and height of the image. We should get this data from API. I have mocked it as a helper function in data/map.ts and used a floor map of a building.
- Products location will be received by an API call, which I have mocked as a helper function in data/products.ts
- Robots location will also be received by an API call, which I have mocked as a helper function in data/robots.ts
- Robots will be moving, so they will have an orientation and speed. To mock that, I have added a
setInterval
to update robots location every second. - Setting image in the background, I have rendered all products (in green) and robots (in blue) on map.
- I used a library https://github.com/prc5/react-zoom-pan-pinch for zoom, pan and pinch features.
- The app would work on different resolutions. It would first scale down/up the map image to match the device resolution, and then translate the x,y coordinates of all products and robots according to the scale.
- Users can pinch and zoom, pan, double-click on map to zoom in, and the products and robots will be filtered as per the view area.
- For slightly better UX, I have added "Zoom In", "Zoom Out" and "Reset Zoom" buttons.