Challenge Overview

Backend

Objective

Design and implement a REST API to manage satellite telemetry data.

• Flask with SQLite storage backend.
• Vite is used to run both the back and front end and control the communication between them:

  export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/telemetry': 'http://localhost:5000/',
    },
  }
})

• The API revolves around the /telemetry endpoint.

API

• POST /telemetry: Add a new telemetry entry.
• Request body should include:

{"satelliteId": "string", 
 "timestamp": "ISO 8601 datetime", 
 "altitude": "number", 
 "velocity": "number", 
 "status": "string"}

• GET /telemetry: Retrieve all telemetry data.
• Optional query parameters:
• satelliteId Filter by satellite ID.
• status Filter by health status (e.g., “healthy”, “critical”).
• GET /telemetry/:id Retrieve a specific telemetry entry by ID.
• DELETE
/telemetry/:id Delete a specific telemetry entry.

Implementation

• Flask based backend.
• Sources
  • I leaned heavily on the FlaskMega Tutorial for the backend structure and ideas.
  • And the React + Flask series help with getting react and Flask to talk to each other.
• Kee points
  • Flask framework API functions are handled in api.py (this could be broken out for greater Modularity).
  • Separate function to do validations for easier testing.
  • Utilities and configuration items are in util.py.
  • SQLite database used for a data store.
  • Pagination implemented with sorting (defaulting to ascending id).

Frontend

Objective

Design and implement a web interface to display and manage satellite telemetry data.

Expected functionality:

• Display a table of telemetry data with columns: Satellite ID, Timestamp, Altitude, Velocity, Health Status.
• Allow users to filter telemetry data by Satellite ID and Health Status.
• Provide a form to add new telemetry entries.
• Allow users to delete telemetry entries stored in the backend.

Implementation

• Utilizes React
• Utilizes React's useState, useEffect, and useRef
• useState for keeping track of items in the UI such as telemetry info, sorting states, pagination, and data for graphing.
• useEffect is used for fetching and filtering of data.
• useRef is only currently used to initialize an empty temetry graph.
• Most of the code is centered around app.jsx which functions as the controller for all frontend functionality.
• Uses formData to manage user inputs to be sent the backend.

Design

• Intended to be more of a dashboard feel.
• Only a single page layout was implemented for this to meet requirements. This should be broken out in the future to allow users to go deeper into the data.
• Colors are picked with the goal to be somewhat contrasting to increase accassability.
• Errors with validation or backend communication are reported to the user so the user knows what went wrong.

Working With the Backend

• Input validation happens on the client side before being sent to the backend for processing.
• This includes ensuring that a record is complete, date formatting, and numbers are valid (like velocity which cannot be negative).
• Async calls and promises to the backend are used to not block while the user is waiting.

Packaging and Deployments

• Local Development
• Local developemnt requires Python 3.11+ for backend and node, NPM, and Yarn for frontend. See README for instructions.
• Docker
• A pre-built Docker image is pushed to Docker Hub to allow for an easy spin up.
• It contains both backend and frontend implimentations
• Helm & k8s
• Helm charts are provided to allow fo easy deployment into a Kuberentes based system.

Potential Improvements

• Break apart front end and backend.
• Break out the data store.
• Backend improvements.
• Add more configuration options.
• Add other health types.
• Add Authentication.
• Frontend Improvements
• UI improvements (color scheme, buttons, add pages, etc).
• Break up App.jsx to be more modular.
• Add ability to stream data.

Demo