DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

Optimal Folder Structures for React Native / React JS Projects

#reactnative #android #javascript #react

How to Decide the Right Architecture

Choosing the right architecture for your React or React Native project depends on several key factors:

  1. Project Size and Complexity
  2. Team Size and Workflow
  3. Future Scalability

1. Project Size and Complexity

a) Small Projects: For smaller projects with simple requirements, a straightforward architecture with minimal layers is often sufficient. Using functional components with hooks and basic state management can keep the codebase clean and manageable.

b) Large Projects: Larger projects with more complex requirements may benefit from a more structured architecture. This could include state management libraries like Redux or MobX, and a clear separation of concerns between presentation and business logic.

2. Team Size and Workflow

a) Small Teams: Small teams can benefit from a simplified architecture that promotes rapid development and ease of communication. Shared understanding and fewer coordination points are key. Component-based architecture with shared utilities and services works well.

b) Large Teams: Larger teams might require a more modular and scalable architecture. Using design patterns such as Container/Presentational components, feature-based folder structures, and strict code conventions can help manage the complexity.
Incorporating automated testing and continuous integration pipelines can also facilitate smooth collaboration.

3. Future Scalability

a) Scalability Considerations: Planning for future growth is essential. An architecture that supports modularity, reusability, and maintainability will facilitate scaling. Implementing lazy loading, code splitting, and micro-frontends can help manage the increasing complexity as the project grows.

For example:
New social media app with a small team, expecting to grow over time this is how we can choose as per requirement/teamsize.
Image description

Types of Architecture:

1. FLAT STRUCTURE

Small projects, prototypes, or quick demos.111

my-small-project/
  src/
    App.js
    index.js
    ComponentA.js
    ComponentB.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

2. FEATURE BASED STRUCTURE

Medium to large projects with distinct features or modules

my-feature-based-project/
  src/
    features/
      auth/
        components/
          Login.js
          Register.js
        screens/
          LoginScreen.js
          RegisterScreen.js
        services/
          authService.js
        authSlice.js
      profile/
        components/
          ProfileDetails.js
        screens/
          ProfileScreen.js
        services/
          profileService.js
        profileSlice.js
  store/
    rootReducer.js
    store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

3. LAYERED STRUCTURE

Projects needing clear separation of concerns.

my-layered-project/
  src/
    components/
      Button.js
      Header.js
    screens/
      HomeScreen.js
      LoginScreen.js
    services/
      apiService.js
    utils/
      helpers.js
    hooks/
      useAuth.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

4. DOMAIN DRIVEN STRUCTURE

Complex applications with distinct business domains.

my-domain-driven-project/
  src/
    domains/
      user/
        components/
          UserDetails.js
        screens/
          UserScreen.js
        services/
          userService.js
      event/
        components/
          EventDetails.js
        screens/
          EventScreen.js
        services/
          eventService.js
  store/
    rootReducer.js
    store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

5. ATOMIC DESIGN STRUCTURE

Design systems and UI component libraries.

src/
  components/
    atoms/
    molecules/
    organisms/
    templates/
    pages/
Enter fullscreen mode Exit fullscreen mode

6. DUCK STRUCTURE

Projects using Redux for state management.

my-redux-duck-project/
  src/
    store/
      ducks/
        auth.js
        profile.js
      rootReducer.js
      store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

7. MONOREPO STRUCTURE

Code for multiple projects is stored in a single repository like react native, react js etc.

my-monorepo-project/
  packages/
    app1/
      src/
        components/
          Button.js
          Header.js
        screens/
          HomeScreen.js
          LoginScreen.js
        store/
          ducks/
            auth.js
            events.js
          index.js
        services/
          apiService.js
        utils/
          helpers.js
        App.js
      __tests__/
        unit/
          Button.test.js
        integration/
          App.test.js
      e2e/
        tests/
          app.test.js
        config/
          wdio.conf.js
      package.json
    app2/
      src/
        components/
          Footer.js
          NavBar.js
        screens/
          DashboardScreen.js
          SettingsScreen.js
        store/
          ducks/
            user.js
            posts.js
          index.js
        services/
          userService.js
        utils/
          formatters.js
        App.js
      __tests__/
        unit/
          Footer.test.js
        integration/
          App.test.js
      e2e/
        tests/
          app.test.js
        config/
          wdio.conf.js
      package.json
    shared-components/
      src/
        Button.js
        Header.js
      __tests__/
        unit/
          Button.test.js
      package.json
    utils/
      src/
        api.js
        helpers.js
      __tests__/
        unit/
          api.test.js
      package.json
  .github/
    workflows/
      ci.yml
  package.json
  lerna.json
  yarn.lock
  jest.config.js
  README.md
Enter fullscreen mode Exit fullscreen mode

8. MICRO-FRONTEND STRUCTURE

Each micro-frontend is an independently deliverable frontend application.

my-react-native-app/
  src/
    features/
      auth/
        components/
        screens/
        services/
      profile/
        components/
        screens/
        services/
      chat/
        components/
        screens/
        services/
  store/
    rootReducer.js
    store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

Some examples of app where specific structures can be used

a) INSTAGRAM
Image description

instagram/
  src/
    features/
      feed/
        components/
        screens/
        services/
      stories/
        components/
        screens/
        services/
      reels/
        components/
        screens/
        services/
      messaging/
        components/
        screens/
        services/
      profile/
        components/
        screens/
        services/
  store/
    rootReducer.js
    store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

b) FLIPKART
Image description

flipkart/
  packages/
    product-listing/
      src/
        components/
        screens/
        services/
      __tests__/
      package.json
    checkout/
      src/
        components/
        screens/
        services/
      __tests__/
      package.json
    user-account/
      src/
        components/
        screens/
        services/
      __tests__/
      package.json
    marketing/
      src/
        components/
        screens/
        services/
      __tests__/
      package.json
  package.json
  lerna.json
  yarn.lock
  README.md
Enter fullscreen mode Exit fullscreen mode

a) SPOTIFY
Image description

spotify/
  src/
    domains/
      user/
        components/
        screens/
        services/
      playlist/
        components/
        screens/
        services/
      music/
        components/
        screens/
        services/
      recommendations/
        components/
        screens/
        services/
  store/
    rootReducer.js
    store.js
  App.js
  index.js
  package.json
  README.md
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

vinod_kumar_7b58f9beecf58 profile image

Want to switch node

Vinod Kumar -

brendan_dev profile image

Using Notion as a CMS and create a personal blog with React

Brendan -

black7375 profile image

Rethinking CSS in JS

MS_Y -

vulcanwm profile image

Introducing GameGift: Create and gift personalised games in minutes

Medea -