react clean architecture example

arch.txt

src/
│
├── app/                              # Presentation / Application entry point
│   ├── App.jsx
│   ├── main.jsx
│   ├── router/
│   │   └── index.jsx
│   ├── providers/
│   │   ├── AuthProvider.jsx
│   │   ├── QueryProvider.jsx
│   │   └── ThemeProvider.jsx
│   └── config/
│       └── constants.js
│
├── pages/                            # Сторінки / маршрути
│   ├── Home/
│   │   ├── HomePage.jsx
│   │   └── HomePage.module.css
│   ├── Artists/
│   │   ├── ArtistsPage.jsx
│   │   └── ArtistsPage.module.css
│   ├── ArtistDetails/
│   │   ├── ArtistDetailsPage.jsx
│   │   └── ArtistDetailsPage.module.css
│   └── NotFound/
│       └── NotFoundPage.jsx
│
├── features/                         # Користувацькі дії / use cases
│   ├── auth/
│   │   ├── login/
│   │   │   ├── LoginForm.jsx
│   │   │   ├── useLogin.js
│   │   │   └── validation.js
│   │   └── logout/
│   │       └── useLogout.js
│   │
│   ├── artist-search/
│   │   ├── ArtistSearch.jsx
│   │   ├── useArtistSearch.js
│   │   └── validation.js
│   │
│   └── artist-create/
│       ├── ArtistForm.jsx
│       ├── useCreateArtist.js
│       └── validation.js
│
├── entities/                         # Domain / бізнес-сутності
│   ├── artist/
│   │   ├── model/
│   │   │   ├── artist.js
│   │   │   └── artist.schema.js
│   │   ├── api/
│   │   │   └── artistApi.js
│   │   └── ui/
│   │       ├── ArtistCard.jsx
│   │       └── ArtistList.jsx
│   │
│   ├── album/
│   │   ├── model/
│   │   ├── api/
│   │   └── ui/
│   │
│   └── song/
│       ├── model/
│       ├── api/
│       └── ui/
│
├── widgets/                          # Великі перевикористовувані UI-блоки
│   ├── Header/
│   │   ├── Header.jsx
│   │   └── Header.module.css
│   ├── Sidebar/
│   │   ├── Sidebar.jsx
│   │   └── Sidebar.module.css
│   ├── ArtistTable/
│   │   ├── ArtistTable.jsx
│   │   └── ArtistTable.module.css
│   └── Player/
│       ├── Player.jsx
│       └── Player.module.css
│
├── shared/                           # Загальна інфраструктура UI
│   ├── ui/
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   ├── Spinner/
│   │   └── Pagination/
│   │
│   ├── api/
│   │   ├── client.js
│   │   └── interceptors.js
│   │
│   ├── hooks/
│   │   ├── useDebounce.js
│   │   └── usePagination.js
│   │
│   ├── lib/
│   │   ├── formatDate.js
│   │   └── formatDuration.js
│   │
│   ├── validation/
│   │   └── commonSchemas.js
│   │
│   ├── assets/
│   │   ├── images/
│   │   └── icons/
│   │
│   └── styles/
│       ├── globals.css
│       └── variables.css
│
└── tests/
    ├── unit/
    ├── integration/
    └── e2e/