Гилевский Никита

https://gilevski-tla-dev.github.io/kode-intership-2025-react/

Декомпозиция задания

1. Построить структуру каталогов и грид приложения.

Структура проекта (предопалагаемая)

src/

• app/ - Инициализация приложения и глобальные настройки

  • providers/ - Провайдеры (Redux, Router)
    • StoreProvider.tsx
    • RouterProvider.tsx
  • styles/ - Глобальные стили
    • global.css
  • App.tsx - Корневой компонент приложения

• features/ - Фичи (функциональные модули)

  • profileList/ - Фича: Список профилей

    • ui/ - UI-компоненты

      • ProfileCard.tsx
      • SkeletonLoader.tsx

    • lib/ - Вспомогательные функции

      • fetchProfiles.ts

    • model/ - Логика фичи

    • index.ts - Экспорт фичи

  • profileDetail/ - Фича: Детальная информация о профиле

    • ui/ - UI-компоненты

      • ProfileDetailPage.tsx

    • lib/ - Вспомогательные функции

      • fetchProfile.ts

    • model/ - Логика фичи

    • index.ts - Экспорт фичи

  • filterModal/ - Фича: Модальное окно с фильтрацией

    • ui/ - UI-компоненты

      • FilterModal.tsx

    • lib/ - Вспомогательные функции

      • applyFilters.ts

    • model/ - Логика фичи

    • index.ts - Экспорт фичи

• pages/ - Страницы (роуты)

  • HomePage/ - Главная страница

    • ui/ - UI-компоненты
      • HomePage.tsx
    • index.ts - Экспорт страницы

  • ProfileDetailPage/ - Страница детальной информации о профиле

    • ui/ - UI-компоненты
      • ProfileDetailPage.tsx
    • index.ts - Экспорт страницы

• shared/ - Переиспользуемые модули

  • ui/ - Переиспользуемые UI-компоненты
  • lib/ - Переиспользуемые утилиты
    • formatDate.ts
    • validateInput.ts
  • config/ - Конфигурации
    • constants.ts
  • assets/ - Статические файлы (иконки, изображения)
    • icons/
    • logo.svg
  • api/ - Общие API-запросы
    • baseApi.ts

• widgets/ - Виджеты (независимые блоки UI)

  • TopBarWidget/ - Верхняя панель навигации

    • ui/
      • TopBarWidget.tsx
    • index.ts

  • ErrorBoundaryWidget/ - Обработка ошибок

    • ui/
      • ErrorBoundary.tsx
    • index.ts

---

2. Поделить приложение на компоненты, виджеты и сверстать их.

• Виджет Top App Bar
  Внутри которого будут компоненты:

  • Label
  • Search
  • Tabs

• Компонент списка
  В виде карточки с:

  • Аватаркой
  • Именем
  • Юзернеймом
  • Позицией
    Также добавить скелетон для загрузки.

• Компонент модального окна с фильтрацией

• Компонент ошибки поиска

• Компонент критической ошибки

---

3. Разделение приложения на роуты.

Путь	Описание
/home	Главная страница с Top App Bar и списком профилей
/profile/:username	Детальная страница профиля с биографией, статистикой и кнопкой "Назад"

4. Написать функции запросов и настроить кэширование полученных данных.

5. Подключить Redux для темы и локалей.