App architecture
Here you can read about file structure, patterns and dependencies
Last updated
Here you can read about file structure, patterns and dependencies
Last updated
This project is built with a modern and scalable frontend stack that prioritizes performance, responsiveness, and an optimal user experience. It incorporates several libraries and tools to streamline development and enhance functionality:
Ant Design: Used as the primary UI component library, ensuring a consistent and professional design.
Modular SCSS: For styling, we use modular SCSS, which helps maintain organized and isolated styles for each component.
Axios: For handling HTTP requests, providing a straightforward way to manage API calls.
Chart.js: Integrated for data visualization, allowing the display of dynamic charts and data insights.
DnD Kit: Used for drag-and-drop functionality, making user interactions intuitive and flexible.
Framer Motion: Adds smooth and performant animations to enhance the user experience.
i18n: For multilingual support, making the application accessible to users in various languages.
The following sections describe the file structure in detail, including key directories and their roles within the project. This structure ensures modularity, maintainability, and a clear separation of responsibilities.
In ui folder you can see next architecture:
assets/
This folder contains static assets used across the application, such as images, fonts, icons especially flaticons styles, fonts and other media files.
Organize assets by type or feature for easier navigation (e.g., icons/, icons/webfonts, fonts/, icons/css).
Example: assets/logo.png, assets/icons/css/uicons-regular-rounded.css.
common/
Contains reusable animation variants, functions, constants, components, custom icons, hooks and styles (including scss variables and reusable classes) that are widely used throughout the app.
Use this for app-wide settings, wide-spread components and styles, enums, or constants that multiple components or pages need access to.
Example: common/constants.js for storing constant values like user, membership statuses, regex patterns and many else.
components/
This is where all pages related UI components are stored. Each page should have its own folder, which includes its JS/JSX file and optional SCSS module or test files.
Components here are related to some pages and in most cases used on them.
Example: components/leads/leadForm, components/leads/styles.module.scss.
context/
Houses all context providers for managing global state using React Context API.
Each context can have its provider and custom hooks for ease of use.
Example: context/AuthContext.js for authentication state management, context/TourContext.js for better user experience for new users.
hooks/
Contains custom hooks to encapsulate reusable logic and manage state or side effects.
Each hook should focus on a single piece of reusable logic, making it easy to import and use across components.
Example: hooks/useMediaQuery.js for mobile layout, hooks/useOnClickOutside.js for handling outside click while displating modal window or drawer.
pages/
This folder includes all the main pages of the application, each structured as a separate folder.
Each page folder can contain its main component and style file related to that page.
Example: pages/Home/, pages/Dashboard/, pages/Profile/.
services/
Contains modules for handling API requests and other external services, including working with tokens from local storage, setting interceptors, and handling error responses with various status codes.
Each service file can be organized by feature or module and should include functions for different API calls.
Example: services/axios.js for basic axips setup, setting interceptors and error handling, services/leadsService.js for leads-related API requests including statuses CRUD and data for dashboard widgets.
theming/
Stores all theme-related files, such as design variables like colors, borders, radiuses, shadows, spacing and many else design constants. Also it store styling configurations for buttons, inputs.
Stores default styles for Ant Design components as a config.
This helps maintain consistent styling across the app and allows for easy theme switching if required.
Example: theming/colors.js, theming/components.js.
utils/
Contains utility functions that are not specific to any component or page but provide common functionality throughout the app.
These may include functions for formatting, data manipulation, helpers or validation.
Example: utils/getDateRange for getting first and last dates of range, utils/getInputRules.js for getting validation rules for different field (rules consists of arrays of object with regex pattern and error messages) .
index.js
The main entry point of the application, where routes are defined and the app is rendered to the DOM.
All routes in the app are registered and protected with guards here, linking pages in the pages/ folder to specific paths.
App.js
This file provides global components and wrappers for the entire application, such as the Header, LeftMenu, and other shared UI elements.
It wraps the main content and provides layouts and navigation elements for a consistent user experience.
Also we wrap an our app with context providers in that file.
This backend is built with NestJS, a progressive Node.js framework ideal for building efficient, scalable server-side applications. The project leverages various technologies to enhance functionality, security, and maintainability:
AWS S3 Bucket: Used for storing multimedia files, specifically photos.
Faker.js: Generates realistic demo data for development and testing.
NestJS Passport: Provides authentication mechanisms, with JWT tokens for secure user authentication.
TypeORM: An ORM for database management and query building.
PostgreSQL: The primary database for storing and managing relational data.
Nest-Casl: Enables role-based access control (RBAC) with flexible permissions.
Guard usage is tailored to the requirements of each controller, with role-based guards being the most common. We use both team-level roles and application-level roles, defining permissions for app roles within each module, while team role permissions are centrally managed in api/src/team-membership.permissions.ts.
Each module follows a modular structure with its own controller, service, module files, and optionally its own entities, dtos, helpers, decorators, and strategy directories. This modularity ensures that each feature can function independently and be easily maintained.
In api folder you can see next architecture:
api/assets/
This folder is dedicated to multimedia assets, including any image, video, or audio files used by the application.
Stored assets may include logos, banners, and other media required by modules.
api/email-templates/
Stores all email templates for the application, such as welcome emails, password reset emails, or notification emails.
Templates can be in HTML format, making it easy to style and customize for different purposes.
Example: email-templates/invitation.html, email-templates/password-reset.html.
api/src/...modules/
Contains all the main modules of the application, such as businesses, leads, and teams.
Each module follows the NestJS modular pattern and typically includes the following files:
Controller: Defines the RESTful endpoints and request handling logic.
Service: Contains the business logic and database interactions.
Module: Registers the module, providers, and imports.
Optionally, entities, dtos, helpers, decorators, and strategy subdirectories can be created to structure code further.
api/src/db/
This folder handles all database-related files, divided into subdirectories:
migrations/: Stores all migration files that define schema changes.
seeds/: Contains seed files for populating the database with initial or demo data.
DataSource Options: Contains configuration files for connecting to both local and production databases, ensuring seamless environment transitions.
This folder enables efficient management of database schemas and data.
api/src/common/
A centralized directory for reusable resources shared across multiple modules. It includes:
constants/: Stores constants used throughout the application.
decorators/: Contains custom decorators, such as those for validation or metadata.
dtos/: Data Transfer Objects that define the structure of data sent over the network.
entities/: Database entities (models) that represent tables and their relationships.
factories/: Contains factories for creating entities or other complex objects.
guards/: Custom guards for handling authentication and authorization, including role-based access.
helpers/: Utility functions used by multiple parts of the application.
interfaces/: TypeScript interfaces for defining data structures and types.
services/: Shared services that provide functionality across modules.
custom validators/: Custom validation functions or classes for unique business rules.
server.js
Acts as the main entry point for the backend, initializing the NestJS application and configuring global middleware like cors and connecting sentry. Also in that file we have logic for running init seed on app first initialization.
This file structure promotes a modular, scalable backend that is easy to navigate and maintain. Each module encapsulates its own logic and dependencies, while shared resources are available through the common folder. All dependencies are handled through the architecture hierarchy; however, if you need to inject dependencies outside of this hierarchy, simply use forwardRef(() => NecessaryModule) in your module imports. Code Example:
