DEV Community

loading...
Cover image for Frontend challenge - Car bidders dashboard.

Frontend challenge - Car bidders dashboard.

Rajesh Royal
Designer, Front-end Developer, Traveller, Hooper. I design and code beautifully simple things, and I love what I do.
・1 min read

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 |
__________________________________________________________________

Enter fullscreen mode Exit fullscreen mode

My solution: -

GitHub logo Rajesh-Royal / car-bidding-system-react

Car bidding system ReactJS. TravClan

Car bidding web App

This project Is bootstrapped with Create React App and using tailwindcss for UI library.

Netlify Status

Project Preview

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
  1. .vscode/: This directory contains all of the workspace setting for vscode.

πŸ’« Deploy

Deploy to Netlify

Result: I was not selected for next round.

Discussion (2)

Collapse
kram profile image
kiran ramulori

Hey! thanks for sharing. May I know why you did not make through the round? I mean the app works well.

Collapse
rajeshroyal profile image
Rajesh Royal Author

don't know they didn't gave feedbacks on this round.