Архитектура (структура) папки frontend

Визуальное представление:

frontend архитектура

Текстовое представление:

frontend - в корневой папке frontend помимо подпапок src и public также могут храниться config-файлы:

• Dockerfile

• tsconfig.json

• .env.example

• README.md

• .gitignore

• .dockerignore

• package.json

*если проект запускается из докера, в таком случае .env файл может быть один - в корне проекта, в соответствии с установленной архитектурой проекта; если проект запущен локально, не из докера, в таком случае .env может храниться на уровне папки frontend, в этом случае необходимо не забывать обновлять .env файл в корне проекта на уровне папок frontend и backend во избежание непредвиденных ошибок.

public - папка для хранения статики (изображения, свг, шрифты):

• img

• svg

• fonts

src

app - роутинг страницы и сами компоненты страниц лежат тут. Если какой-либо 
компонент планируется использовать на других страницах - переносим его в папку 
widgets/[имя виджета с маленькой буквы]/index.tsx и отделяем его логику от 
страницы, использование его должно быть простым или хотя бы объяснено.

    contacts

        components - уникальные компоненты, scss файлы, файлы со статикой, 
        принадлежащие только этой странице

        page.tsx

    [id]
        components

        page.tsx

consts -  здесь могут лежать разнообразные часто используемые константы

hooks - вспомогательные хуки

scss - часто используемые файлы стилей

helpers - вспомогательные функции

api - папка для хранения всех запросов к серверу, отсюда экспортируются запросы 
в то место, где необходимо использовать запрос

store - глобальное хранилище веб-приложения, логика Zustand лежит здесь

types - папка для **часто** используемых типов / интерфейсов / енамов в проекте

    interfaces

        index.ts - интерфейсы

    types

        index.ts - типы

    enums

        index.ts - енамы

components - здесь хранятся переиспользуемые компоненты

    providers - компоненты, которые не имеют никакого визуала, но выполняют 
    какую-то логику. Например редирект пользователя со страницы, если он отсутствует.

    ui - ui компоненты, Button, Input, etc.

    smart - компоненты, которые имеют большое количество логики

    ordinary - простые функциональные блоки

    layouts - оболочки для страниц, например Navbar и Footer

    widgets - самостоятельные блоки страниц

*папка components может использоваться персонально для страницы, в таком случае там лежат уникальные компоненты, которые не будут переиспользоваться на других страницах. Также папка может существовать по пути src/components - в такой папке уже будут храниться переиспользуемые компоненты