/expensify

An application made with React and Friends

Primary LanguageJavaScript

EXPENSIFY [Upgraded to Babel 7]

Development Features

  • B.E.M

  • Mobile-First Approach

  • SASS incl. 3-1 CSS Architecture

  • ESLint & Stylelint

  • Test Suite

React References

Redux References

Redux Rules

If you use Redux correctly, you’re going to get major benefits:

- Eliminate timing dependency bugs (No race of Async Request & Render sequence)
- Enable deterministic view renders (Isolated from network I/O and state updates)
- Enable deterministic state reproduction (Transactional)
- Enable easy undo/redo features
- Simplify debugging
- Become a time traveler

But for any of that to work, you have to remember some rules:

- Reducers must be pure functions
- Reducers must be the single source of truth for their state
- Reducer state should always be Serializable
- Reducer state should not contain functions

Also keep in mind:

- Some Apps don’t need Redux
- Use constants for action types
- Use action creators to decouple action logic from dispatch callers
- Use ES6 parameter defaults for self-describing signatures
- Use selectors for calculated state and decoupling
- Always use TDD!

Structuring Project

Test Suite

  "snapshotSerializers": ["enzyme-to-json/serializer"] // fix enzyme snapshot overloaded with infos
  /* Add this to jest config to avoid some issues in testing environment */
  "setupFiles": [
    "raf/polyfill",
  ],

Debugging React App

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:5000",
  "webRoot": "${workspaceRoot}/src",
  "userDataDir": "${workspaceRoot}/.vscode/chrome",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
  },
  "runtimeArgs": ["--disable-session-crashed-bubble", "--disable-infobars"]
}

Webpack Dev Server & React-Hot-Loader

Babel Stage 2 & 3 Plugin [will update after stage 3]

Third Party Component Used

Production Build Guides & Using GZIP

ESLint, Prettier, Stylelint Code Quality

Misc, Question & Solutions