Это SPA-маркетплейс для благотворительных сборов, созданный в рамках хакатона. Приложение позволяет пользователям просматривать запросы о помощи от различных фондов, откладывать интересующие их запросы в "Избранное" и участвовать в благотворительности. Деплой
- Просмотр благотворительных запросов: Пользователи могут просматривать все доступные запросы в формате списка или сетки.
- Фильтрация и поиск: В блоке "Найдено" отображается количество запросов, соответствующих выбранным фильтрам и поисковому запросу.
- Аутентификация: Доступ к приложению возможен только для трех заранее определенных пользователей.
- Личный профиль: Пользователи могут просматривать свои личные данные и избранные запросы.
- Управление сессией: Возможность выхода из аккаунта в любой момент, что аннулирует текущую сессию и перенаправляет на страницу Входа.
- TypeScript: Статическая типизация для повышения надежности кода.
- React: Библиотека для построения пользовательского интерфейса.
- MUI (Material-UI): Компонентная библиотека для быстрого создания интерфейсов с использованием Material Design.
- Redux Toolkit: Набор инструментов для управления состоянием приложения и упрощения работы с Redux.
- React Toastify: Библиотека для удобного отображения уведомлений и всплывающих сообщений.
- Клонируйте репозиторий:
git clone https://github.com/heyhurricane/react-event.git
- Перейдите в папку проекта:
cd react-event - Установите зависимости:
npm install
- Запустите проект:
npm pun dev
- Пользователь может войти только с учетными данными одного из трех предопределенных пользователей.
- При неверно указанной паре логин пароль выводится сообщение "Неправильный логин пароль! Попробуйте еще раз"
- При получении ошибки от сервера, выводится сообщение "Ошибка на сервере! Попробуйте позже"
- Успешная аутентификация перенаправляет пользователя на страницу со списком запросов.
- Авторизированный пользователь не может попасть на страницу логина пока сам не разлогинится.
- Если у пользователя просрочился jwt токен, редиректим его на страницу логина.
- Валидация полей логина как имейла и пароля не меньше 6 символов.
- Загрузка запросов: Когда вы открываете страницу, все запросы автоматически загружаются с сервера.
- Режимы отображения: Вы можете просматривать запросы в различных форматах: списком, в виде сетки или на карте.
- Количество запросов: В верхней части страницы всегда отображается количество найденных запросов, с учётом ваших фильтров и поисковых настроек.
- Пагинация: Для удобства запросы можно просматривать постранично в режимах Списка и Сетки.
- Вы можете использовать как прокрутку, так и пагинацию. При выборе номера страницы на панели пагинации список прокручивается к первому элементу выбранной страницы. Прокрутка также поддерживает свайп на мобильных устройствах.
- Управление фильтрами: По умолчанию все фильтры выключены, и запросы показываются без каких-либо ограничений.
- Применение фильтров: Чтобы активировать фильтр, просто нажмите на соответствующий чекбокс или текст рядом с ним.
- Сброс фильтров: Если вы передумаете и хотите отменить выбранный фильтр, просто нажмите на чекбокс снова — фильтр будет сброшен.
- Немедленное применение: Изменения фильтров применяются сразу, без необходимости обновлять страницу.
- Пустой список: Если после применения фильтров запросов не останется, вы увидите сообщение о пустом списке.
- Кнопка "Сбросить": Если вы не выбрали фильтры, кнопка "Сбросить" будет отключена. Если же фильтры активированы, нажав её, вы сбросите все настройки фильтров, и изменения сразу отразятся на списке запросов.
- Строка поиска: Когда вы открываете страницу, строка поиска пуста, и в ней отображается подсказка (плейсхолдер), чтобы помочь вам понять, что искать.
- Как работает поиск: Когда вы начинаете вводить текст, система будет автоматически фильтровать список запросов, показывая только те, где название запроса или организации содержит введённые вами слова.
- Оптимизация поиска: Для улучшения скорости поиска используется техника "debounce", которая предотвращает слишком частые запросы при быстром наборе текста.
- Фильтры остаются: Все другие фильтры, которые вы применили ранее, сохраняются и не сбрасываются при поиске.
- Пагинация: Отфильтрованный по поиску список запросов продолжает пагинироваться так же, как и в разделе "Список Запросов", чтобы удобно просматривать результаты.
- Профиль содержит разделы "Личные данные" и "Контакты", данные для которых загружаются через API.
- Раздел "Избранное" показывает запросы, добавленные пользователем, аналогично отображению на странице списка запросов.
- В меню доступно два действия: "Мой профиль" и "Выйти".
- Нажатие на "Выйти" аннулирует сессию и возвращает пользователя на страницу Входа.
- Нажатие на "Мой профиль" переадресует пользователя на страницу профиля.
- Если API вызовы для загрузки данных или избранного завершатся с ошибкой, пользователю отображаются соответствующие сообщения об ошибках.