https://github.com/margo-yunanova/groupviewer
Приложение для просмотра групп для ВК
https://github.com/margo-yunanova/groupviewer
rtk-query typescript vk-mini-apps vkui
Last synced: 7 months ago
JSON representation
Приложение для просмотра групп для ВК
- Host: GitHub
- URL: https://github.com/margo-yunanova/groupviewer
- Owner: margo-yunanova
- Created: 2024-03-06T19:48:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-12T13:59:38.000Z (over 1 year ago)
- Last Synced: 2025-01-21T08:32:08.863Z (9 months ago)
- Topics: rtk-query, typescript, vk-mini-apps, vkui
- Language: TypeScript
- Homepage: https://margo-yunanova.github.io/groupViewer/
- Size: 256 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Приложение для просмотра групп ВК
Данное приложение разработано в рамках выполнения профильного задания - Frontend-разработчик в команду сообществ
Ссылка на деплой приложения - https://margo-yunanova.github.io/groupViewer
## 🚀 Запуск приложения
```sh
yarn start
```
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
## 🗂️ Используемые библиотеки
| Пакет | Назначение |
| ------ | ------ |
| [VKUI](https://vkcom.github.io/VKUI/) | Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте. |
| [RTK Query](https://redux-toolkit.js.org/) | Фреймворк для получения данных. |
## 📜 Задание
Создайте простое react приложение, состоящее из одной страницы, которое при открытии будет запрашивать список групп с backend (замокайте ответ метода данными из файла `groups.json`).
Типизация ответа метода получения групп `GetGroupsResponse`:
```tsx
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), наличию друзей в группе
##### Учтите, что backend обрабатывает все запросы с задержкой в 1 секунду. Реализуйте эту задержку самостоятельно.
##### Метод так же может упасть в ошибку или вернуть `result: 0` или не вернуть поле `data`, что равносильно ошибке. Просто учтите это в коде.
Инструмент и метод хранения данных на ваше усмотрение. Никаких ограничений на использование сторонних библиотек.
Вы так же можете воспользоваться любым готовым ui китом, в частности [библиотекой компонентов ВКонтакте](https://www.npmjs.com/package/@vkontakte/vkui) (для удобства обратите внимание на компонент [SimpleCell](https://vkcom.github.io/VKUI/6.0.1/#/SimpleCell))
Результатом тестового задания будет являться проект, доступный по ссылке для проверки.
CSS оцениваться не будет, можно не обращать внимание на визуальную составляющую.