Task - Implement Contact Filtering Feature With Pagination and Contact Listing UI

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

Task: Implement Contact Filtering Feature with Pagination and Contact Listing UI

Project Description: Your task is to create a contact management web application using the
MERN (MongoDB, Express.js, React, Node.js) stack. You should implement the contact
filtering feature, provide pagination for contact listing, and design the contact listing user
interface.

Requirements:

1. Frontend Development:

- Create a user-friendly contact listing interface that displays the available contacts.
- Implement pagination for the contact listing. Each page should display a limited number
of contacts (e.g., 10 contacts per page).
- Provide navigation controls for users to switch between pages.
- Design an intuitive filtering mechanism that allows users to apply multiple filters to the
contact list.
- Filters should include options such as date of creation, name, phone number, and country
code.

2. Contact Filtering:

- Allow users to apply one or more filters to narrow down the list of contacts based on the
selected criteria.
- Ensure that the filtering process is user-friendly and provides instant feedback on the
filtered results.
- Create a button or UI element to trigger the filtering process.
- Filters on the fields Name(String), MobileNumber(Number), Tags(List of predefined tags),
Created Time(Date), Date of billing(Date), Status (Booleans) and good to add some more
fields as per your preference regarding contact management.

3. Backend Development:

- Set up a Node.js server using Express.js to handle API requests.


- Create RESTful APIs to handle the contact filtering functionality.
- Implement logic to retrieve and filter contacts from the database based on the selected
criteria.

Deliverables:

- A fully functional contact management web application that includes contact filtering,
pagination for contact listing, and a user-friendly contact listing UI.
- Share the fully functional web application, hosted on either Netlify, Heroku, or any other
suitable platform, and provide a link for review.
- Codebase with the implemented features, hosted on a GitHub repository.
- Instructions on how to deploy and run the application (if applicable).

Additional Information:
- Design the contact listing UI to be user-friendly and responsive.
- Use industry-standard practices for filtering data, applying multiple filters, and implementing
pagination.
- Ensure that the contact filtering process is reliable and provides a seamless user
experience.
- Test the functionality with various filter combinations to ensure accuracy.

Note: This task encompasses multiple features, including contact filtering, pagination, and UI
development. Ensure that all features work seamlessly together for an improved user
experience.

Reference UI :-

You might also like