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

0
39

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.

ALSO READ  Develop a Horoscope App Using ReactJS and a Free API

Comments are closed.