Challenge Overview
As part of the larger Boat-In-a-Box project, the client would like to develop a web-based tool to assist in creating various scenarios.
Scenario is a time series data set containing data about ships. The user is able to place ships onto the map and for each one he can add multiple waypoints and set speed (in knots). Scenario can also have anomalies that are ship locations outside the defined ship path. The scenario is then simulated and the output is a list of position reports for each of the ship for the duration of the scenario.
In this challenge we'll develop REACT frontend to support the above tool. Bellow you can find the design prototype that will be used as basis for creating the screens.
The UI prototype is available at https://marvelapp.com/1e70fif/screen/25429323
There are 2 main screens for the application:
1. Login (not in the prototype) - create a simple forms based login page - no register or forgot password screens.. Successful login will redirect to the scenario editing screen.
2. Scenario editing screen
This is the central part of the application and is where the scenario for ship routes will be created.
The prototype shows 3 map tools in the top right
1. Add ship tool - when the tool is activated, a click on the map would add a new ship to the map
2. AIS message tool - create a custom AIS message for the current ship
3. Remove this tool
Clicking a boat that is already on the map will select that ship and display the “Ship Details” popup. Clicking the “Set Waypoints” button will enable the user to define the ship waypoints, ie each click on the map would add a new waypoint. Activating the “Add ship” tool or selecting a different ship would deactivate adding waypoints functionality. Clicking the “Set waypoints” button again would let the user continue adding the waypoints. The path between the waypoints should be straight lines and not curves like in the prototype. Data model for a waypoint should have a location (lat,lon) and ship speed (in knots). Location is defined by the position on the map, and ship speed should be set to default - 10 knots.
The scrubber bar at the bottom of the screen would represent the scenario timeline. Moving the scrubber would actually simulate the ship movement and move the ship icon to the appropriate position in the ship’s path. You can mock this functionality, just change the ship’s position when the scrubber moves, ie you don’t need to implement the ship position calculations.
The total duration of the scenario is entered to the time input field to the right of the scrubber.
Clicking the AIS tool would bring up the “AIS message” popup which server to add an anomaly to the currently selected boat path (tool should be disabled if no boat is selected).
Here are the details for the form fields:
Ship name and ID number should not be editable and should contain the data for the currently selected ship.
Ship position (lat,lon) should be editable (that’s where the anomaly is added)
Channel field should be a dropdown with options A and B
Navigational status should be a dropdown with 0 - 15 as choices
Position accuracy should be a dropdown with 0 (Low) and 1 (High) as choices
Other fields are number inputs
A feature missing in the prototype that should be added to the scenario editing screen is a list of waypoints and added AIS messages. This information should be displayed to the right of the map (ideally in a hover window). Only data for the currently selected boat should be displayed and the user would be able to edit the parameters of the waypoint/AIS message, or delete it completely.
Clicking the save button would display the “Save” dialog. Save button will just close the popup window for now.
Clicking the open button would display the “Open” dialog. Open button will just close the popup window for now. Make sure the list of scenarios is a scrollable container.
General Notes
For displaying the map you can use either Google maps or Mapbox (should be easier to style the map like in the prototype with mapbox). The user should be able to pan and zoom the map. Actual map should be used, do not just display a static map image.
Use React.js for creating the frontend
Supported browsers should be latest Chrome and Firefox.
Final Submission Guidelines
Submit the complete source code for the application
Create a Readme file containing deployment instructions
Submit a short video displaying the implemented application features.