ROSTER is a responsive, multi-tenant web application for collecting and reporting on marine turtle and holding tank data required by the Florida Fish and Wildlife Conservation Commission (FWC).
- React - Typescript UI library
- react-router for client-side routing
- react-hook-form for forms
- react-data-table-component for display tables
- react-chartjs-2 for charts and graphs
- leaflet and react-leaflet for maps
- rxjs for reactive programming using Observables
- Material-UI - React UI framework and components
- [typeface-roboto] - Font used by Material-UI
- Amazon Web Services ("Always Free" tier only)
- Amazon Cognito for authentication
Amazon S3(not "Always Free" tier),Amazon API Gateway(not "Always Free" tier),- AWS Lambda (.NET Core) for data access and PDF report generation
- Amazon DynamoDB for NoSQL data storage
- Netlify for static hosting
| Item | Notes |
|---|---|
| ✓ User Authenication | Amazon Cognito |
| ✓ Graphs for Sea Turtle > Morphometrics (temperature, salinity, pH) | ??? holding-tank-temperature-graph, etc. |
| ✓ Mapping | • Leaflet + React Leaflet (article) |
| ✓ Data tables | material-table |
| ✓ Filtering (search) of tables | material-table |
| ✓ Prompt to save changes if form is dirty and user clicks Edit/Delete or Add button | |
| ✓ Add a loading spinner | home-grown |
| ✓ Database (multi-tenant) | • Amazon DynamoDB • Building a Multitenant Storage Model on AWS (PDF) • Best Practices for Designing and Architecting with DynamoDB |
| ✓ Prevent tabbing outside of modal | Material-UI |
| ✓ Session / Token timeout | AWS Cognito and refresh tokens (JWT) |
| ✓ Material-UI or |
Material-UI / |
| ✓ Counters for items on home screen and tabs | Sea Turtles > Tags, etc. |
| ❑ Preventing denial-of-service attacks / excessive usage | ??? throttling |
| ❑ Offline mode | ??? send updates if any made whilst offline...how to auth? Service worker unable to distinguish different payloads when calling AWS Lambda (https://lambda.us-east-2.amazonaws.com/2015-03-31/functions/roster-api-lambda/invocations)? |
| ❑ Poor man's caching ??? | A guide to stale-while-revalidate data fetching with React Hooks |
| ❑ Ability to click/tap to set map marker ??? | ??? |
| Report | Notes |
|---|---|
| ✓ Marine Turtle Holding Facility Quarterly Report | [ generate | blank ] |
| ✓ Marine Turtle Captive Facility Quarterly Report for Hatchlings | [ generate | blank ] |
| ✓ Marine Turtle Captive Facility Quarterly Report for Washbacks | [ generate | blank ] |
| ✓ Monitoring for Beach Restoration Projects | [ blank ] |
| ✓ Disorientation Incident Form | [ blank ] |
| ✓ Disorientation Incident Form Directions | [ blank ] |
| ✓ Educational Presentations Using Turtles | [ blank ] |
| ✓ Necropsy Report Form | [ blank ] |
| ✓ Nighttime Public Hatchling Release | [ blank ] |
| ✓ Obstructed Nesting Attempt Form | [ blank ] |
| ✓ Obstructed Nesting Attempt Form Directions | [ blank ] |
| ✓ Papilloma Documentation Form | [ blank ] |
| ✓ Public Turtle Watch Schedule Form | [ blank ] |
| ✓ Public Turtle Watch Summary Form | [ blank ] |
| ✓ Stranding and Salvage Form | [ blank ] |
| ✓ Tag Request Form | [ blank ] |
| ✓ Tagging Data Form | [ generate | blank ] |
| ✓ Turtle Transfer Form | [ blank ] |
| Report | Notes |
|---|---|
| ✓ Turtle Injury Report | [ generate ] |
| ✓ Turtle Tag Report | [ generate ] |
| ✓ Hatchlings and Washbacks by County Report | [ generate ] |
In the project directory, you can run:
Runs the initial installation of npm packages.
Lists npm packages that are not the latest allowable version as per the package.json file.
Updates npm packages (top-level only) to the latest allowable version as per the package.json file.
Fixes "blah cannot be used as a JSX component" errors.
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
You may serve it with a static server; available at http://localhost:5000:
npm install -g serve
serve -s build
Free "starter" plan for hosting personal projects, hobby sites, or experiments.
- 1 team member ($15/add’l user)
- 1 concurrent build
- 100GB bandwidth/month
- 300 build minutes/month
- Continuous deployment
- Access to add-ons
Build & deploy > Environment > Environment variables
The application architecture uses:
- Amazon Cognito,
Amazon S3(not "Always Free" tier),Amazon API Gateway(not "Always Free" tier),- AWS Lambda,
- Amazon DynamoDB
- Amazon Cognito Identity SDK for JavaScript
- Using Tokens with User Pools
- Identity Management with AWS Cognito in React
- Authentication for React apps using AWS Amplify and Cognito
aws cognito-idp admin-set-user-password --profile roster-admin-user --user-pool-id <USER_POOL_ID> --region <REGION> --username <USER_NAME> --password <PASSWORD> --permanent
aws cognito-idp admin-update-user-attributes --profile roster-admin-user --user-pool-id <USER_POOL_ID> --region <REGION> --username <USER_NAME> --user-attributes Name="custom:CustomAttr1",Value="Purple"
- Offer a page reload for users
- Redirecting a user to the page they requested after successful authentication with react-router-dom
- React + RxJS - Communicating Between Components with Observable & Subject
- Material-Table Mutates Item Passed Through data Prop - Because of this, we have to assign the data source a copy of the data array rather than just assigning the array itself.