Folder Structure

In order to minimize potential conflicts, we equipped with a specific app structure:

- app
    - (api)
    - (auth)
    - (dashboard)
        - (general)
            - customer
            - product
            - jobs
        - (main)
            - dashboard
            - smart-home
        ...
    - (home)
- components
- config
- hooks
- lib
- stores
- styles
- types

Routes

The template splits the routes into three main separate layouts:

• (api) the group of API routes.

• (auth) the authentication routes.

• (dashboard) the routes accessible only to authenticated users.

  • (general) the general routes of a navigation.
  • (main) the main routes of a navigation.

• (home) the home routes.

Shared Components

The reusable application components are placed in components/ui.

Domain Components

Domain components are co-located together with the pages, but grouped into different folders. This means that you can easily find the components that are used in a particular route segment.

For example, you find the customer pages components at ../(general)/customer/components/.

In some pages there are primitive states for management state.

For example, ../use-customer.ts

Config

The configuration files are stored in the config folder.

Hooks

The hooks folder contains all the reusable hooks.

Lib

The lib folder contains all the utility functions that are used across the application.

Stores

The stores folder contains all the global stores that are used across the application.

Styles

The styles folder contains all the global styles that are used across the application.

Types

The types folder contains all the global types that are used across the application.