Structure

This style guide is mostly based on the standards that are currently prevalent in Typescript. Let's discuss if you have better idea on how to improve it.

├── docs
│   ├──  style-guide.md
├── __tests__
│   ├── e2e     # forder to e2e test 
│   ├── intergration # forder to integration test 
│   ├── utils   # forder to utils test
│   │   ├── components 
│   │   │   ├── forms
│   │   │       ├── Form.spec.tsx
│   │   ├── hooks
│   │   │   ├── useMemo.spec.ts
│   │   │   ├── ...
│   │   ├── utils
│   │   │   ├── date.spec.ts
│   │   │   ├── ...
├── src
│   ├── assets          # folder to store assets
│   │   ├── svgs    # folder to svgs
│   │   └── images      # folder to images
│   ├── configs          # folder to configs
│   │   ├── locales    # folder to locales
│   │   └── theme      # folder to theme
│   │   ├── antd.ts    # forder to config antd
│   │   └── ...
│   ├── generated   # folder for generated files, please ignore it 
│   ├── graphql   # folder to add all mutations and queries
│   │   │   └── queries
│   │   │      └── user.graphql
│   │   │   └── mutations
│   │   │   └── fragments
│   │   ├── cache.ts   # folder to config cache 
│   │   └── client.tsx  # folder to config file client
│   ├── pages          # folder to store all the pages
│   │   └── account
│   │   │   ├── info.tsx
│   │   └── forgot-password.tsx # use title-case for pages
│   ├── services # handle business logic
│   │   └── user-defined-layer 
│   │   │   ├── user-defined-layer.ts # use title-case for service
│   │   │   ├── line-string.ts
│   │   │   ├── popup.ts
│   │   │   ├── factories.ts
│   │   │   ├── symbol.ts
│   │   └── profile-feed.ts
│   ├── shared          # folder to shared
│   │   ├── components   
│   │   │   └── commmon # use title-case for forder 
│   │   │       └── Loading.tsx # use PascelCase for component ( component )
│   │   │   └── forms
│   │   │       └── EditForm.tsx
│   │   │   └── modals # store all modal here
│   │   │       └── ManageUserModal.tsx
│   │   │   └── selectors  # store all selector here
│   │   │       └── UserSelector.tsx
│   │   │   └── user  # store all component for module user
│   │   │       └── UserInfo.tsx
│   │   │   └── layouts  # store all layout here
│   │   │       └── PrivateLayouts.tsx
│   │   │   └── ...
│   │   ├── hooks
│   │   │   └── useCounter.ts
│   │   │   └── useAsync.ts
│   │   │   └── ...
│   │   ├── i18n
│   │   ├── routes
│   │   │   └── PrivateRouter.ts
│   │   ├── constants
│   │   │   └── map.ts
│   │   ├── types
│   │   │   └── map.ts
│   │   │   └── i18next.d.ts
│   │   │   └── mapbox-gl-draw.d.ts
│   │   │   └── vite-env.d.ts
│   │   │   └── ...
│   │   ├── utils # Use camelCase for file in this forder
│   │   │   └── date.ts
│   │   │   └── formatGeometry.ts
│   │   │   └── ...
│   └── App.tsx      # App entry point
│   └── main.tsx     # main entry point
├── .gitignore
├── package.json
└── README.md
└── yarn.lock
└── ...