README.md

📖 Contact Management System

A sleek and modern full-stack application for managing contacts, built with Spring Boot and React. This system provides a seamless interface to perform all basic CRUD (Create, Read, Update, Delete) operations, combining a robust backend with an attractive, responsive front-end.

✨ Features

• Create Contacts: Easily add new contacts with their name, email, and phone number.
• Read Contacts: View a dynamic list of all saved contacts in a beautifully designed grid layout.
• Update Contacts: Edit existing contact details with a simple click on the Edit button.
• Delete Contacts: Remove unwanted contacts effortlessly.
• Responsive UI: The user interface adapts gracefully to different screen sizes, from desktops to mobile devices.
• Attractive Design: A modern, clean, and interactive design featuring subtle animations and a vibrant color palette.
• Robust Backend: A RESTful API built with Spring Boot, ensuring reliable and secure data management.
• Persistent Storage: Data is saved to a file-based H2 database, so your contacts are never lost between application restarts.

🚀 Getting Started

Follow these steps to set up and run the project on your local machine.

Prerequisites

You need the following software installed:

• Java Development Kit (JDK) 21 or later
• Maven
• Node.js and npm

Backend Setup (Spring Boot)

1. Navigate to the Contact-Management-System directory.
2. Open the project in your favorite IDE (e.g., IntelliJ IDEA, VS Code).
3. Run the main application file: ContactManagementSystemApplication.java.
   • The backend server will start on port 9999.
   • The H2 database console can be accessed at http://localhost:9999/h2db.

Frontend Setup (React)

1. Navigate to the contact-frontend directory.
2. Install the required Node.js packages:

   npm install

3. Start the React development server:

   npm start

   • The front end will open automatically in your browser on port 3000. It is configured to proxy API requests to the backend server.

📸 Screenshots

FRONTEND

VALIDATION CHECK-

SWAGGER CHECKING-

H2 Database Console-

🛠️ Built With

• Backend:

  • Spring Boot: The core framework for building the REST API.
  • Spring Data JPA: For database interaction and object-relational mapping.
  • H2 Database: A lightweight, file-based database for persistent storage.
  • Lombok: To reduce boilerplate code.

• Frontend:

  • React: A powerful JavaScript library for building the user interface.
  • Axios: For making API requests to the backend.
  • CSS: For custom styling, animations, and responsive design.

✍️ Author

• Trisha Basak - Initial work - https://github.com/trishab2005