Рубрики
Без рубрики

Frontend Challenge – приборная панель автомобилей.

У меня было интервью с Travclan и для технического раунда, мне пришлось представить решение для этого от … Tagged с JavaScript, React, Tailwindcss.

У меня было интервью с 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 |
__________________________________________________________________

Мое решение: –

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
  1. .VSCODE/ : Этот каталог содержит все настройки рабочей области для VSCODE.

💫 Развертывание

Результат: Меня не выбрали для следующего раунда.

Оригинал: “https://dev.to/rajeshroyal/frontend-challenge-car-bidders-dashboard-mia”