The structure of a software project is one of the key factors in deciding success or failure. This includes the application architecture, as well as the development process and the whole project organization.The bigger the project is, the more developers that work on the project, and the longer a project runs, the more important it is to have a good project structure. But small projects can also fail because of a bad structure.
Before proposing a recommended project structure, let’s look at the typical components of a modern frontend project. Understanding these components will provide a foundation for designing an effective project structure.
1. Source code: This is the heart of your application and contains the JavaScript/TypeScript files that contain your application’s logic, HTML files for structure, and style files for appearance. Everything that defines the operation and user interface of your application is found here.
2. Assets: This category holds all the static files, such as images, videos, and fonts, that are utilized by your application.
3. Configuration: These files hold important parameters that control various aspects of your application. eg : package.json, .env
4. Tests: This category is dedicated to ensuring the correctness and stability of your application. It holds all the unit, integration, and end-to-end tests that simulate user behavior, validate interactions, and check the functionality of your application, helping to catch and prevent potential bugs.
5. Documentation: This is where all the informative documents of your application reside. From the README file providing an overview of the project to the API documentation and the style guide for coding, these documents help maintain consistency, understanding, and ease of use for anyone interacting with the project.
6. Build artifacts: These are the outputs of the build process, including bundled and optimized JavaScript, CSS, and HTML files ready for deployment, and other temporary or diagnostic files that help debug build issues. They’re key to distributing your application to end users.
Collectively, these diverse components form the foundation of a typical React code base, highlighting the complexity and breadth of considerations involved in frontend projects.
Now, it’s time we explore some tried-and-tested approaches to structuring our code. These strategies aim to simplify the development process and make life easier for developers.
Feature-based structure
The application is organized based on features or modules. Each feature contains its own set of components, views, API calls, and state management, allowing for clear separation and encapsulation of functionality.
With a feature-based architecture in the context of online shopping, you can organize your files and folders as follows:
features/: Represents different features of the application, such as Home, Cart, ProductDetails, Checkout, Profile, and more. Each feature has a folder containing components, containers, pages, services, types, and utils related to that feature.
shared/: contains reusable components, containers, services, types, and utils that can be shared across multiple features.
api/: contains modules for making API calls
store/: directory contains modules for state management (for example, Redux)
router/: directory contains the routing configuration and related components
App.tsx: file serves as the entry point of the application
Component-based structure
The application is organized around reusable components. Components are categorized based on their functionality and can be composed together to build larger views.
With a component-based architecture in the context of online shopping, you can organize your files and folders as follows:
- components/: folder contains individual components related to various features of the online shopping application. Each component is organized into a folder, which may contain child components as necessary.
- routes/: folder handles frontend routing in the application. It includes the main AppRouter.tsx file, which configures the routing logic, and the routes.tsx file, which defines the individual routes and their corresponding components.
- api/: folder contains separate files for different API domains or functionalities. These files, such as products.ts, cart.ts, auth.ts, and payment.ts, handle the API calls related to their respective domains.
Atomic design structure
The key idea behind atomic design is to create a systematic approach to building UI components that encourages reusability, scalability, and maintainability. It provides a clear structure for organizing and naming components, making it easier to understand and navigate the UI code base.
Here’s how the atomic design methodology categorizes UI components:
Atoms: Atoms are the smallest building blocks of a UI and represent individual elements such as buttons, inputs, icons, or labels. They are typically simple and self-contained.
Molecules: Molecules are combinations of atoms and represent more complex UI components. They encapsulate a group of atoms working together to form a functional unit, such as a form field or a navigation bar.
Organisms: Organisms are larger components that combine molecules and/or atoms to create more significant sections of a UI. They represent distinct sections of a user interface, such as a header, sidebar, or card component.
Templates: Templates provide a layout structure for arranging organisms and/or molecules. They define the overall skeleton of a page or a specific section of a UI.
Pages: Pages represent complete user interface screens that are composed of templates, organisms, molecules, and atoms. They
represent the final output visible to the user.
With an atomic design architecture in the context of online shopping, you can organize your files and folders as follows:
- atoms/, molecules/, organisms/, templates/, and pages/: directories represent the different levels of component composition and abstraction.
- api/: directory contains the API-related files for making API calls.
- views/: directory contains the individual views that render the components.
- routes/: directory handles the routing configuration
The MVVM structure
The MVVM structure is a software architectural pattern that’s primarily used in building user interfaces:
The Model represents the actual data and/or information we are dealing with. This could be a database, a file, a web service, or even a simple object.
The View is what the user sees and interacts with. It’s the user interface that presents the Model to the user.
The ViewModel is where most of the logic resides in this pattern. It is an abstraction of the View that exposes public properties and commands, bridging the gap between the View and the Model, and processes the data from the Model into a format that is easy for the View to handle. It can perform operations on the data and decide how it should be presented to the View.
To structure a React application with the MVVM architecture in the context of online shopping, you can organize your files and folders as follows:
components/: directory contains reusable UI components, organized by their respective features
models/: directory includes the data models or entities representing the application’s domain objects, such as CartItemModel and ProductModel
viewmodels/: directory holds the Hooks responsible for managing the state, logic, and interactions of the views.
services/: directory contains modules for handling API calls and other external services
views/: directory includes the view components that display the UI based on the ViewModel state
routers/: directory houses the routing configuration and components
App.tsx: file serves as the entry point of the application
Summary
We discussed various styles of structuring a React application, including feature-based, component-based, MVVM, and atomic design. Each approach offers its benefits and considerations, allowing developers to choose the most suitable structure for their specific project requirements. By staying proactive in shaping the folder structure, developers can mitigate the challenges of managing a large React application and ensure maintainability and scalability in the long run.
Top comments (0)