Skip to content

Instantly share code, notes, and snippets.

@hstemplewski
Last active October 24, 2022 14:17
Show Gist options
  • Save hstemplewski/0e2c8af5e45a73b002fdba7cc8cc0d8a to your computer and use it in GitHub Desktop.
Save hstemplewski/0e2c8af5e45a73b002fdba7cc8cc0d8a 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 based bouded context
│   └── pages or screens // ui screens or pages
└── 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