Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amaranand360/contact-management-app

This is Contact Management App! which allows you to manage your contacts, providing an easy way to add, edit, and view contact details.
https://github.com/amaranand360/contact-management-app

react-router reactjs redux redux-toolkit tailwindcss typescript

Last synced: about 1 month ago
JSON representation

This is Contact Management App! which allows you to manage your contacts, providing an easy way to add, edit, and view contact details.

Awesome Lists containing this project

README

        

# Contact Management App

Welcome to the Contact Management App! This web application allows you to manage your contacts, providing an easy way to add, edit, and view contact details.

## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Getting Started](#getting-started)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)

## Introduction

The Contact Management App is a simple yet powerful tool designed to help you manage your contacts efficiently. Whether you want to keep track of personal or professional contacts, this app offers a user-friendly interface for adding and editing contact information.

## Features

- **Add Contacts**: Easily add new contacts by providing their name, email, and mobile number.
- **Edit Contacts**: Update contact information, such as name, email, and mobile number.
- **View Contacts**: Browse and view a list of all your contacts with relevant details.
- **Delete Contacts**: Remove unwanted contacts from your list.

## Getting Started

To get started with the Contact Management App, follow these steps:

1. Clone this repository to your local machine using `git clone https://github.com/amaranand360/Contact-management-app.git`.
2. Navigate to the project directory: `cd contact-management-app`.
3. Install the required dependencies using `npm install`.

## Technologies Used

- React: Frontend library for building user interfaces.
- Redux: State management for managing the application's state.
- React Router: Handling navigation and routing within the app.
- Tailwind CSS: Styling framework for creating modern and responsive designs.
- Redux Toolkit: Simplifies state management with a set of tools.
- Typescript

## Installation

To run the Contact Management App on your local machine, follow these steps:

1. After completing the "Getting Started" section, use the command `npm start` to start the development server.
2. Open your browser and navigate to `http://localhost:3000` to access the app.

## Usage

1. **Adding a Contact**: Click on the "Add Contact" button and provide the necessary details.
2. **Editing a Contact**: Click on the "Edit" button next to a contact's details, make the necessary changes, and click "Update Contact".
3. **Viewing Contacts**: The main page displays a list of your contacts. You can also view individual contact details.
4. **Deleting a Contact**: Click on the "Delete" button next to a contact's details to remove it from the list.