Here are some simple guidelines which we can follow as a team to improve our code quality, developer experience and team collaboration

Component Structure Guide

Import Order

Using useMemo & useCallBack

Component vs. Utility Functions/Custom Hooks

Named Vs Default Exports

type Vs interface ~ TypeScript

Types vs Enums ~ TypeScript

Project Folder Structure

Network calls with React Query - Coming Soon

Test Cases - Coming Soon

Legacy Guidelines

Below are the guidelines which were created on the older project structure. Please do follow these to understand the older(or going to be older soon😉) codebase.

Proposed structure

Very similar to https://bradfrost.com/blog/post/atomic-web-design/

Import Order (https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m)(https://manurana.medium.com/organizing-imports-in-react-and-react-native-faf982a3a3b5)

• Each of these should follow sortImports so among them they are sorted, all bulleted points need to have a new line in between

  • // React + Web3 Essentials

    react, react-ga, ethers, web3-react

  • // External Packages all external modules

  • // Internal Compoonents

    all internal components

  • // Internal Configs

    config files, project packages

  • // Interfaces

    all interfaces, exported or internal ones, have to be denoted with **I**

  • // Internal Configs

    all constants

  Example SS

  ---

• eslinted to ensure imports are ogranized

"editor.codeActionsOnSave": {
    "source.sortImports": true
  },