Part 2 : Contact Management System with Node.js, Express and ReactJS

In our previous article, we created a REST API for a Contact Management System using Node.js and stored contacts in a JSON file. Now, let’s integrate this API with a React frontend to build a fully functional Contact Manager application.
Go To : Part 1 : Contact Management System with Node.js, Express and ReactJS
Follow this video for complete guidance :
Setting Up the React Frontend
We will use React with Axios to fetch, add, update, delete, and export contacts. Ensure that you have Node.js installed and create a new React project:
npm create vite cd projectname npm install axios npm run dev
Connecting to the API
Modify App.js to integrate our backend API. First, import the required dependencies:
import { useEffect, useState } from 'react'; import axios from 'axios'; import './App.css';
Define the API base URL:
const API_URL = 'http://localhost:3000/contacts';
Fetching Contacts from the API
Use useEffect
to fetch the contacts when the component mounts:
const fetchContacts = async () => { try { const response = await axios.get(API_URL); setContacts(response.data); } catch (error) { console.error("Error fetching contacts:" + error); } }; useEffect(() => { fetchContacts(); }, []);
Add or Update Contacts
const addOrUpdateContact = async (e) => { e.preventDefault(); try { if (editId) { await axios.patch(`${API_URL}/${editId}`, form); } else { await axios.post(API_URL, form); } setForm({ name: "", phone: "", email: '', bookmark: false }); setEditId(null); fetchContacts(); } catch (error) { console.error("Error saving contacts:" + error); } };
Delete a Contact
const deleteContact = async (id) => { try { await axios.delete(`${API_URL}/${id}`); fetchContacts(); } catch (error) { console.error("Error deleting contact:" + error); } };
Export Contacts
const exportContacts = async () => { try { const response = await axios.get(`${API_URL}/export`, { responseType: "blob" }); const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute("download", "contacts.zip"); document.body.appendChild(link); link.click(); } catch (error) { console.error("Error exporting contacts:" + error); } };
Building the UI
We create a simple form for adding/updating contacts:
<form onSubmit={addOrUpdateContact}> <input type="text" name="name" onChange={handleInputChange} value={form.name} required /> <input type="text" name="phone" onChange={handleInputChange} value={form.phone} required /> <input type="email" name="email" onChange={handleInputChange} value={form.email} required /> <button type="submit">Save Contact</button> </form> <button onClick={exportContacts}>Export Contacts</button>
Each contact is displayed in a card with edit and delete buttons:
{contacts.map(contact => ( <div key={contact.id}> <h5>{contact.name}</h5> <p>{contact.phone}</p> <p>{contact.email}</p> <button onClick={() => editContact(contact)}>Edit</button> <button onClick={() => deleteContact(contact.id)}>Delete</button> </div> ))}
With this setup, our contact management system is fully functional, allowing users to manage their contacts efficiently. In future articles, we will explore features like authentication and cloud storage integration.