DEV Community 👩‍💻👨‍💻

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

Posted on

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.

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 Author

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

🌖🌗🌘 Turn on dark mode in Settings