/US-Navy-Command-Console

Track vessels | React, Redux, Express, Node, MongoDB, Docker, Material UI

Primary LanguageJavaScript

MERN Stack Project: US Navy Command Console

How to Run

git clone https://github.com/SyedAman/US-Navy-Command-Console.git
npm install
npm start

Prompt

We wanted to give you something that wasn't going to take you too terribly long to create, but at the same time we wanted to give you something that would allow you to show all of your coding skills. What we came up with is a stripped-down version of one of our core applications, our map. What we would like you to do is to create a single page app containing a map that spans the entire width and height of the browser. I have attached some sample track data that we would like you to store in MongoDB and serve up to the web app view NodeJS and ExpressJS. We'd like you to plot these tracks on the map using a directional icon (an icon that shows the direction the track is facing) and use the "course" value of the track to determine the direction.

We'd also like for you to float a hamburger menu style icon over the map in the top-left corner of the screen. When the user clicks this icon, a slide-out menu should appear from the left-hand side of the screen. The menu should simply show a list of all the tracks (displaying the name only) on the map. When the user clicks on one of the track items in this list, another slide out should appear from this menu. I'm guessing this is hard to follow because it's not the easiest thing for me to try to explain, therefore, I have attached three images. Map.png shows what the screen should look like before the user clicks the menu button. TrackList.png shows what the screen should look like after the user clicks the menu button. TrackProfile.png shows what the screen should look like once the user clicks a track in the list.

Since we are moving to the MERN stack with Redux, that is what we would like you to use. Extra credit would be to use Docker as well.