Design Document

Design Rationale

Platform Selection

Selected technologies in bold

Structure

• • Web App

    • Pros

      • Versatile

      • Light

      • Easier

    • Cons

      • Harder to implement certain features 

  • Mobile (iOS/Android)

    • Pros

      • Might be more fitting for use case

    • Cons

      • Limited platform

      • Harder

      • No development experience

      • Bigger overhead (dev kits)

Programming Languages

• • JavaScript

    • Pros

      • Supported by nearly every browser and framework

      • Easy to integrate across front and back end

    • Cons

      • Loosely typed

      • Prone to runtime errors

  • TypeScript

    • Pros

      • Optional static typing

      • Identifies errors at runtime

    • Cons

      • Longer compile time

IDE

• • Figma

    • Pros

      • Light

      • Industry standard

      • Collaborative prototyping for UI/UX before implementation

    • Cons

      • Limited interactivity and logic representation

      • Only visual

  • VSCode

    • Pros

      • Industry standard

      • Familiar

      • Versatile

      • Wide range of extensions

    • Cons

      • Heavier

Hosting

• • GitHub Pages

    • Pros

      • Free

      • Simple integration from repo

      • Familiar UX

      • Easy to transfer ownership

    • Cons

      • Only for static sites

  • Firebase/GCP

    • Pros

      • Scalable

      • Serverless support

      • Integrates with Google Sheets and APIs

    • Cons

      • Higher complexity

      • Potential cost at scale

Frontend

• • React

    • Pros

      • Dynamic

      • Reactive UI

      • Integrates well with APIs and Google backend

      • Simple routing

      • Modular design

    • Cons

      • Harder setup on static hosts

      • Requires familiarity with JSX and component lifecycle

      • Steeper learning curve 

  • Tailwind

    • Pros

      • Rapid

      • Consistent

      • Easily themeable

      • Responsive for mobile

    • Cons

      • Can get cluttered without discipline

      • Custom components require overriding base utilities

Backend

• • Next.js

    • Pros

      • Full-stack React framework

      • Easier integration between frontend and backend components

    • Cons

      • Heavier

      • Not ideal for static-only hosting

  • Fast API

    • Pros

      • Modern

      • High-performance Python API framework

      • Potent for future ML integration

    • Cons

      • Different language stack

      • Harder to integrate with existing JS codebase

  • Google API

    • Pros

      • OpenUV

      • Integrated with all of our data sources

      • REST API

      • Free at low scale

    • Cons

      • Expensive for high-volume applications

Database

• • Google Sheets

    • Pros

      • Easy

      • Non-technical

      • No additional auth solution needed

      • Easy to maintain

    • Cons

      • Limited support for backend operations

      • Poor scalability

  • Firebase

    • Pros

      • In-house auth solution available

      • Scalable

      • Simpler NoSQL setup

    • Cons

      • Heavier

      • More technical

      • Costs money