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.