I had an Interview with Travclan and for the technical round, I had to submit a solution for this frontend challenge.
# 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 |
__________________________________________________________________
My solution: -
- live - Car Bidders Dashboard [Netlify]
- GitHub - Car Bidders List
Rajesh-Royal / car-bidding-system-react
Car bidding system ReactJS. TravClan
This project Is bootstrapped with Create React App and using tailwindcss for UI library.
Available Scripts 🚁
This project usages Yarn as package manager and in the project directory, you can run:
Script
Description
start:dev
Starts the development server
build
Production build
test
Runs unit tests
eject
React Eject
lint
Shows all the linting errors in codebase
lint:fix
Fix all the liting errors
Husky hooks will lint code before commiting it.
🧐 What's inside?
A quick look at the top-level files and directories you'll see in this project.
├── .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/
: This directory contains all of the workspace setting for vscode.
💫 Deploy
Result: I was not selected for next round.
Top comments (2)
Hey! thanks for sharing. May I know why you did not make through the round? I mean the app works well.
don't know they didn't gave feedbacks on this round.