Back to Documentation

Architecture Guide

Understanding the modular architecture and design patterns used in this React Native boilerplate

Architecture Overview

This boilerplate follows a modular, scalable architecture designed for maintainability and team collaboration

Modular Structure

Features are organized into self-contained modules with clear boundaries

Atomic Design

UI components follow atomic design principles for consistency and reusability

Clean Architecture

Separation of concerns with clear data flow and dependency management

TypeScript First

Strong typing throughout the application for better developer experience

Folder Structure

How the codebase is organized for maximum efficiency and clarity

src/
├── components/ # Reusable UI components
├── modules/ # Feature-specific modules
├── services/ # API and external services
├── store/ # Global state management
├── navigation/ # Navigation configuration
├── hooks/ # Custom React hooks
├── utils/ # Utility functions
├── types/ # TypeScript type definitions
└── constants/ # Application constants

Component Architecture

How components are structured following atomic design principles

Atoms

Basic building blocks - buttons, inputs, icons

components/atoms/Button/
├── Button.tsx
├── Button.types.ts
└── index.ts

Molecules

Simple combinations of atoms - form fields, cards

components/molecules/FormField/
├── FormField.tsx
├── FormField.styles.ts
└── index.ts

Organisms

Complex UI sections - headers, forms, lists

components/organisms/UserProfile/
├── UserProfile.tsx
├── UserProfile.hooks.ts
└── index.ts

State Management

How global and local state is managed throughout the application

Zustand for Global State

Simple, lightweight state management for app-wide data

TanStack Query for Server State

Powerful data fetching and caching for API interactions

React Hook Form for Form State

Efficient form handling with validation and performance optimization

Local Component State

useState and useReducer for component-specific state

Module Structure

How features are organized into self-contained modules

modules/auth/
├── components/ # Module-specific components
├── hooks/ # Module-specific hooks
├── services/ # API services for this module
├── store/ # Module state management
├── types/ # Module type definitions
├── utils/ # Module utilities
└── index.ts # Module exports

Each module is self-contained and can be easily moved or removed without affecting other parts of the application.

Architectural Best Practices

Guidelines to maintain clean and scalable architecture

Single Responsibility

Each component and module should have a single, well-defined purpose

Dependency Injection

Use props and context to inject dependencies rather than direct imports

Interface Segregation

Create specific interfaces rather than large, monolithic ones

Consistent Naming

Follow established naming conventions throughout the codebase

Next Steps

Now that you understand the architecture, explore these related topics:

Project StructureBest Practices