1.0.0 • Public • Published

    Frontend README

    Golden rule: Think before you type


    Single source ot truth is redux.
    For every side effect we use redux-saga.
    We prefer hooks over HoC
    Data fetching and changing on server is done by (@inventi/keep)[] (useFetch, useMutate, etc.) - see examples.
    For styling we use styled-component and (xstyled)[].
    We never use units in padding, margins, etc - that's what xstyled does. See theme in src/App directory.
    For user permissions we have set up ACL. See permissions in src/App directory.

    Creating components

    Do NOT create component files youself or by copying older ones.
    Use scaffolding tool yarn generate in this frontend directory for generating:

    • components
    • pages
    • redux saga modules

    Project structure

    Explore structure if this project to see all these rules in action.


    Divided into groups by its size. All components should contain storybook stories for better development and example usage.

    • Elements

      Basic brick and simplest pieces of puzzle in your application.
      Must NOT use any other element or block.
      Never use Redux on an kind of state inside it.
      Intended to be used by other components.

    • Blocks

      Middle-complex building block in your application.
      Must NOT use any other block.
      Never use Redux on an kind of state inside it. If you need it stateful, separate it into Container under Page.
      Intended to be used by other components.

    • Pages

      The biggest type of component.
      It can NEVER use other pages inside.
      Expected to collocate containers and components that are only related to specific page.


    We use redux.
    Every logical entity separate into its folder. See for example (cat module)[/src/store/cat].

    index.ts is everytime a (duck)[/src/store/cat].
    Duck is selector, action type, action create and reducer - all in one.

    sagas.ts is only for sagas - sideeffects.
    Sideeffect is for example data fetching, saving to localStorage, and so on.

    Before commit

    Check your code style

    • all components in src/components should have storybook
    • Check if storybook works.
    • yarn test => all tests must be passing
    • yarn lint:js =>lint

    Challenge implementation of your code if it is (and see further reading below):

    • simple
    • has single responsibility
    • is encapsulated
    • reusable
    • composable

    Further reading


    TS Typeguards

    // We take advantage of TS semantic sugar 'value is Date' which indicates that
    // if the function returns 'true' => value is indeed an instance of Date... and NOTHING ELSE !
    const isDate = (value: Date | any): value is Date => {
      // Do any logic to check whether 'value' is of expected type
      return value instanceof Date
    function main() {
      // Imagine function getDate() returns value representation of some Date,
      // HOWEVER it might return someting else.. you don't know.
      const date: Date | any = getDate()
      // When we need to call function Date.toISOString() on it..
      // Calling it on variable which might be undefined or null will result in error.
      console.log(date.toISOString()) // Might resolve in following errors
      // TypeError: Cannot read property 'toISOString' of undefined
      // TypeError: Cannot read property 'toISOString' of null
      // TypeError: date.toISOString is not a function
      // That's why we need to check whether 'date' is instance of Date
      if (isDate(date)) {
        // We can safely call .toISOString() here..




    npm i grab-a-plate-frontend

    DownloadsWeekly Downloads






    Unpacked Size

    492 kB

    Total Files


    Last publish


    • adambisek