This is a simple React application that allows you to manage contacts using Firebase's Cloud Firestore as the backend database. The app provides functionality to add new contacts, view existing contacts, and update contact information.
- Add new contacts with name and email
- View a list of existing contacts
- Update contact information (name and email)
- Form validation for contact details
- React
- Firebase (Cloud Firestore)
- Formik (for form handling)
- Yup (for form validation)
- react-toastify (for success notifications)
This project has the following dependencies:
react
: Core React libraryreact-dom
: React package for working with the DOMfirebase
: Firebase SDK for JavaScriptformik
: Library for building forms in Reactyup
: Object schema validator and object parserreact-toastify
: React library for adding toast notificationsreact-icons
: Popular icons for React projects
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Hasnainbro/Firebase-Contact-Book.git
-
Navigate to the project directory:
cd Firebase-Contact-Book
-
Set up Firebase:
- Create a new project in the Firebase console
- Enable Cloud Firestore
- Create a new Web app and copy the configuration object
- Create a
config/firebase.js
file in the project and paste the configuration object
-
Start the development server:
npm run dev
The app should now be running at [http://localhost:5173]
.
- Click the "+" icon in the top-right corner to open the "Add Contact" form.
- Fill in the name and email fields, and click "Add Contact" to save the new contact.
- The list of contacts will be displayed on the main page.
- To update a contact, click the pencil icon next to the contact, and the "Update Contact" form will open with the existing details pre-filled.
- Make the desired changes and click "Update Contact" to save the changes.
Contributions are welcome! If you find any issues or want to add new features, feel free to open an issue or submit a pull request.
This project is licensed under the [MIT License].