Тестовое задание для 3205.team. Бэкенд реализован тремя способами: express.js, Netlify serverless function и мок (mock service worker).
Приложение задеплоено c serverless функцией на https://userssearchform.netlify.app
cd frontend
npm install && npm run storybook
Откройте http://localhost:6006, чтобы посмотреть результат в браузере.
cd backend
npm install && npm run dev
cd frontend
npm install && npm run dev
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
cd frontend
npm install netlify-cli -g
npm install && netlify dev
Откройте http://localhost:8888, чтобы посмотреть результат в браузере.
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 | Библиотека для валидации данных на бэкенде. |
Напишите приложение с одной страницей, на котором находится форма с двумя полями:
При нажатии на submit запрос уходит на бек, где нужно в JSON найти подходящих под поисковый запрос пользователей и отобразить найденные данные на клиенте под формой.
Название | Автор | Ссылка | Лицензия |
---|---|---|---|
Дизайн Формы | Salman | https://www.figma.com/community/file/947086999959721894 |