sirdarthvader

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

sirdarthvader

https://user-images.githubusercontent.com/28031165/170801827-6eb07b5e-87ad-445f-a72e-e5ef52560427.png

sirdarthvader

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH=/Users/ashishsingh/.oh-my-zsh

# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME="robbyrussell"

sirdarthvader

import {useState, useEffect} from 'react';

const useViewport = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleWindowResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);

sirdarthvader

import React, { useMemo, useState, useEffect, useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import uuid from 'uuidv4'
import FocusTrap from 'react-focus-trap'
import DownArrow from 'components/svg/down-arrow'
import Checkbox from 'components/checkbox'
import { setFilter, clearFilter } from 'modules/filters/actions'
import filterSelector from 'modules/filters/selector'
import { getTreeData } from 'lib/utils/category'

sirdarthvader

/**
 *
 * @param {Array} arr of strings provided for each Prodct listing / search page by aloglia
 * @returns {Array} Modified array of nested objects in a tree structure for each category
 */

export const getTreeData = arr => {
  let mapper = {}
  let root = {
    children: []

sirdarthvader

const remove = (arr, func) =>
  Array.isArray(arr)
    ? arr.filter(func).reduce((acc, val) => {
      arr.splice(arr.indexOf(val), 1);
      return acc.concat(val);
    }, [])
    : [];


//EXAMPLES

sirdarthvader

/**
The below snippets will help you find total money spent on Zomato and Swiggy so far by any individual.
For Zomato: 
   Step 1: Go to Zomato.com, 
   Step 2: Go to "Profiles", click on "Order History"
   Step 3: Scroll to the very bottom and click on "Load More", until the option disappears.
   Step 4: Do a right click anywhere on the screen and click on "Inspect", in the inspector, 
           go to console copy and paste the below snippet and press enter.
      *****IMPORTANT****
   Make sure all the steps till step 3 is followed before doing the step 4.

sirdarthvader

{
  "name": "webpack-react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "repository": {

sirdarthvader

const exphbs = require('express-handlebars');

// Handlebars Middleware
app.engine(
  'handlebars',
  exphbs({
    defaultLayout: 'main',
  })
);
app.set('view engine', 'handlebars');