architecture.md

Architecture of the project

Table of Contents

• Architecture of the project
  • Introduction
  • Folder structure
  • Pages

Introduction

As far as this boilerplate uses Next.js framework for building React applications, the folders are used as routes. This means the more folders you add to your app folder, the more routes you will get. Additionally, if you create a new folder inside of another folder, you will get nested routes. To better understand these concepts, we suggest looking at the image below.

Folder structure

.
├── playwright-tests <-- Here are your E2E tests
├── public
└── src
    ├── app
    │   └── [language] <-- Here are your pages (routes)
    │       ├── admin-panel
    │       ├── confirm-email
    │       ├── forgot-password
    │       ├── password-change
    │       ├── profile
    │       ├── sign-in
    │       └── sign-up
    ├── components <-- Here are your common components (Forms, Tables, etc.)
    │   ├── confirm-dialog
    │   ├── form
    │   └── table
    └── services <-- Here are your services (Auth, API calls, I18N, etc.)
        ├── api
        ├── auth
        ├── helpers
        ├── i18n
        │   └── locales
        ├── leave-page
        ├── react-query
        └── social-auth
            ├── facebook
            └── google

Pages

Pages are located in the src/app/[language] folder. We use [language] directory to support internationalization with ability generate static website (output: export). Example here.

---

Previous: Installing and Running

Next: Auth