Contact Manager Pro
Contact Manager Pro is a user-friendly web application built with React, Tailwind CSS, and Firebase, designed to efficiently manage personal contacts. The app allows users to add, edit, delete, and filter contacts by name, with real-time updates and secure data storage powered by Firebase.
Contact Manager Pro is a web application designed to help users manage their personal contacts efficiently. Built with React, Tailwind CSS, and Firebase, this application offers a clean and responsive interface for adding, editing, deleting, and filtering contacts.
Table of Contents
Features
- Add Contacts: Easily add new contacts with just a name and email.
- Edit and Delete Contacts: Modify existing contact details or remove contacts entirely, with instant updates.
- Filter Contacts: Use the search bar to filter contacts by name and find exactly who you’re looking for.
- Real-Time Data Synchronization: All contact data is stored securely in Firebase and updated in real-time.
- Responsive Design: A modern, mobile-friendly interface ensures that the application works smoothly on any device.
Installation
Clone the repository:
git clone https://github.com/your-username/Contact-Manager-Pro.git
cd Contact-Manager-Pro
Install dependencies:
npm install
Setup Firebase:
- Create a Firebase project at Firebase Console.
- Add a web app to your Firebase project.
- Copy the Firebase configuration and add it to your project.
Run the application:
npm run dev
The app will run locally on http://localhost:5173
(or another port if specified).
Usage
Add a Contact:
- Click the Plus (+) icon to open the popup form.
- Enter the contact's name and email in the form.
- Click the Add Contact button to save the contact to the list.
Edit a Contact:
- Click the "Edit" icon next to the contact you want to update.
- Modify the details and save changes.
Delete a Contact:
- Click the "Delete" icon next to the contact you want to remove.
Filter Contacts:
- Use the search bar to filter contacts by name as you type.
Technologies Used
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Firebase: A platform for building web and mobile applications, used here for real-time data storage and authentication.
Contributing
Contributions are welcome! If you'd like to contribute to this project, please fork the repository and create a pull request with your changes. Ensure that your code follows the existing style and includes appropriate tests.
License
This project is licensed under the MIT License. See the LICENSE file for more details.