나는 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>
}

Bid {
id: string,
carTitle: string,
amount: number,
created: string
}

## Table expected
__________________________________________________________________
| Customer name (with avtar) | Email | Phone | Premium | Max/Min bid |
__________________________________________________________________

내 솔루션: -

라이브 - Car Bidders Dashboard [Netlify]

GitHub - Car Bidders List

라제시-로얄 / 자동차 입찰 시스템 반응

자동차 입찰 시스템 ReactJS. 트래브클랜

자동차 입찰 웹 앱

이 프로젝트는 Create React App로 부트스트랩되었으며 ​​UI 라이브러리에 tailwindcss를 사용합니다.





사용 가능한 스크립트 🚁

이 프로젝트는 Yarn을 패키지 관리자로 사용하고 프로젝트 디렉토리에서 다음을 실행할 수 있습니다.


스크립트
설명

start:dev개발 서버 시작
build프로덕션 빌드
test단위 테스트 실행
eject React Eject
lint코드베이스의 모든 Linting 오류를 표시합니다.
lint:fix모든 조명 오류 수정

Husky hooks will lint code before commiting it.

🧐 안에 뭐가 들어있나요?

이 프로젝트에서 보게 될 최상위 파일 및 디렉토리를 간단히 살펴보십시오.

├── .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에 대한 모든 작업 공간 설정이 포함되어 있습니다.

💫 배포

View on GitHub


결과: 다음 라운드에 선정되지 않았습니다.