https://github.com/leroyalle/table-todo-test-task
React table with infinite scroll displaying users and todos.
https://github.com/leroyalle/table-todo-test-task
docker docker-compose jest react tanstack-query
Last synced: 3 months ago
JSON representation
React table with infinite scroll displaying users and todos.
- Host: GitHub
- URL: https://github.com/leroyalle/table-todo-test-task
- Owner: Leroyalle
- Created: 2025-02-21T12:28:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T01:51:43.000Z (over 1 year ago)
- Last Synced: 2025-03-07T12:19:02.725Z (over 1 year ago)
- Topics: docker, docker-compose, jest, react, tanstack-query
- Language: TypeScript
- Homepage:
- Size: 139 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Таблица пользователей с ToDo задачами
Веб-приложение для отображения пользователей и их todo-задач в табличном формате с бесконечной прокруткой.
## Стек технологий
- **TypeScript**
- **React**
- **TanStack Query (React Query)**
- **Tailwind CSS**
- **Jest**
## Функциональные возможности
1. **Отображение списка пользователей:**
- Показывает информацию о пользователях (имя, email, количество задач)
- Адаптивная табличная верстка
- Заглушка аватара для каждого пользователя
2. **Интеграция с ToDo:**
- Отображение количества todo-задач для каждого пользователя
- Получение задач через JSONPlaceholder API
- Связывание задач с соответствующими пользователями
3. **Бесконечная прокрутка:**
- Загрузка пользователей группами по 10
- Автоматическая подгрузка при прокрутке
- Индикатор загрузки данных
## Структура проекта
```
src/
├── components/ # React компоненты
├── hooks/ # Пользовательские хуки
├── lib/ # Вспомогательные функции
├── services/ # Сервисы для работы с API
├── types/ # TypeScript типы
└── pages/ # Компоненты страниц
```
## Тестирование
Проект использует Jest для модульного тестирования. Тесты охватывают:
- Вызовы сервиса API к JSONPlaceholder
- Обработку ответов
- Сценарии с ошибками
Для запуска тестов:
```bash
npm test
```
## Запуск приложения
### Требования:
- Node.js 20+
- Предустановленный и открытый Docker (опционально)
### Локальная разработка:
1. Клонируйте репозиторий
2. Создайте файл [`.env`](.env) из шаблона:
```bash
cp .env.example .env
```
3. Установите зависимости:
```bash
npm install
```
4. Запустите сервер разработки:
```bash
npm run dev
```
### Запуск через Docker:
1. Соберите и запустите через Docker Compose:
```bash
docker compose up --build
```
Приложение будет доступно по адресу `http://localhost:8080`
## Интеграция с API
Приложение использует [JSONPlaceholder](https://jsonplaceholder.typicode.com) для получения:
- Данных пользователей
- Todo-задач
Конечные точки API настраиваются через переменные окружения.