Skip to content

gilevski-tla-dev/kode-intership-2025-react

Repository files navigation

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

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 для темы и локалей.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors