RepoSearcher 🔎

Описание 💡

Сервис поиска репозиториев на базе GitHub Rest API

Технологический стек ⚙️

• Main stack: Vite + React + TS
• State manager: MobX
• React UI Component Library: Material UI
• Testing: Jest + React Testing Library

Реализованные фичи ✨

• Поиск репозиториев с плавной прогрузкой данных
• Сортировка по трём критериям в определенном порядке
• Локальное редактирование и удаление полученных от API данных
• Тестирование unit-тестами

Возможные улучшения 🧠

• Темы (тёмная/светлая)
• Расширение параметров для поиска (подробнее здесь)
• Добавить OAuth для увеличения количества запросов

Техническое задание ✅

Необходимо получить с сервера и отобразить список элементов. Список должен поддерживать бесконечный плавный скролл, постепенную подгрузку элементов, локальное удаление и редактирование.

Требования 🎯

• Обязательно использование: TS, React/MobX, CSS-модули, Webpack/Vite, Jest, React Testing Library;

• API: Для получения списка нужно использовать публичный API какого-либо сервиса: github api, npmjs api, imdb api и др. Важно, чтобы список данных был очень большим с возможностью пагинации. Например:

  $ curl "https://api.github.com/search/repositories?q=javascript&sort=stars&order=asc&page=2"
  

• Аутентификация: Добавить аутентификацию, если требует API;

• Работа с API: Работать с API можно через библиотеку, либо делать запросы напрямую;

• Механика отображения: Механику отображения и работу со списком необходимо написать самостоятельно. Нельзя использовать готовую библиотеку;

• Локальное редактирование: Нужна возможность редактировать и удалять элементы из списка локально (работа со стором);

• Дизайн: Требований к дизайну нет. Для отображения списка необходимо использовать любой UI Kit/Framework, например Ant Design. Обосновать свой выбор.

• Тестирование: Функциональность покрыть unit-тестами на Jest + React Testing Library.

Желательно 😎

• Сортировка: Поддержать сортировку списка по разным полям, если поддерживает API;
• Индикация загрузки: Добавить индикацию подгрузки данных.

Вывод 🤔

В результате проделанной работы мне удалось:

• Выстроить гармоничный технологический стек
• Реализовать все запланированные основные фичи
• Сделать целостный pet-проект

Примечание

В качестве UI библиотеки мной был выбран Material UI, так как ранее с ним не работал и хотелось пощупать что-то новое. Кроме того, он является крайне популярным и хорошо поддерживаемым решением.