Design System & Common Components

• Go through app and other apps in the org to implement a common component library with help of Design and PM * Style Guide - Typography (H1s, Paragraphs, etc)

  • Loading Fonts - preloading, Google Fonts or host/package, default fonts before font is loaded?

    • Causes reflow if we didn't load font

    • Try to limit amount and weights of fonts

  • CSS Handling

    • Styled Components

    • Reset CSS

    • Less?

  • Common Colors, padding, spacing, fonts for elements

    • Ideally very little variation on these values, so you don't have to worry about pixel perfect designs and everything looks super consistent, and if we decide to do a redesign it's very simple, don't have to change values everywhere

  • Buttons and Common Elements

    • Buttons - no double submits by default esp with finance operations, block onClicks if in Loading State, have a loading state

    • Selects

    • Autocompletes

  • Go through Google MUI and make sure we have relevant elements for our Style Guide

  • Forms, interaction, validation, submitting

  • Modals and Dialogues

  • Error Toasts or bars or error dialogues

  • Confirmation dialogue/flow for deleting, buying, and other dangerous/permanent operations should be consistent - important for financial

  • Infinite Scrolling components like transaction lists and search results

  • Loading spinners

  • AJAX search - debounce

  • Auth Wrapper - Allowing/disallowing access to pages

  • Autofills for address - Google Maps

  • Phone verification - Twilio

  • Packaging

    • Create React App?

    • Webpack?

    • And customizations needed?

  • Linting

    • ESLint

    • Airbnb rule set

  • Common approach for Charting warrants a whole discussion

    • HighCharts?

    • How do we deal with time series

    • How do we deal with candlesticks

    • How do we load data?

    • How do we deal with filtering for time segments? Reloading data? Caching Data?

    • Probably separate this into its own library eventually so that it can be used and developed independently from this app