1. Objective

In this react project I have used typescript to build user management application. It includes CRUD functionality.

2. Importing Packages

To build the UI of this project I have used bootstrap, rsuit react library, and react-icons/fa which is font awsome libraries.
Link1: https://react-bootstrap.netlify.app/getting-started/introduction,
Link2: https://rsuitejs.com/
Link3: https://react-icons.github.io/react-icons

3. UI Model and functionality

3.1 Card Component

In the beginning, to get the background color and to display table I have used card component as a base.

3.2 Table

I have used table to display all the users and action buttons (Delete, Edit) section to apply action on particular data.

3.3 Action buttons and methods

On the edit function passes the particular column object and that is displayed in the form and accordingly update entry.
Similarly, on delete button click function call and get the id of that field and delete particular entry.

3.4 Switch button and create user functions

I have used swtich toggle button and beside that create user button. Switch is by deafult active which means we can easily create user but if toggle is deactivate create user button will disappear and you cant create user.

3.5 User create/edit form

Initially created basic form which contain inputs, selectbox, number, dropdown fields. with the help of we can create user and also sown in the table. If you click on edit button on particular field, it will pop up same modal and show the details to update. Same form hadle conditionally to create and update form also change button text conditionally like submit and update.

3.6 validation

I have applied required field on the name input and same time applyed on the submit button to disable if value is null in the field.

User Screen

add user

edit user

Thank you.

Checkout more details about me on LinkedIn: https://www.linkedin.com/in/mangeshipper/

GitHub

View Github