We have been very busy for the past 12 months building aircraft hangars, digging safety tunnels and shafts, closing deals with NASA, SpaceX and ISA. Everything is almost ready and as a consequence of our partnership with SpaceX, we need to build our Ground Control flight dashboard to support their needs. The client of this dashboard is based in ReactJS with Redux and the server side is developed in NodeJS with MySQL as the database.
Elon Musk’s engineers have provided us with the specs of their APIs and you can find it here https://docs.spacexdata.com
The dashboard is developed with the following requirements:
- For desktop devices, it should be centred both vertically and horizontally and take up half the width and half the size of the window.
- For tablets and mobile devices it should take up the full width and full height of the screen.
- Should have a control console with buttons and a display console to show the results generated by those buttons (A simple prettified JSON output).
- The display console should take up the 2/3 of the total height of the dashboard for desktop devices and 2/3 of the total width of the dashboard for tablets and mobile devices. Said display should be scrollable only vertically and break lines if the lines are too long to fit.
- The control console (the buttons container) should be positioned underneath the display console for desktop devices and on the right side of the display for tablets and mobile devices.
- The control console should provide a button that fetches All Capsules, sorted by capsule original launch date. The button content is simply a “Capsules” label and said label should be centered both vertically and horizontally.
- Should provide an input text field and a button to allow the engineers to fetch the data of a Landing Pad by its id. The width of the text input is fixed to 15 characters. Be “Landing Pad” be the button label, centered both vertically and horizontally.
- All Capsules button, the little rocket svg and Landing Pad should be equally spaced, for desktop devices aligned from left to right and in tablet and mobile devices from top to bottom.
- Should handle ALL requests coming from the dashboard and should be the only entity interacting with the SpaceX API.
- Should validate Landing Pad requests and return an appropriate error if id is not supplied.
- Should store the results of the Landing Pad requests in the spaceData table. If the Landing Pad is found in the table, no request to SpaceX servers should be made and the stored result should be returned instead.
- For the Landing Pad response only return id, full_name, status, location fields.
The code assumes you have Docker running on your machine. If you do not, they offer easy to install binaries (Mac) (Windows).
From the docker folder of the project, run docker-compose up -d
- You should now have the UI running at http://localhost:3000 and the server running at http://localhost:4000
- You should now have a MySQL database running at localhost:3306
- git
- Node v12.16.2
- NPM v6.14.4
- React v16.13.1
- Redux
- ExpressJS Framework for NodeJS
- MySQL
- Docker