Проект в рамках хакатона Карьерного трекера Яндекс.Практикума: Реализация функциональности для личного кабинета компании-партнера

Ссылка на макет

Макет в Figma

Ссылка на репозиторий

Команда Пятница 13

Ссылка на Vercel

https://hakaton-tracker-team-13.vercel.app/applicants

Сведения о команде и роль каждого участника команды

Роль каждого участника команды фронтов распределялась так:

• Эвелина (Github):

  создание репо и установка зависимостей; выполнение самых сложных задач; реализация функционала поиска и фильтрации кандидатов; верстка сложных компонентов; использование и стилизация MUI-компонентов; валидация форм; страница логина полностью; подключение репо к Vercel; код-ревью других участников.

• Владимир (Github):

  верстка отдельных компонентов; использование и стилизация MUI-компонентов; генерация БД для бэка.

• Анна (Github):

  коммуникация с бэками и дизайнерами; определение приоритетности задач; распределение на доске github задач по силам каждому из участников; создание моделей сущностей, приходящих с бэка; сборка страниц из компонентов, сделанных Вовой; работа с задачами средней сложности и тех, которые нерационально давать другим участникам.

Инструкция по установке

1. Перейдите в каталог проекта в командной строке (терминале) и убедитесь, что у вас установлен Node.js и npm. Затем выполните команду для установки зависимостей проекта:

npm install

2. Запустите проект:

npm run start

3. Сборка для продакшена:

npm run build

Стек технологий

• Typescript
• React
• React Router
• Redux Toolkit
• Material UI

Реализованная функциональность

В проекте использовались следующие технологии: TypeScript, React, Redux toolkit, а также библиотека MUI. В процессе работы мы также пользовались канбан-доской Github, чтобы распределять задачи и видеть, что уже сделано, а что сделать еще предстоит. Ближе к дедлайну задачи стали распределять еще и по приоритизации.

Страница кандидатов:

/applicants

• Подгрузка массива кандидатов с сервера
• Кнопка для добавления/удаления кандидата в/из вакансии
• Поиск по ключевому слову
• Фильтрация кандидатов по query-параметрам
• Модальное окно с полной информацией о кандидате при клике на его карточку
• Шкала активности в карточке кандидата рассчитывается индивидуально для каждого кандидата исходя из процентного соотношения 3-х параметров активности. При наведении на каждый ее элемент появляется тултип с названием параметра.
• Значки слева от имени кандидата отображаются в зависимости от данных, приходящих с бэка.

Страница вакансий:

/vacancies

• Подгрузка с сервера активных вакансий, опубликованных компанией
• Кнопка добавления вакансии
• Кнопка редактирования вакансии
• Кнопка уведомлений (колокольчик), при открытии - модальное окно
• При нажатии на карточку вакансии открывается страница с инфо вакансии, также при переключении таба появляется таблица пользователей, добавленных в вакансию на странице кандидата/откликнувшихся на нее из своего личного кабинета
• При выборе другого статуса кандидата в таблице - он обновляется отдельным запросом на сервер
• Фильтрация кандидатов в вакансии по query-параметрам
• Поиск по ключевому слову
• Если отмечены 2 чекбокса, появляется кнопка "сравнить кандидатов", при нажатии на которую можно сравнить информацию об обоих

Страница логина:

/login

• Полностью реализована, осталось прикрутить апи.
• Страница восстановления пароля
• При успешном восстановлении - сообщение об успешной отправке письма на почту

На страницы, которые не успели реализовать, поставлена заглушка "страница в разработке"