moralis-admin-frontend

moralis-admin-frontend

Epic

38 - [FE] dApp Dashboard

Start

• copy env.example to .env
• yarn install
• yarn dev
  • starts hot-reload server for src/index.tsx
• yarn storybook
  • starts storybook on port 6006
• Install Redux DevTools to visualize the application flow

Contributing

• Once you pick up an Issue add the In-Progress label to it
• Branch from master where the number is the feature or issue id as it'll close the issue on merge
  • 134-avatar-component
  • MRs can be created with this naming from the issue directly
• Make a merge request named after the branch and add the In-Progress label to it and to the Issue
• Run yarn atomic to generate your component.
  • See Architecture section to decide which layer your component resides in
  • See Layout for an overview of the component structure
• When ready add the In-Review / Documentation label and assign reviewer(s)

Architecture

• Atoms:

  • Basic building blocks of matter, such as a button, input or a form label. They're not useful on their own.
    • Atoms cannot perform any post-processing
    • Atoms are generalized and modular

• Molecules:

  • Grouping atoms together, such as combining a button, input and form label to build functionality.
    • Molecules can GET data from the Redux store
    • Molecules can perform post processing on props passed to the component
    • Molecules are responsible for rendering the component

• Organisms:

  • Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)
    • Organisms can GET or SET data from the Redux store
    • Organisms cannot perform any post processing on props data that is to be passed down to molecule level.

• Templates:

  • Consisting mostly of groups of organisms to form a page — where clients can see a final design in place.
    • Templates calls the API and must pass down the response as props to the organism layer.
    • Templates cannot perform any post processing on the API data

• Pages:

  • An ecosystem that views different template renders. We can create multiple ecosystems into a single environment — the application

Layout

The component layout convention

• molecules/

  • Component.stories.tsx stories using storybook
  • Component.styles.tsx component styling
  • Component.test.tsx testing using jest
  • Component.tsx component logic
  • types.ts component types
    • convention is I for type interface Component for domain and Props for action
    • note that e.g InterProps does not become IInterprops
      • IComponetProps for interface
      • TComponentAction for type
      • EComponentCommand for enum
  • mock.ts component mock data
  • index.ts
    • export as export { default as Component } from './Component';

FAQ

Q: no node_modules folder after yarn install

A: it's hidden using .vscode/settings.json for performance and a better overview