RayLuxembourg

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?

RayLuxembourg

// NOTE: this adds a filename and line number to winston's output
// Example output: 'info (routes/index.js:34) GET 200 /index'

var winston = require('winston')
var path = require('path')
var PROJECT_ROOT = path.join(__dirname, '..')

var logger = new winston.logger({ ... })

// this allows winston to handle output from express' morgan middleware

RayLuxembourg

FROM node:14-alpine AS backend-builder
RUN apk --no-cache add curl
RUN apk --no-cache add bash
RUN curl -sfL https://install.goreleaser.com/github.com/tj/node-prune.sh | bash -s -- -b /usr/local/bin

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn --frozen-lockfile

COPY . .

RayLuxembourg

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",

RayLuxembourg

{
	// Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",

RayLuxembourg

type QueryParam = "size" | "color" | "page"

export const parseQueryParam = <T extends QueryParam>(queryParam: T) : T => {
    return queryParam
}

RayLuxembourg

class PoseSwiper extends Component<Props> {
  state = {
    activeIndex: 0
  };
  config = {
    slidesPerView: 1,
    observer: true,
    on: {
      slideChange: function(applyNewIndex: (index: number) => void) {
        applyNewIndex(this.activeIndex);

RayLuxembourg

import * as React from 'react';

interface NameProviderProps {
  children: (state: NameProviderState) => React.ReactNode;
}

interface NameProviderState {
  readonly name: string;
}

RayLuxembourg

import * as React from 'react';

export interface GenericListProps<T> {
  items: T[];
  itemRenderer: (item: T) => JSX.Element;
}

export class GenericList<T> extends React.Component<GenericListProps<T>, {}> {
  render() {
    const { items, itemRenderer } = this.props;

RayLuxembourg

const fibForLoop = (position: number) => {
	const result = [0, 1]
	
	for (let i = 2; i <= position; i++) {
		const a = result[i - 1] // first iteration will return 0 , next 1 , 2 , 3
		const b = result[i - 2] // first iteration will return 1 , next 2 , 3 , 5}
		result.push(a + b)
	}
	return result[position]
}