Marley Spoon

Motivation

Prettier + ESLint

Prettier solves the styling conflict problem, but there’s more to linting than styling, and that’s where eslint comes in. Long story short, prettier does styling, eslint does the rest. I choose to extend the standard (because I tend to favor standardjs) and react/recommended and prettier config.

Hooks

hooks are just awesome, this new api is about to makes your component code way more organized and clean. State management and side effects go into hooks, UI goes into leaf components. It naturally leads to a more readable and easily testable codebase.

styled-components

Styled Components help keep the concerns of styling and element architecture separated and make components more readable. Furthermore, when you have components that rely on JavaScript for their style, Styled Components gives control of those states back to CSS instead of using a multitude of conditional class names.

Flow

Flow is a static type checker for javascript.
it helps you refactor safely, so you can focus on the changes you want to make, and stop worrying about what you might break.

Stack

React
Redux
Prettier
Enzyme
Styled-componnets
Flow JS

Development

Commands

Any of the following commands can be run from the command line.

If using Yarn, all instances of npm can be replaced with yarn

build

npm run build

Compiles all files. Output is sent to the dist directory.

start

npm start

Runs your application (from the dist directory) in the browser.

TEST

npm run test

runs tests