Fullstack приложение для поиска пользователей

Тестовое задание для 3205.team. Бэкенд реализован тремя способами: express.js, Netlify serverless function и мок (mock service worker).

Ссылка на деплой приложения

Приложение задеплоено c serverless функцией на https://userssearchform.netlify.app

Сборка и запуск проекта

Проверка компонентов в Storybook

cd frontend
npm install && npm run storybook

Откройте http://localhost:6006, чтобы посмотреть результат в браузере.

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

1 режим: запуск с nodejs express.js.

cd backend
npm install && npm run dev

cd frontend
npm install && npm run dev

Откройте http://localhost:5173, чтобы посмотреть результат в браузере.

2 режим: запуск с netlify serverless функцией.

cd frontend
npm install netlify-cli -g
npm install && netlify dev

Откройте http://localhost:8888, чтобы посмотреть результат в браузере.

3 режим: запуск с MockServerWorker:

cd frontend
npm install && npm run dev-msw

Откройте http://localhost:5173, чтобы посмотреть результат в браузере.

Локальное тестирование продакшн сборки

cd backend
npm install && npm run build && npm run start

cd frontend
npm install && npm run build && npm run preview

Откройте http://localhost:4173, чтобы посмотреть результат в браузере.

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

Фронтенд написан на React + TypeScript со сборщиком Vite, бэкенд на Express.JS

Пакеты	Назначение
MUI	Библиотека компонентов для создания интерфейсов
Storybook	Библиотека для разработки, тестирования и документации компонентов UI.
MSW	Библиотека для имитации API, которая позволяет создавать мок, перехватывая запросы на сетевом уровне.
React-hook-form	Библиотека для работы с формами.
React-imask	Библиотека для преобразования отображаемых данных для форм.
Yup	Библиотека для валидации данных.
Celebrate	Библиотека для валидации данных на бэкенде.

Техническое задание

Описание задачи

Напишите приложение с одной страницей, на котором находится форма с двумя полями:

• email (обязательное)
• number (опциональное)
• Кнопка submit

При нажатии на submit запрос уходит на бек, где нужно в JSON найти подходящих под поисковый запрос пользователей и отобразить найденные данные на клиенте под формой.

Условия

• Нужно на беке добавить задержку обработки запроса в 5 секунд (имитация долгой обработки ответа). При повторном запросе с фронта отменять прошлый запрос.
• Обязательная валидация полей email и number. Валидацию можно сделать либо на фронте, либо на беке. Будьте готовы объяснить выбранный подход.
• На фронте на поле number нужно добавить маску, чтобы номер отображался с дефисами каждые два знака. Например, 22-11-22, 83-03-47.

Технические требования

• Фронт: React или Vue (типизация на выбор)
• Бек: Node.js (типизация обязательна)
• Библиотеки на ваше усмотрение
• Деплой не обязателен, подойдёт и README с инструкцией

License

Название	Автор	Ссылка	Лицензия
Дизайн Формы	Salman	https://www.figma.com/community/file/947086999959721894