Code Monkey home page Code Monkey logo

geektrust-adminui's Introduction

Admin User Interface

This repository contains my implementation of an admin user interface for managing users. The goal of this project was to build a functional UI that allows admins to view and delete users. The users are provided through an API, and the UI incorporates various features to enhance the user experience.

Preview

image image

Score

image

Features

Column Titles: The column titles are designed to stand out from the user entries, making it easier for admins to identify the displayed properties. Search Bar: A search bar is included to enable filtering based on any user property. Admins can enter a search query, and the UI will update in real-time, displaying only the matching user entries.

  • Edit & Delete Rows: Admins have the ability to edit or delete rows directly in the UI. Please note that these actions only occur in memory and do not persist to any external database.

  • Pagination: Pagination is implemented to enhance usability and manage large datasets. Each page contains 10 rows, and buttons at the bottom of the table allow admins to navigate to specific pages, including options for the first page, previous page, next page, and last page. The pagination dynamically updates based on search/filtering criteria. For example, if there are 25 records that match a search query, the pagination buttons will only display up to the third page.

  • Row Selection: Admins can select one or more rows by clicking on them. When a row is selected, it is highlighted with a grayish background color. Multiple selected rows can be deleted simultaneously by using the "Delete Selected" button located at the bottom left of the UI. Please note that row selection only applies to the ten rows displayed on the current page and does not affect all 50 rows.

  • Select/Deselect All Rows: A checkbox is provided in the top left corner to select or deselect all displayed rows on the current page. This checkbox is a convenient shortcut for admins when they want to perform actions on all visible users.

Users API

To populate the UI with user data, I have utilized the Users API provided. It is a GET request to the following endpoint:

bash Copy code https://geektrust.s3-ap-southeast-1.amazonaws.com/adminui-problem/members.json The response from the API contains an array of user objects, where each object represents a user and includes properties such as id, name, email, and role. The users are sorted by the id field, and there is no alphabetical sorting.

Technologies Used

The implementation of this admin user interface was done using JavaScript and React, which provided a robust and efficient framework for building dynamic and interactive user interfaces. React's component-based architecture allowed me to modularize the UI elements and maintain a clean code structure.

Usage

To run this admin user interface locally, follow these steps:

Clone this repository to your local machine. Install the necessary dependencies by running the command: npm install. Start the development server using the command: npm start. Open your web browser and visit http://localhost:3000 to access the admin user interface.

geektrust-adminui's People

Contributors

sanchitttt avatar

Stargazers

Dhanush Gopinath avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.