/Contact-Manager

Manages profiles - add, delete a profile made using React

Primary LanguageHTML

Contact Manager

Overview

The Contact Manager is a web application that allows users to add and delete contact information, including names and email addresses. Built with React, this app provides a simple interface for managing a list of contacts. Users can add new contacts, view the list of existing contacts, and remove contacts as needed.

Features

  • Add Contacts: Input and save new contact names and email addresses.
  • View Contacts: Display a list of all saved contacts.
  • Delete Contacts: Remove contacts from the list.
  • Responsive Design: Designed to work well on both desktop and mobile devices.

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/contact-manager.git
  2. Navigate to the project directory:

    cd contact-manager
  3. Install dependencies:

    npm install
  4. Start the development server:

    npm start

    The application will be available at http://localhost:3000.

Usage

  1. Add a Contact:

    • Enter the contact's name and email address in the provided fields.
    • Click the "Add Contact" button to save the new contact.
  2. View Contacts:

    • The list of contacts will be displayed on the main page, showing each contact's name and email address.
  3. Delete a Contact:

    • Click the "Delete" button next to a contact to remove it from the list.

Components

  • App: The main component that manages state and renders the user interface.
  • ContactList: Displays the list of contacts.
  • AddContactForm: Provides a form for adding new contacts.
  • ContactItem: Represents an individual contact with options to delete.

Dependencies

  • react: The core React library.

Userflow

image