Test assignment - React application with user authentication and user list display.
- ✅ Authentication via API (DummyJSON)
- ✅ Protected routes (access only after login)
- ✅ Display current user data
- ✅ Sortable table with all users
- ✅ Responsive design (mobile, tablet, desktop)
- ✅ Logout functionality
- React - UI library
- Redux Toolkit - state management
- React Router - page navigation
- Ant Design - UI components
- Axios - HTTP requests
- SASS - styling
- Vite - build tool
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/General-Kaolin/user-dashboard.git
cd user-dashboard- Install dependencies:
npm install- Run the project:
npm run dev- Open browser:
http://localhost:5173
- Username:
emilys - Password:
emilyspass
Or use any credentials from DummyJSON Users
src/
├── hooks/ # Custom hooks
│ ├── useAuth.js # Authentication hook
│ └── useFetchUsers.js # Users fetching hook
├── pages/ # Application pages
│ ├── Login.jsx # Login page
│ ├── Login.scss # Login page styles
│ ├── Dashboard.jsx # Main dashboard
│ └── Dashboard.scss # Dashboard styles
├── store.js # Redux store and slices
├── App.jsx # Main component with routing
└── main.jsx # Entry point
useAuth - authentication management:
- POST request to
/auth/login - Save user data to Redux
- Error handling
- Redirect to Dashboard after successful login
useFetchUsers - fetch users list:
- GET request to
/users - Data caching (doesn't reload)
- Loading and error state handling
{
userState: {
currentUser: { id, username, firstName, lastName, age, email, ... },
allUsers: [...]
}
}ProtectedRoute component checks for currentUser in Redux. If user is not authenticated - redirects to login page.
The application displays correctly on:
- 📱 Mobile devices (< 576px)
- 📱 Tablets (576px - 768px)
- 💻 Desktop (> 768px)
Project uses DummyJSON API:
POST https://dummyjson.com/auth/login- authenticationGET https://dummyjson.com/users- users list
Samuil Tartychnyi
- GitHub: @General-Kaolin
MIT License
Тестовое задание - React-приложение с авторизацией пользователя и отображением списка пользователей.
- ✅ Авторизация через API (DummyJSON)
- ✅ Защищённые маршруты (доступ только после логина)
- ✅ Отображение данных текущего пользователя
- ✅ Таблица всех пользователей с сортировкой
- ✅ Адаптивный дизайн (мобилки, планшеты, десктоп)
- ✅ Кнопка выхода из системы
- React - библиотека для создания UI
- Redux Toolkit - управление состоянием
- React Router - навигация между страницами
- Ant Design - UI компоненты
- Axios - HTTP запросы
- SASS - стилизация
- Vite - сборщик проекта
- Node.js (v16 или выше)
- npm или yarn
- Клонируй репозиторий:
git clone https://github.com/General-Kaolin/user-dashboard.git
cd user-dashboard- Установи зависимости:
npm install- Запусти проект:
npm run dev- Открой браузер:
http://localhost:5173
- Username:
emilys - Password:
emilyspass
Или используй любые данные из DummyJSON Users
src/
├── hooks/ # Кастомные хуки
│ ├── useAuth.js # Хук для авторизации
│ └── useFetchUsers.js # Хук для получения пользователей
├── pages/ # Страницы приложения
│ ├── Login.jsx # Страница входа
│ ├── Login.scss # Стили страницы входа
│ ├── Dashboard.jsx # Главная страница
│ └── Dashboard.scss # Стили Dashboard
├── store.js # Redux store и слайсы
├── App.jsx # Главный компонент с роутингом
└── main.jsx # Точка входа
useAuth - управление аутентификацией:
- Выполнение POST запроса на
/auth/login - Сохранение данных пользователя в Redux
- Обработка ошибок
- Редирект на Dashboard после успешного входа
useFetchUsers - получение списка пользователей:
- GET запрос на
/users - Кэширование данных (не загружает повторно)
- Обработка состояния загрузки и ошибок
{
userState: {
currentUser: { id, username, firstName, lastName, age, email, ... },
allUsers: [...]
}
}Компонент ProtectedRoute проверяет наличие currentUser в Redux. Если пользователь не авторизован - редирект на страницу входа.
Приложение корректно отображается на:
- 📱 Мобильных устройствах (< 576px)
- 📱 Планшетах (576px - 768px)
- 💻 Десктопах (> 768px)
Проект использует DummyJSON API:
POST https://dummyjson.com/auth/login- авторизацияGET https://dummyjson.com/users- список пользователей
Samuil Tartychnyi
- GitHub: @General-Kaolin
MIT License