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
Last updated
Was this helpful?