DEV Community: Husnain Tariq

Why I Switched to a Feature-Based Folder Structure (And Why You Should Too)

Husnain Tariq — Wed, 26 Nov 2025 22:17:02 +0000

As projects grow, the architecture often becomes the silent bottleneck. Recently, I refactored one of my projects by shifting from a traditional file-type folder structure to a feature-based architecture, and the difference has been significant.

In this post, I’ll walk through why I made the switch, how I structured it, and what benefits I gained. Hopefully, this helps you decide if it’s the right move for your project, too.

🔍 The Problem With File-Type Structures

Most React or frontend projects start with something like:

src/
  components/
  hooks/
  utils/
  pages/
  context/
  styles/

This works… until it doesn’t.

As your project grows, you start jumping between folders just to work on a single feature. A simple update may require touching multiple directories. Files become harder to discover, boundaries blur, and the structure stops scaling.

It’s not wrong, but it eventually slows development.

🧩 The Move to Feature-Based Architecture

A feature-based structure groups everything related to a specific feature in one place:

src/
  features/
    dashboard/
      components/
      hooks/
      services/
      types.ts
      index.ts
    auth/
      components/
      hooks/
      services/
      store/

Each feature becomes a self-contained module, owning its UI, state, logic, and tests.

⚡ Key Benefits I Experienced

After restructuring, these improvements were immediately noticeable:

1. Better Scalability

Features can grow independently without affecting others.
Large teams especially benefit from this modularity.

2. Faster Navigation

All files related to a feature live together.
No more hunting across folders.

3. Improved Maintainability

Feature boundaries become clearer, reducing complexity.
It’s easier to remove, rewrite, or migrate a feature.

4. Team-Friendly Structure

Developers can work on different features with less conflict and fewer merge issues.

5. Cleaner Imports & Encapsulation

Feature indices allow export consolidation:


// features/auth/index.ts
export * from "./components";
export * from "./hooks";
export * from "./services";

This leads to cleaner import paths and a more predictable codebase.

📁 Feature-Based Folder Structure — Visual Diagram

A simple visual representation of how a feature-based architecture looks:

src/
│
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── store/
│   │   ├── types.ts
│   │   └── index.ts
│   │
│   ├── dashboard/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── types.ts
│   │   └── index.ts
│   │
│   └── profile/
│       ├── components/
│       ├── hooks/
│       ├── services/
│       ├── store/
│       ├── types.ts
│       └── index.ts
│
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── constants/
│
└── app/ (Next.js routing)

🛠️ When You Should Consider Switching

You’ll benefit from a feature-based architecture if:

Your app is growing, and new modules are being added regularly.
Features are becoming complex
Multiple developers contribute
Navigation feels slower than it should
Refactors feel risky or messy

If you’re in the early stages or building something small, the switch isn’t mandatory, but planning can save time later.

Web Architecture: Monorepos, Micro-frontends, and Vite

Husnain Tariq — Wed, 08 Jan 2025 21:57:45 +0000

Unlocking the Power of Modern Web Architecture: Monorepos, Micro-Frontends, and Vite 🚀✨

Husnain Tariq ・ Jan 8

#vite #monorepo #architecture #javascript

Monorepo + microfrontend with module-federation+vite

Husnain Tariq — Wed, 08 Jan 2025 08:59:37 +0000

Unlocking the Power of Modern Web Architecture: Monorepos, Micro-Frontends, and Vite 🚀✨

Husnain Tariq ・ Jan 8

#vite #monorepo #architecture #javascript

Unlocking the Power of Modern Web Architecture: Monorepos, Micro-Frontends, and Vite 🚀✨

Husnain Tariq — Wed, 08 Jan 2025 08:31:00 +0000

✨ Introduction ✨:

Monorepo

A monorepo is a single repository that houses multiple interconnected yet independent projects. It simplifies development workflows by centralizing code management, enabling seamless code reuse, and streamlining dependency sharing. By fostering collaboration across teams and ensuring consistency in tools and practices, monorepos provide a more cohesive development environment compared to maintaining separate repositories.

Micro Frontend

