Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maliha-tasnim/typescript---user-management-application-

This is an user management application where CRUD functionalities are used to handle the user information.
https://github.com/maliha-tasnim/typescript---user-management-application-

Last synced: about 14 hours ago
JSON representation

This is an user management application where CRUD functionalities are used to handle the user information.

Awesome Lists containing this project

README

        

## USER MANAGEMENT APPLICATION

This is a simple user management application where CRUD functionalities are used to handle the user information.

## Importing Packages

To build the UI of this project, we used the following libraries:

⚫ Bootstrap

⚫ React Suite

⚫ React Icons/Font Awesome

## UI Model and functionality

### Card Component

I used the Card component to provide a background color and to display the table.

### Table

The table is used to display all of the users and action buttons (Delete, Edit) to allow users to perform actions on specific data.

### Action buttons and methods

The edit function takes the specific column object as a parameter and displays it in the form, allowing the user to update the entry accordingly. Similarly, the delete button function takes the ID of the field as a parameter and deletes the specific entry.

### Switch button and create user functions

The switch toggle button is active by default, which means that users can easily create new users. If the toggle is deactivated, the create user button will disappear and new users cannot be created.

### User create/edit form

I created a basic form with inputs, select boxes, number fields, and dropdown fields. When the user clicks on the edit button for a particular field, the same modal will pop up and display the details for updating. The same form is used for both creating and updating users, with the button text changing conditionally to "Submit" or "Update".

### Validation

⚫ Required field on the name input: This prevents the form from being submitted if the name input is empty.

⚫ Disable submit button if value is null in the field: This disables the submit button if the name input is empty.