{"id":21052786,"url":"https://github.com/modularcode/modular-styleguide","last_synced_at":"2026-01-02T07:05:44.195Z","repository":{"id":67455294,"uuid":"45629195","full_name":"modularcode/modular-styleguide","owner":"modularcode","description":"Guide how to organize your app code in modular way","archived":false,"fork":false,"pushed_at":"2021-07-20T12:10:45.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-23T09:03:36.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modularcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-05T17:55:39.000Z","updated_at":"2021-07-20T12:10:47.000Z","dependencies_parsed_at":"2023-03-03T00:00:16.065Z","dependency_job_id":null,"html_url":"https://github.com/modularcode/modular-styleguide","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"9c49da735b2869ff4c72a9ff3c6287447fc22e4e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularcode%2Fmodular-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularcode%2Fmodular-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularcode%2Fmodular-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularcode%2Fmodular-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modularcode","download_url":"https://codeload.github.com/modularcode/modular-styleguide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243485296,"owners_count":20298292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T16:01:29.780Z","updated_at":"2026-01-02T07:05:44.166Z","avatar_url":"https://github.com/modularcode.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modular Styleguide\n\n\u003e An opinonated guide about how to organize your app code in modular way\n\n\n## Naming conventions\n\n### Use **PascalCase** for the component-related filenames and their directories, use **camelCase** for the rest of the files.\n\n```\n# Bad\n\nsrc/\n  Main.js\n  someComponent/\n    someComponent.jsx\n```\n  \n```\n# Good\n\nsrc/\n  main.js\n  otherNonComponentFile.js\n  SomeComponent/\n    SomeComponent.jsx\n\n```\n\nThere can be an exceptions for this rule though when declaring TypeScript interfaces\n\n```\n# bad\n\nsrc/\n  user.ts\n```\n\n\n```\n# good\n\nsrc/\n  User.ts\n```\n\n\n```\n# even better\n\nsrc/\n  _types/\n    User.ts\n```\n\n### Use file extensions that make more sense (assuming SomeComponent contains **JSX** markup)\n\n```\n# Bad\n\nsrc/\n  SomeComponent/\n    SomeComponent.js\n```\n\n```\n# Good\n\nsrc/\n  SomeComponent/\n    SomeComponent.tsx\n\nsrc/\n  SomeComponent/\n    SomeComponent.jsx\n```\n\n### Name the test files with `.test.{extension}` or `.spec.{extension}`\n\n```\n# Bad\n\nsrc/\n  someFile.js\n  someFileTest.js\n  SomeComponent/\n    SomeComponent.jsx\n    SomeComponentTest.jsx\n```\n\n```\n# Good\n\nsrc/\n  someFile.js\n  someFile.spec.js\n  SomeComponent/\n    SomeComponent.jsx\n    SomeComponent.spec.jsx\n```\n\n### Use `Base`, `The`, `App` naming convention for reusable components\n\n```\n# Bad\n\nButton/\nDropdown/\nFooter/\nHeader/\nIcon/\nSidebar/\nTypography/\n```\n\n```\n# Good\n\nBaseButton/\nBaseDropdown/\nBaseIcon/\nBaseTypography/\nTheFooter/\nTheHeader/\nTheSidebar/\n```\n\n\n```\n# Good\n\nAppFooter/\nAppHeader/\nAppSidebar/\nBaseButton/\nBaseDropdown/\nBaseIcon/\nBaseTypography/\n```\n\n### Underscore the aggregational non-component directories\n\n```\n# Bad\n\nsrc/\n  config/\n  layouts/\n  OtherComponent/\n  services/\n  SomeComponent/\n  styles/\n```\n\n\n```\n# Good\n\nsrc/\n  _config/\n  _layouts/\n  _services/\n  _styles/\n  OtherComponent/\n  SomeComponent/\n```\n\nIn the bad example we need to spend more time figuring out what type of directories are responsible for which things. Also the ordering is messed up, we have organizational directories like `services/` in between two component directories.\n\nIn contrast in the good example we can immediately visually distinguish ComponentDirectories from non-component directories. The IDEs will show the directories with underscore on top of the project file explorer which is very convenient.\n\n## Code organization\n\n### Keep components self-contained\n\n```\n# Bad\n\nsrc/\n  assets/\n    MyComponentRelatedImg.svg\n  MyComponent/\n    MyComponent.jsx\n  styles/\n    MyComponent.scss\ntests/\n  unit/\n    MyComponent.spec.jsx\nstorybook/\n  MyComponent.stories.mdx\n```\n\n\n```\n# Good\n\nsrc/\n  MyComponent/\n    MyComponent.jsx\n    MyComponent.scss\n    MyComponent.spec.jsx\n    MyComponent.stories.mdx\n    MyComponentRelatedImg.svg\n\n```\n\n```\n# Good\n\nsrc/\n  MyComponent/\n    _tests/\n      MyComponentMocksData.jsx\n      MyComponentMocks.jsx\n      MyComponent.spec.jsx  \n    MyComponent.jsx\n    MyComponent.scss\n    MyComponent.stories.mdx\n    MyComponentRelatedImg.svg\n```\n\nIn the bad example the component related files are scattered across the project directories, so when working on that component we will have to jump back and forth through directories which is super inefficient. \n\nIn contrast in the good example all the files related to the component are under the hand, which makes `MyComponent` more maintainable and self-contained.\n\n\n\n### Place reusable components into  `_common` or `_components` directory\n\n\n```\n# Bad\n\nsrc/\n  components/\n    BaseButton.jsx\n    TheHeader.jsx\n```\n\n\n```\n# Bad\n\nsrc/\n  components/\n    BaseButton/\n      BaseButton.jsx\n    TheHeader/\n      TheHeader.jsx\n```\n\n\n```\n# Good\n\nsrc/\n  _components/\n    BaseButton/\n      BaseButton.jsx\n    TheHeader/\n      TheHeader.jsx\n```\n\n```\n# Good\n\nsrc/\n  _common/\n    BaseButton/\n      BaseButton.jsx\n    TheHeader/\n      TheHeader.jsx\n```\n\n\n### The hierarchy of components should represent the app hierarchy\n\n```\n# Bad\n\nsrc/\n  components/\n    Button/\n    Title/\n    \n  pages/\n    AuthPage/\n    AuthLoginPage/\n    AuthSignupPage/\n    BlogPage/\n    BlogArticlesPage/\n    BlogArticlePage/\n    BlogArticleEditPage/\n    DocsPage/\n    TutorialPage/\n    TutorialItemPage/\n    \n  templates/\n    Header/\n    Sidebar/\n    Footer/\n    \n  utils/\n    auth.js\n  \n```\n\n\n```\n# Good\n\nsrc/\n  _common/\n    BaseButton/\n    BaseTitle/\n    TheHeader/\n    TheSidebar/\n    TheSidebar/\n    \n  AuthPage/\n    _common/\n      AuthHeader/\n    _services/\n      authService.js\n    AuthLoginPage/\n    AuthSignupPage/\n    \n  BlogPage/\n    BlogListPage/\n    BlogItemPage/\n    BlogEditorPage/\n    \n  DocsPage/\n  \n  TutorialsPage/\n    TutorialsListPage/\n    TutorialsItemPage/\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularcode%2Fmodular-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodularcode%2Fmodular-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularcode%2Fmodular-styleguide/lists"}