• Как запустить
• Реализация
  • Основная структура проекта
• Задание

1. Склонируйте репозиторий на свой ПК командой git clone https://github.com/def1s/vk-test-communities.git
2. Перейдите в корневой каталог проекта
3. Установите все зависимости из package.json npm install
4. Запустите приложение с помощью npm start (браузер откроется автоматически)
5. Если браузер не открылся, то перейдите по адресу http://localhost:3000/

• Для проекта я использовал React + TypeScript
• В качестве архитектуры выбрал Feature-sliced design:
  • FSD позволяет легко масшабировать проект, а также удобно работать с разделением ответственности
  • Нетрудно разобраться с архитектурой не знакомому с проектом разработчику
• Для управления состоянием использовал Redux toolkit
• Для сборки настроил webpack с нуля, добавив необходимые плагины и лоадеры:
  • Dev server
  • CSS Modules
  • File loader, svg loader
  • Конфигурация проекта декомпозирована на несколько файлов в папке config

.
├── README.md
├── package.json
├── config
│   └── ... <- Настройки для webpack
├── src  
│   ├── app  
│   │   └── ... <- Провайдеры, базовые стили и App.tsx
│   ├── pages  
│   │   └── MainPage
│   │       └── ... <- Единственная страница
│   ├── widgets  
│   │   └── GroupList   
│   │       └── ... <- Виджет списка групп
│   │
│   ├── features  
│   │   └── Filters  
│   │       ├── model
│   │       │   ├── selectors
│   │       │   │   ├── getFilteredGroups.ts <- Селектор для получения отфильтрованных групп
│   │       │   │   └── getCurrentFilters.ts <- Получение текущих фильтров для отображения активных
│   │       │   ├── slice 
│   │       │   │   └── filtersSlice.ts <- Слайс для фильтров (хранит все фильтры и выбранные в текущий момент)
│   │      ... ... <- Остальные файлы фильтров
│   │   
│   ├── entities  
│   │   └── GroupCard
│   │       ├── model
│   │       │   ├── selectors
│   │       │   │   └── getGroups.ts <- Селектор для получения списка групп
│   │       │   ├── slice 
│   │       │   │   └── groupsSlice.ts <- Слайс для групп (хранит список всех групп)
│   │      ... ... <- Остальные файлы групп
│   │
│   └── shared
│       ├── api
│       │   └── ... <- Моковые данные и функция, имитирующая fetch с бекенда
│      ... <- Ассеты, переиспользуемые ui компоненты и функции
│
└── webpack.config.js <- Конфигурация webpack

Создайте простое react приложение, состоящее из одной страницы, которое при открытии будет запрашивать список групп с backend (замокайте ответ метода данными из файла groups.json).

Типизация ответа метода получения групп GetGroupsResponse:

interface GetGroupsResponse {
  result: 1 | 0,
  data?: Group[]
}

interface Group {
  "id": number,
  "name": string,
  "closed": boolean,
  "avatar_color"?: string,
  "members_count": number,
  "friends"?: User[]
}

interface User {
  "first_name": string,
  "last_name": string
}

• Группа может быть закрытой или открытой.
• Группа может иметь аватарку в виде круга диаметром 100px с заливкой цветом, указанным в атрибуте avatar_color.
• Группа может содержать список ваших друзей, состоящих в ней.

После получения списка всех групп отобразите список на странице в произвольном виде. Отобразите в интерфейсе имя группы, аватарку, тип приватности (закрытая / открытая), кол-во подписчиков и кол-во друзей. При клике на кол-во друзей в блоке группы должен появиться блок с именем и фамилией каждого из друзей.

Если данных для отображения какого-то поля нет, его рисовать не нужно.

Над списком групп должен быть набор фильтров, позволяющий выбрать только нужные нам группы.

Мы должны иметь возможность отфильтровать группы по типу приватности (все / закрытая / открытая), по цвету аватарки (любой / все возможные значения из атрибута avatar_color), наличию друзей в группе

Инструмент и метод хранения данных на ваше усмотрение. Никаких ограничений на использование сторонних библиотек. Вы так же можете воспользоваться любым готовым ui китом, в частности библиотекой компонентов ВКонтакте (для удобства обратите внимание на компонент SimpleCell)

Результатом тестового задания будет являться проект, доступный по ссылке для проверки. CSS оцениваться не будет, можно не обращать внимание на визуальную составляющую.