Frontend Code organization, regardless of the stack in times of AI 🤖

Source: Dev.to

Frontend architecture in the age of AI

Front‑end development has become increasingly complex. It must handle user requirements, enhancements, business domain logic, error handling, optimization, and more. A well‑structured frontend architecture ensures cohesion between new and legacy code.

In the time of AI agents 🤖

Even with AI‑powered coding tools, clean and well‑organized code remains critical. Without clear structure, AI can overcomplicate solutions. AI agents infer domain logic from code organization; the clearer and more consistent the patterns, the less context the agent needs to produce predictable results.

Rule of thumb: Follow a modular approach to code organization.

What is a modular approach?

A modular approach breaks a solution or user requirements into smaller units, each with a single responsibility. This makes long‑term maintenance easier and simplifies adding new features, whether simple or complex.

Why not rely solely on a framework’s default structure?

Frameworks and libraries often provide a starter project layout, but as the application grows, responsibilities intertwine. It becomes our responsibility to decompose large requirements into self‑contained units (modules).

Use case: Employees overview page

Imagine an admin panel needs a new Employees Overview page with the following features:

Page: Employees Overview
 - Filter (search, role, age range)
 - List employees
 - Open modal for editing an employee
 - Open modal for adding a new employee

Proposed architecture

Below is a rough idea visualized in blocks:

We can organize the code using a modular structure, splitting the feature into independent blocks called modules:

project
├───common
│   ├───components
│   │   └───Modal
│   ├───hooks
│   │   └───useUserLanguage.ts
│   └───models
│       └───user.ts
├───core
│   ├───authentication
│   ├───i18n
│   ├───translations
│   ├───router
│   ├───api
│   └───store
├───modules
│   └───employees-overview
│       ├───EmployeesOverview.tsx   // Main component
│       └───components
│           ├───employee-filter
│           ├───employee-list
│           ├───employee-add
│           └───employee-edit
│               ├───hooks
│               │   ├───useFetchUser.ts
│               │   └───useUpdateUser.ts
│               ├───components
│               ├───helpers
│               ├───models
│               └───EmployeeEdit.tsx
└───lib
    └───utils

Folder responsibilities

• common (also called shared): Reusable code across modules, organized by components, hooks, helpers, etc.
• helpers (also called functions): Pure functions that perform specific tasks.
• models: Entity definitions, ideally mirroring backend structures for a single source of truth (e.g., handling date formats).
• modules: Feature‑based code aligned with business goals.
• core (optional): Foundational app code such as authentication, routing, API clients, and state management. Keeping these in a dedicated folder makes them easy to locate.
• lib (also called utility): Generic technical functions unrelated to domain logic, usable throughout the codebase.

Conclusion 💞

Think in terms of features, responsibilities, and blocks. A modular, well‑structured codebase helps both your team and AI agents maintain and extend the application more efficiently. 💪