CRUD web application

Technologies used

Frontend : ReactJS, Vanilla CSS
Backend : Node.js, express, MySQL

Add repo to your local machine:

git clone https://github.com/Fadilix/React_CRUD_app.git
npm install

Screenshots

All data displayed

Edit contact

Updated contact

Validation

Deleting data

Contact info

MySQL database

Recreate the contact table:

CREATE TABLE contact_db(
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  contact VARCHAR(45) NOT NULL,
  PRIMARY KEY(id));

Description

This web application allows users to perform basic CRUD (Create, Read, Update, Delete) operations on a list of contacts. Here's what the app does:

Create:

Users can add new contacts to the list by clicking the "Add Contact" button, which navigates them to a form where they can input contact details such as name, email, and phone number. When they submit the form, the new contact is added to the list.

Read:

The app displays a table that lists all the contacts stored in the database. Each row in the table represents a contact and includes information like the contact's name, email, and phone number. Users can view these contact details.

Update:

Users can edit existing contacts by clicking the "Edit" button in the contact's row. This action navigates them to an edit form where they can modify the contact's information. After making changes and submitting the form, the contact's details are updated in the database.

Delete:

Users can remove a contact from the list by clicking the "Delete" button in the contact's row. A confirmation prompt asks if they are sure they want to delete the contact. If confirmed, the contact is deleted from the database, and the list of contacts is updated accordingly.

Fadilix/ReactCRUDapp