Architecture and Folder Structure

Learn how Lotru allows you to build a Next.js or Vite application with a scalable and production-grade architecture and folder structure.

Project Architecture

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

- actions
- app
  - (marketing)
  - auth
  - dashboard
- components
- contexts
- hooks
- lib
- styles
- types


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


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.


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 Joy UI.