Use Webpack and Babel for bundling, and whatever else is needed.

Use React Router (newest version).

Necessary pages:
/ - home page
/events - events page
/events/{event id} - event template page
/competitors - competitors page
/competitors/{competitor id} - competitor template page
/settings - settings page

There's a DynamoDB exception in the console when it can't connect. We should catch this and not print the error. Maybe we can show a human readable version in the settings section if it can't connect? Either way, it shouldn't output to the console.

The static data, such as events and competitors, should come from a static JSON file.

Initially, whenever any of the data is requested, just serve it from the JSON file.

The app should log all access and any errors locally. They should be able to be access by the CloudWatch agent to send to CloudWatch. The learners will do that in the course, so we just need to make sure that logs are being output somewhere.

Access logs should be output to one file, Errors and other logs should go to a different file.

Build out base project.

Technologies to use:
Node.js
Express (for server)
React (for front end)
React Router
Webpack + Babel
AWS SDK

Server should have these endpoints:

/ - serves index

also, at least these api endpoints:
/api/events - Get all Events
/api/events/{event id} - Get Events
/api/competitors - Get all Competitors
/api/competitors/{competitor id} - Get Competitor
/api/status - Get AWS connection status for settings page
/api/commands/{command} - Run command (eg. Start, Reset)

On the home page, the event name under "Event Progress" should be a link to the event page.
Also, under "Recent Event Winner", the image should be a link to the competitor page, and the event name should be a link to the event page.

Static data (like events and competitors) should be copied over to DynamoDB on process start up, if DynamoDB connection can be made. Overwriting is fine.

It would be nice to be able to see the progress of the event tracker in the console as it's running.

To simplify the process when learners are running the app locally and on EC2, I'd like it to start with npm start and no other steps. So, the user will run:
npm install
npm start
And the app should build and start running. I think you may need to move the client dependencies up a level as well, so everything can install and run with those two commands.

The simulation time is off somehow. They should only be taking 60 seconds each, based on the mock data, but they're taking a lot longer.

Run the Field Day event.

• Each event will run in a random order.
• Each event will have a set run time (eg. 5 mins)
• As the time progresses for an event, the progress is retrieveable (will be shown on front page).
• At the conclusion of the event, random times in a range will be set for each competitor (each event will have a range).
• The competitors will be ranked according to their times.
• The results will be saved (initially in memory).

Could you add some moving stripes to the progress bar to show that it's running? Might help in case people don't notice it's running. Here's an example. I think it's just some CSS:
https://react-bootstrap.github.io/components/progress/#progress-animated

Should probably say "Start" again. If a user clicks it, it resets and starts over.

Clear the results (either in memory or DynamoDB) when initiated from the front-end in the settings page.

The place ("1st Place") is off for some numbers. Should be like this:
1st Place
2nd Place
3rd Place
4th Place
5th Place
6th Place
7th Place
8th Place

As the Field Day Simulation runs, save the results to DynamoDB. The results will be retrievable from the app.

Style the front-end according to the mocks.

https://www.figma.com/file/bvoQxBRtVDSvbH44qLOCHv/Site-Design?node-id=0%3A1

When no events are running, show a message like "No Events Running" instead of the progress bar.

The results for the events are outside of the max and min finish times in the mock. They should all be between 4 and 12 minutes, but all are over.