Система управления недвижимостью

Тестовое задание для Frontend-разработчика с реализацией аутентификации, авторизации и RBAC (Role-Based Access Control).

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

• React 18+ - функциональные компоненты и хуки
• React Router v6 - клиентская маршрутизация
• TypeScript - строгая типизация
• Styled Components - CSS-in-JS стилизация
• Vite - быстрая сборка и dev-сервер
• Context API - управление состоянием аутентификации
• JWT - токены для аутентификации

Реализованные роли

Система поддерживает 4 роли пользователей с различными правами доступа:

1. Администратор компании (company_admin)

   • Полный доступ к управлению объектами, пользователями, финансами
   • Просмотр статистики и аналитики
   • Управление всеми разделами системы

2. Менеджер по аренде (manager)

   • Работа с клиентами и объектами
   • Управление заявками и просмотрами
   • Список задач и планирование

3. Клиент (client)

   • Личный кабинет с информацией об аренде
   • Просмотр и оплата счетов
   • Доступ к документам

4. Служба поддержки (support)

   • Обработка запросов и тикетов
   • Работа с обращениями пользователей
   • База знаний

Основной функционал

Аутентификация

• Форма входа с валидацией email и пароля
• Моковый API для имитации backend
• JWT токены с сохранением в localStorage
• Автоматическая проверка валидности токена
• Кнопка выхода с очисткой данных

Защищённые маршруты

• React Router v6 с защитой маршрутов
• Автоматический редирект на страницу входа
• Роутинг на основе ролей (RBAC)
• Проверка прав доступа для каждой страницы

Пользовательский интерфейс

• Адаптивный дизайн (mobile-first)
• Уникальные дашборды для каждой роли
• Навигационное меню с фильтрацией по ролям
• Header с информацией о пользователе
• Красивые компоненты на Styled Components

Установка и запуск

Требования

• Node.js 18+
• npm или yarn

Установка зависимостей

npm install

или

yarn install

Запуск в режиме разработки

npm start

или

yarn start

Приложение будет доступно по адресу http://localhost:5173

Тестовые учетные данные

Для входа в систему используйте следующие учетные данные:

Администратор

• Email: admin@test.com
• Пароль: admin123
• Роль: Администратор компании

Менеджер

• Email: manager@test.com
• Пароль: manager123
• Роль: Менеджер по аренде

Клиент

• Email: client@test.com
• Пароль: client123
• Роль: Клиент

Поддержка

• Email: support@test.com
• Пароль: support123
• Роль: Служба поддержки

Архитектурные решения

1. Context API для управления состоянием

Использован Context API вместо Redux для упрощения архитектуры. AuthContext предоставляет:

• Состояние пользователя и токена
• Методы login/logout
• Флаги isAuthenticated и isLoading

2. Защищённые маршруты

Компонент ProtectedRoute оборачивает защищённые страницы и:

• Проверяет аутентификацию пользователя
• Редиректит на /login если не авторизован (используя Navigate из react-router)
• Проверяет права доступа по ролям
• Показывает loader во время проверки

3. React Router v6

Маршрутизация настроена в App.tsx:

• BrowserRouter для клиентской навигации
• Routes и Route для определения маршрутов
• Navigate для программных редиректов
• NavLink для активной навигации с подсветкой

4. Моковый API

Файл mockApi.ts имитирует backend:

• Генерирует JWT токены
• Проверяет учетные данные
• Имитирует задержку сети
• Возвращает данные пользователя

5. Styled Components

Все стили написаны с использованием Styled Components:

• Изолированные стили компонентов
• Динамические стили на основе props
• Поддержка тем и переменных
• TypeScript типизация

6. Роль-ориентированный UI

Каждая роль имеет:

• Уникальный дашборд с релевантной информацией
• Свой набор пунктов меню
• Специфичные права доступа к страницам
• Цветовую схему и иконку

Особенности реализации

• Валидация форм - проверка email и пароля на клиенте
• Обработка ошибок - отображение ошибок входа
• Адаптивность - mobile-first подход
• Типизация - полная типизация TypeScript
• Модульность - разделение на переиспользуемые компоненты