DEV Community

Cover image for Frontend challenge - Car bidders dashboard.
Rajesh Royal
Rajesh Royal

Posted on

3 1

Frontend challenge - Car bidders dashboard.

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (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

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more