У меня было интервью с Travclan И для технического раунда мне пришлось представить решение для этого вызова фронта.
# Front-end Test Task
## Task
Develop a Single page application with following mentioned features
but not necessarily limited to it.
#Must:
1. Display a list of customers (with pagination).
2. Each customer bas several bids, by default only the maximum bid
should be displayed. Also add a toggle button so that on switching
toggle only the minimum bid is displayed.
3. Enable sorting of customer list by bid amount.
4. Front-end part should be developed as SPA with ES6, React(Hooks).
#Good to have:
1. Using Context Api or Custom Hooks will be a big plus.
2. Clicking on any row should redirect to a separate url where all the
selected customer's bids should be displayed. (use your creativity on
how to display the data).
3. Styling is not a priority but using Material Ui(https://material-
ui.com) entirely will be a plus.
Use following API to retrieve the data - `https://intense-tor-
76305.herokuapp.com/merchants`
## Data structure example
Customer {
id: string,
firstname: string,
lastname: string,
avatarUrl: string,
email: string,
phone: string,
hasPremium: boolean,
bids: Array
}
Bid {
id: string,
carTitle: string,
amount: number,
created: string
}
## Table expected
__________________________________________________________________
| Customer name (with avtar) | Email | Phone | Premium | Max/Min bid |
__________________________________________________________________
Мое решение: –
- Live – Дисковая панель автомобилей [NetLify]
- GitHub – Список участников автомобилей
Rajesh-Royal/Car-Bidding-System-React
Система автомобильных торгов ReactJS. Травлан
Этот проект загружен с Создать приложение React и использование Tailwindcss для библиотеки пользовательского интерфейса.
Доступные сценарии
Этот проект использует пряжу в качестве менеджера пакетов и в каталоге проекта, вы можете запустить:
| СТАРТ: Дев | Запускает сервер разработки |
| строить | Производственная сборка |
| тест | Запускает модульные тесты |
| выбросить | Реагировать изгнание |
| пронзительный | Показывает все ошибки в кодовой базе |
| Lint: исправить | Исправьте все освещенные ошибки |
Husky Hooks будет заполнить код, прежде чем его запустить.
🧐 Что внутри?
Быстрый взгляд на файлы и каталоги верхнего уровня, которые вы увидите в этом проекте.
├── .vscode
├── node_modules
├── public
├── src
├── assets
├── components
├── container
├── context
├── pages
├── routes
├── utils
├── _redirects
├── netlify.toml
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── craco.config.js
├── package.json
├── README.md
├── tailwind.config.js
└── yarn.lock
.VSCODE/: Этот каталог содержит все настройки рабочей области для VSCODE.
💫 Развертывание
Результат: Меня не выбрали для следующего раунда.
Оригинал: “https://dev.to/rajeshroyal/frontend-challenge-car-bidders-dashboard-mia”