It's me, Ryan!
(Thanks Tierney!)
Get them deetz:
npx ryanmurakami
๐โ๏ธ๐๐ Demo Project for the EC2 Field Day Course
Home Page: https://ec2fieldday.com
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.