Skip to content

Instantly share code, notes, and snippets.

@benedyktdryl
Forked from hstemplewski/Structure.md
Created September 6, 2022 09:22
Show Gist options
  • Save benedyktdryl/4aff7b6eb348c04adf072f1d10585f10 to your computer and use it in GitHub Desktop.
Save benedyktdryl/4aff7b6eb348c04adf072f1d10585f10 to your computer and use it in GitHub Desktop.
Front-end structure proposal

Front-end structure proposal

Table of content

Structure

.
├── e2e // E2E tests configs and tests
│   ├── .ci-scripts
│   ├── screen-objects // heleprs to get the objects for particural screen
│   └── settings // directory per tested feature
├── src
│   ├── _shared // package for all things shared for all app
│   │   ├── components
│   │   ├── constants
│   │   ├── styles // styles related helpers
│   │   ├── helpers // helpers methods
│   │   ├── types
│   │   └── validation-schema // schemas with validation rules
│   ├── infrastructure
│   │   ├── _shared // shared in things in package
│   │   ├── api // all api clients
│   │   ├── contexts
│   │   ├── hooks
│   │   ├── navigation
│   │   ├── queries
│   │   └── tracking
│   ├── modules // feature modules for screens
│   └── screens // ui screens
└── types // general types in app

It's allowed to create subdirectories for modules etc. Eg. If we have module article which has a list used only in scope of this module we can create directory components in this module directory, but after we start using it somewhere outside please move it to _shared/components.

File naming convention

Use kebab case for file names and put type of thing after dot .. Example:

  • components - file-name.component.tsx
  • hooks - file-name.hook.ts
  • HOCs - with-file-name.hoc.ts
  • styles - file-name.styles.ts
  • etc.

General coding rules

  1. Allways keep code clean.
  2. Scout rule.
  3. All necessary things should be covered by unit tests.
  4. Keep styles always in separate file in the same derectory where the component is.
  5. Comments are allowed, but code should be self explainatory.
  6. Do not disable es-lint/ts rules, if you did it explain why in comment.
  7. Before creating a PR make sure lint, types check and tests are passing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment