I'd like to share my approach to architecting a quite large front-end application consisting of dozens of pages and hundreds of components, implemented in parallel by a dozen front-end developers, highlighting the folder structure I'm using to streamline the development in the team. The main technologies used are TS, React, React Router, Tanstack Query, styled components, but the structure is technology agnostic. I prefer to keep the folder structure as flat as possible to reduce the learning curve for newly added developers App folders structure: /elements
/components
/features
/layouts
/pages
...
App.tsx
router.tsx /elements Basic building blocks, typically having minimal internal state, usually enhanced basic components from the UI library. Examples: /elements
    /Textbox
    /Tooltip
    /MultiSelectCheckmarks /components Blocks composed with multiple . Typically, it does not have API access but can have complex internal states or access to global contexts. /elements Examples: /components
    /DataGrid
    /List
    /Modal
    /ErrorState /features Set of components grouped by domain, typically constructed on top of and , with data access, with shared API hooks /components /elements Examples: /features
    /Users
        /UsersList
        /UserEditModal
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
        /ProjectEditModal
        /ProjectHeader
        /ProjectSidebar
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts /layouts Templates shared between multiple pages, say pages in some area of the app shares footer and sidebar. Examples: /layouts
    /ProjectLayout
    /AdminLayout
    /StandalonePreviewLayout /pages Actual pages connected to routes. Composed with layout and components imported from and folders features components Examples: /pages
    /AdminDashboard
    /AdminUsers
    /Project
    /ProjectAddTask Certain folder like , , can be added to top or individual components or feature level on demand /hooks /contexts /utils Individual elements/components/pages folder structure: Individual components follow the agreed file structure to simplify search and maintainability: /ComponentName
    index.ts
    ComponentName.tsx
    ComponentName.styles.tsx
    ComponentName.types.ts
    ComponentName.tests.tsx
    ComponentName.stories.tsx Where: - re-export to shorten imports index.ts - component code ComponentName.tsx - styled components ComponentName.styles.tsx - TS types used more than once, or placed in separate file to avoid circular dependencies ComponentName.types.ts - unit tests ComponentName.test.tsx - storybook stories for component ComponentName.stories.tsx Plus files typically found in : /features - API hooks used amount the components included into the feature FeatureName.api.ts - mocks for API call to use in tests and storybook stories FeatureName.api.mocks.ts - TS types used amount the components included into the feature FeatureName.types.ts I'm using prefix everywhere to ease search in IDE and logs, and have the full context of the file when looking at opened files tabs in IDE. ComponentName Certain files can be omitted as I'm putting things inline when if makes sense and extracting out certain styles components and styles when they're used more than once and it makes sense to achieve better code structure Conclusion I've found the above folders and file structure quite usable in large enough frontend applications from my almost 15 years of development experience. Glad to hear your feedback in the comments! Putting the expanded structure example below: /elements
    /Textbox
        index.ts
        Textbox.tsx
        Textbox.styles.tsx
        Textbox.types.ts
        Textbox.tests.tsx
        Textbox.stories.tsx
/features
    /Users
        /UsersList
            index.ts
            UsersList.tsx
            UsersList.styles.tsx
            UsersList.types.ts
            UsersList.tests.tsx
            UsersList.stories.tsx
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
            index.ts
            ProjectsDataGrid.tsx
            ProjectsDataGrid.styles.tsx
            ProjectsDataGrid.types.ts
            ProjectsDataGrid.tests.tsx
            ProjectsDataGrid.stories.tsx
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts
/layouts
    /ProjectLayout
        index.ts
        ProjectLayout.tsx
        ProjectLayout.styles.tsx
        ProjectLayout.types.ts
        ProjectLayout.tests.tsx
        ProjectLayout.stories.tsx
/pages
    /Project
        index.ts
        Project.tsx
        Project.styles.tsx
        Project.types.ts
        Project.tests.tsx
        Project.stories.tsx
App.tsx
router.tsx

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Large Files Transfers Between Parts of Chrome Extensions for Manifest V3

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Developing An Easy-to-Use File Structure for an Extensive React Frontend Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Large Files Transfers Between Parts of Chrome Extensions for Manifest V3

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Large Files Transfers Between Parts of Chrome Extensions for Manifest V3

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps