smashercosmo

Frontend architecture for Tasks application

This document describes frontend architecture for a SaaS system to manage tasks. It covers infrastructure, tech stack, viable approaches to fulfill certain requirements and desirable API.

Overview of the architecture

Infrastructure

Vite bundler (which is basically an industry standard nowadays) is going to be used for bundling, code splitting and live reloading during development. Another two industry standards - ESLint and Prettier - are going to be used for linting and formatting correspondingly. We can also setup pre-commit hooks via Husky and lint-staged libraries to ensure that no linting, formatting or type errors slip through. The app will be written in TypeScript, which helps to reduce the number of runtime errors and also makes refactoring easier.

Framework

smashercosmo

let got = require('got') 
 let zlib = require('zlib') 
 let os = require('os') 
  
 module.exports.getIds = function getIds(event, context, callback) { 
   let unzip = zlib.createGunzip() 
   /* TODO url should be constructed based on the current date */ 
   let stream = got.stream('https://files.tmdb.org/p/exports/movie_ids_01_22_2020.json.gz', ) 
   stream.pipe(unzip) 
  

smashercosmo

# Random notes on tmdb

- Current tmdb rate limit is 40 requests for every 10 seconds - Records (movies, people, etc.) in tmdb can be removed (either by accident or on purpose) - Possible reasons for removal: record is a duplicate, record violates contributing guidelines - If there are duplicate records then the earliest one will be kept (though not always https://www.themoviedb.org/talk/5c6afe320e0a2617779a93d3#5c6b3120c3a3684fabe720c5) - If a movie was removed accidentally, it won't be restored under the same id https://www.themoviedb.org/talk/5bb44d2c0e0a261a17008fc2#5bb507299251415b64002578 - The old id is gone forever and won't be reused - There is no way to determine new id for a movie if it was replaced by a new record (I assume it can only be handled manually) https://www.themoviedb.org/talk/5b4dca43c3a36823d8049f42 (but this might be solved in future https://trello.com/c/Dgrb7BJQ/125-store-the-original-merged-to-ids-when-a-duplicate-is-deleted) - Lists 

smashercosmo

import { executeQuery } from '../executeQuery'

const USER_SEARCH_HISTORY_LIMIT = 30

/**
 * returns '$[0], $[1], $[2], ..., $[limit - 1]'
 */
function generateRange(limit: number) {
  return new Array(limit - 1)
    .fill(0)

smashercosmo

function testSupportsSmoothScroll() {
  let supports = false
  try {
    const div = window.document.createElement('div')
    div.scrollTo({
      top: 0,
      get behavior() {
        supports = true
        return 'smooth'
      },

smashercosmo

.root {
  --pl: initial;
  --pr: initial;
  --pt: initial;
  --pb: initial;
  --ml: initial;
  --mr: initial;
  --mt: initial;
  --mb: initial;
  --w: initial;

smashercosmo

import * as React from 'react'
import { useDrag } from 'react-use-gesture'
import { useSpring, config } from '@react-spring/web'

function clamp(min: number, val: number, max: number) {
  return Math.min(Math.max(min, val), max)
}

const isServer = typeof window === 'undefined'

smashercosmo

import React, { useContext } from 'react'
import cx from 'classnames'

import { ThemeContext } from '../ThemeContext/ThemeContext'
import type { Theme } from '../ThemeContext/ThemeContext'

import './Base.css'

type ResponsiveProperty<T> = T | { min?: T; max: T }
type MediaQueryProperty<T> = T | { xs?: T; sm?: T; md?: T; lg?: T; xl?: T }

smashercosmo

import React from 'react'
import { useForm } from 'react-hook-form'

import { FormButtons } from '../../components/FormButtons/FormButtons'
import { TextFieldComponent } from '../../components/TextFieldComponent/TextFieldComponent'
import { Box } from '../../components/Box/Box'
import { getErrorsToShow } from '../../lib/formErrorsUtils'

type CreateOrganizationFormValues = {
  name: string

smashercosmo

import cx from 'classnames'
import React from 'react'
import { Link as ReactRouterLink } from 'react-router-dom'
import type { LinkProps as ReactRouterLinkProps } from 'react-router-dom'

import { ButtonSpinner } from '../ButtonSpinner/ButtonSpinner'

import styles from './Button.css'

type CommonProps = {