Skip to content

Readme.md

Latest commit

 

History

History
101 lines (72 loc) · 1.98 KB

Readme.md

File metadata and controls

101 lines (72 loc) · 1.98 KB

Contact Manager App

A full-stack React contact management application with CRUD operations, search functionality, and REST API.

Features

  • ✅ Add, edit, view, and delete contacts
  • ✅ Real-time search and filtering
  • ✅ React Router for navigation
  • ✅ JSON Server backend API
  • ✅ Responsive UI with Semantic UI

Tech Stack

  • Frontend: React, React Router, Semantic UI
  • Backend: JSON Server
  • State Management: React Hooks (useState, useEffect)

Project Structure

contact-app/
├── contact-app/          # React frontend
│   ├── src/
│   │   ├── components/   # React components
│   │   └── App.js        # Main app component
│   └── package.json
└── server-api/           # JSON Server backend
    ├── db.json           # Database file
    └── package.json

Getting Started

Prerequisites

  • Node.js
  • npm or yarn

Installation

  1. Clone the repository

    git clone https://github.com/mufeed-dev/Contact-App.git
cd Contact-App

  2. Install frontend dependencies

    cd contact-app
npm install

  3. Install backend dependencies

    cd ../server-api
npm install

Running the Application

  1. Start the backend server

    cd server-api
npm start

    Server runs on http://localhost:3001

  2. Start the frontend

    cd contact-app
npm start

    App runs on http://localhost:3000

Usage

  • View Contacts: See all contacts on the home page
  • Add Contact: Click "Add Contact" to create new contacts
  • Search: Use the search bar to filter contacts
  • Edit/Delete: Use the edit/delete icons on each contact card
  • View Details: Click on a contact to see detailed view

API Endpoints

  • GET /contacts - Get all contacts
  • POST /contacts - Create new contact
  • PUT /contacts/:id - Update contact
  • DELETE /contacts/:id - Delete contact

License

MIT License