https://github.com/DigitalProductschool/dps-react-challenge
DPS Coding challenge based on React and Typescript
https://github.com/DigitalProductschool/dps-react-challenge
Last synced: 5 days ago
JSON representation
DPS Coding challenge based on React and Typescript
- Host: GitHub
- URL: https://github.com/DigitalProductschool/dps-react-challenge
- Owner: DigitalProductschool
- Created: 2024-06-24T08:17:24.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-12T08:59:23.000Z (almost 2 years ago)
- Last Synced: 2024-07-12T10:22:19.552Z (almost 2 years ago)
- Language: CSS
- Size: 163 KB
- Stars: 1
- Watchers: 3
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DPS Frontend Coding Challenge
## Overview
This repository contains a very basic web application based on Typescript and React. Main application file is `App.tsx`. Node and npm are required.
## Environment Setup
Ensure you have Node.js (v14.x or later) and npm (v6.x or later) installed.
To set up and run the application, execute the following commands:
```
npm install
npm run dev
```
The application will then be accessible at http://localhost:3000.
## Project Context
You will be enhancing a new CRM (Customer Relationship Management) software aimed at managing customer data efficiently. Your task is to develop a feature that displays a searchable list of customers.
Refer to the attached mockup image to guide your UI development 👇
## Challenge Tasks
- **Fork this project:** Start by forking this repository
- **UI Implementation:** Implement the user interface according to the provided design mockup.
- **Data Integration:** Utilize the endpoint https://dummyjson.com/users to fetch user data. If no filter is applied all data is displayed.
- **Client-side Filtering:** Implement the following filters:
- **Name Filter:** An input field that dynamically filters by `firstName` or `lastName` as you type.
- **City Filter:** A dropdown that lists all cities present in the data. Users can select a city to filter the list accordingly.
- **Highlight Feature:** A checkbox that when checked, highlights the oldest users within each city (use data field `city`)
- **Optional:** Implement a 1-second debounce on the Name Filter input. This means the application should delay the filter action until 1 second has passed without any further input from the user. This optimization helps reduce the number of processing calls, enhancing performance.
- **Submission:** After completing the challenge, email us the URL of your GitHub repository.
- **Further information:**
- If there is anything unclear regarding requirements, contact us by replying to our email.
- Use small commits, we want to see your progress towards the solution.
- Code clean and follow the best practices.
\
Happy coding!