Persons Manager

screenshot of Persons Manager
react
chakra-ui

Person manager project using React

Overview:

The Person Manager is a web application that allows users to easily manage a list of persons. With a clean and user-friendly interface, users can perform various actions such as adding, editing, deleting, and reversing persons on the list. The application also provides additional features such as a custom scrollbar similar to Mac OS, dynamic styling based on the number of people on the list, and a pop-up confirmation when deleting a person.

Features:

  • Show persons list: View a list of all persons.
  • Add new person: Easily add a new person to the list.
  • Delete person: Remove a person from the list.
  • Edit person: Modify the details of a person on the list.
  • Reverse list: Change the order of persons in the list.
  • Show message if not person: Display a message if there are no persons on the list.
  • Confirm pop up when delete task: Prompt a confirmation pop-up before deleting a person.
  • Custom scrollbar like Mac OS: Use a scrollbar design similar to Mac OS for a visually appealing experience.
  • Show and Hide persons: Toggle the visibility of the persons list.
  • Handling person name (add, edit): Properly handle the name field when adding or editing a person.
  • Disable Show/Hide persons button when empty list: Disable the show/hide button when the list is empty.
  • Show the number of people on the list (and dynamic styling): Display the number of people on the list and dynamically style it based on the count.

Summary:

The Person Manager is a feature-rich web application that simplifies the management of a list of persons. It offers essential features such as adding, editing, deleting persons, along with additional functionalities like reversing the list, displaying messages, and custom scrollbar design. With easy installation and integration with popular UI frameworks, the Person Manager provides a seamless user experience for efficient person management.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.