Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/margo-yunanova/3205.team-fullstack-form
Fullstack приложение для поиска пользователей
https://github.com/margo-yunanova/3205.team-fullstack-form
celebrate express-js msw mui react react-hook-form react-imask storybook typescript yup
Last synced: 3 days ago
JSON representation
Fullstack приложение для поиска пользователей
- Host: GitHub
- URL: https://github.com/margo-yunanova/3205.team-fullstack-form
- Owner: margo-yunanova
- Created: 2024-07-06T15:37:20.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-07-09T20:23:31.000Z (3 months ago)
- Last Synced: 2024-09-20T13:51:40.241Z (7 days ago)
- Topics: celebrate, express-js, msw, mui, react, react-hook-form, react-imask, storybook, typescript, yup
- Language: TypeScript
- Homepage: https://userssearchform.netlify.app
- Size: 439 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fullstack приложение для поиска пользователей
Тестовое задание для 3205.team.
Бэкенд реализован тремя способами: express.js, Netlify serverless function и мок (mock service worker).
## Ссылка на деплой приложения
Приложение задеплоено c serverless функцией на https://userssearchform.netlify.app
## Сборка и запуск проекта
### Проверка компонентов в Storybook
```bash
cd frontend
npm install && npm run storybook
```
Откройте http://localhost:6006, чтобы посмотреть результат в браузере.
### Запуск в режиме разработки
#### 1 режим: запуск с nodejs express.js.
```bash
cd backend
npm install && npm run dev
```
```bash
cd frontend
npm install && npm run dev
```
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
#### 2 режим: запуск с netlify serverless функцией.
```bash
cd frontend
npm install netlify-cli -g
npm install && netlify dev
```
Откройте http://localhost:8888, чтобы посмотреть результат в браузере.
#### 3 режим: запуск с MockServerWorker:
```bash
cd frontend
npm install && npm run dev-msw
```
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
### Локальное тестирование продакшн сборки
```bash
cd backend
npm install && npm run build && npm run start
```
```bash
cd frontend
npm install && npm run build && npm run preview
```
Откройте http://localhost:4173, чтобы посмотреть результат в браузере.
## Стек технологий
Фронтенд написан на React + TypeScript со сборщиком Vite, бэкенд на Express.JS
|Пакеты|Назначение|
|:----|:----|
|[MUI](https://mui.com/)|Библиотека компонентов для создания интерфейсов|
|[Storybook](https://storybook.js.org/)|Библиотека для разработки, тестирования и документации компонентов UI.|
|[MSW](https://mswjs.io/)|Библиотека для имитации API, которая позволяет создавать мок, перехватывая запросы на сетевом уровне.|
|[React-hook-form](https://react-hook-form.com/)|Библиотека для работы с формами.|
|[React-imask](https://www.npmjs.com/package/react-imask)|Библиотека для преобразования отображаемых данных для форм.|
|[Yup](https://github.com/jquense/yup)|Библиотека для валидации данных.|
|[Celebrate](https://github.com/arb/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 | |