Architecture and Folder Structure

Project Architecture

In order to minimize potential conflicts, Devias Kit Pro comes equipped with a specific app structure:

- actions
- app
  - (marketing)
  - auth
  - dashboard
    - analytics
    - orders
    - products
  ...
- components
- contexts
- hooks
- lib
- styles
- types

Actions

This layer consists of React Server Actions that can be used across your application.

Routes

The template splits the routes into three main separate layouts:

• (marketing): the routes that are accessible to everyone, even if they are not logged in
• auth: the auth routes, only accessible to unauthenticated users
• dashboard: routes that are dashboard-specific, accessible only to authenticated users

Shared Components

The reusable application components are placed in components/core. These are not context aware components and can be used to create other application parts.

Domain Components

Domain components are co-located together with the core components, 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 authentication components at components/auth.

Contexts, Hooks and Lib

These layers consists of application parts that are shared and reusable.

Styles

This layer contains the global styles, including 3rd-party library styles, that are loaded when the application starts and the theme setup that will be used by Material UI.