Skip to content

Latest commit

 

History

History
72 lines (48 loc) · 2.82 KB

README.md

File metadata and controls

72 lines (48 loc) · 2.82 KB
Raw

README

A dashboard demo project. Built with React and MUI components in the frontend. And an AWS serverless Python function in the backend.

Documentation

⚠️ Checkout the complete build and deployment instructions in the documentation.

Goals

Use a component framework to build a dashboard with basic layout and styling. Demonstrate the following functionality:

  • fetch data from APIs, send data to an API
  • process the data with a serverless function
  • visualize data with charts, maps, and tables
  • work with AWS CLI, and create CI/CD and automated deployment

Built with

  • "Add to-do" widget created with:
    • Python, Pytest, FastAPI, AWS Lambda, AWS CLI, Docker, and Airtable
  • Other React/MUI widgets created with:
    • Recharts, ApexCharts, Nivo, Leaflet.js, and React-Hook-Form-MUI
  • Github Actions for CI/CD
  • S3 object storage connected to Cloudflare
  • Uses Nix shell, Makefiles, and Direnv for easy development

Data sources: Formula 1 and GDP data prepared/processed with ObservableHQ notebooks.

Retrospective

  • Creating an automated deployment from scratch takes time
    • Lots of variable configuration and loads of AWS CLI commands
    • Finding the right IAM-policies/actions can be cumbersome
      • many errors like: no identity-based policy allow the "service:GetSomeBlaBlaEtc" action
    • Issue/bug due to double CORS config (Lambda CORS config + FastAPI CORS)
    • Functions/containers can be a bit difficult to debug
      • Local dev server is a different config in comparison to deployment
      • Difference between the local development and production HTTP request format
        • for example: the Docker RIE container HTTP request must be according to API Gateway spec.

A framework like Serverless or AWS SAM CLI could make all of the above easier

  • Head scratcher: hours of time wasted on a dumb Github Actions config issue.
    • set wrong config; used an incorrect URL (missed a parameter in the URL) 🤯
      • in hindsight the error messages actually made sense
        • debugging in the wrong place === lots of trial and error
        • while debugging accidentally used the wrong context in Github Actions
          • var instead of vars 🤯
      • note to self: next time follow a good debug strategy

To-do

  • Add display todos widget
    • Add list_todos endpoint
  • Add more tests
  • Add authentication example
    • JWT? OAuth? NextAuth?