A micro-frontend architecture decomposes a web application's frontend into smaller, independent units that can be developed, tested, and deployed individually. Each micro-frontend operates autonomously, enabling greater flexibility, scalability, and faster development cycles. This approach allows teams to work independently on specific features or modules, leveraging different technologies if needed while maintaining seamless integration within the larger application.

Module Federation and Vite

Module Federation is a powerful Webpack feature that enables the dynamic sharing and loading of code across remote locations. It allows multiple applications or modules to collaborate seamlessly by sharing dependencies and resources at runtime, without requiring a rebuild. This feature is particularly beneficial for implementing micro-frontend architectures, enabling independent teams to integrate their codebases efficiently while maintaining autonomy and scalability.

Vite It is a modern build tool for web development, focusing on speed and efficiency. Vite is designed to address performance issues associated with traditional build tools like Webpack and Parcel, especially in large-scale modern projects.

Challenges Addressed by These Tools 🤝

Scaling Teams: Facilitate collaboration across multiple teams by enabling parallel development with clear boundaries and shared resources.
Managing Dependencies: Simplify dependency sharing and versioning, ensuring consistency and reducing conflicts across projects.
Enhancing Development Speed: Accelerate development cycles with modular architectures, streamlined builds, and optimized workflows.

By leveraging these tools and patterns, developers can create scalable, maintainable, and high-performance front-end applications tailored to the demands of modern web development.

💡Integrating Monorepos, Micro-Frontends, Module Federation, and Vite for Modern Web Development 💡

Impact

By combining these technologies, you create a powerful and flexible architecture for building large-scale, complex web applications. Here's a breakdown of the key impacts:

Enhanced Scalability: Independent deployment and updates of micro-frontends within a monorepo.
Improved Developer Experience: Faster development with Vite and streamlined workflows.
Optimized Performance: On-demand loading of code with Module Federation reduces initial load times.
Better Maintainability: Modular micro-frontends improve code organization and reduce coupling.

🔥🔥 Enough of this theory, let's see some action! 🔥🔥

How to Do It?

1: Setup Monorepo

Choose a monorepo management tool like Lerna or Nx. (let's choose Nx for this demo project)

Let's create a folder and initialize Nx workspace there.


mkdir my-monorepo
cd my-monorepo

2: Install Nx Cli:

Install Nx CLI globally into your system


npm add --global nx@latest

Initialize Nx workspace

npx create-nx-workspace@latest

Use the Nx CLI to generate new applications and libraries within your workspace


nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: Configure Vite And Implement Module Federation:

Install the @originjs/vite-plugin-federation plugin in each micro-frontend's vite.config.js.


npm i @originjs/vite-plugin-federation -D

Your Project structure should look like this

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

Create a vite.config.js (if not created by Nx) and configure it.
Implement module federation package.

Host-App Vite configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

Remote-App Vite Configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

🎉 Congrats, your app is configured now. 🎉
Now, go ahead and create a component and expose it to the host app.

How to add a remote component to the host?

Let's assume you have exposed a component named as "AppComponent" and your remote name is "remoteApp"


const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*NOTE: * Make sure to add a remote URL to the host's vite.config.js file.

🎉🎉 Cool!! your app is ready, go ahead and create cool projects with it.

Real-World Scenarios 🌟

Large-Scale E-Commerce Platforms: Teams can independently develop and manage features like product pages, checkout flows, and user account management, enabling faster iterations and better scalability.
Enterprise Applications: Departments can own and manage specific features or modules, such as analytics dashboards, admin panels, or reporting tools, within a shared platform.
Widget and Dashboard Development: Different teams can build, maintain, and deploy individual widgets or dashboards, ensuring modularity and flexibility in large applications.

🔗 Check out my demo project code here 🚀🚀: Monorepo project

Conclusion

Monorepos, Micro-frontends, Module Federation, and Vite, using the strengths of all the above technologies, can help organizations build scalable, maintainable, and high-performance web applications that meet the demands of modern development and business needs.

Additional Resources:

Nx Documentation
Vite Documentation
Webpack Module Federation
Micro-Frontend Architecture

Feel free to reach out if you have questions or need assistance in implementing this setup for your project. Let's build something amazing! 🚀