fredvuni / contactify

A simple react app that enables users to add contacts to a list of contacts using localStorage

Contactify App

Contactify is a simple web application that allows users to manage and organize their contacts with ease. The app provides a user-friendly interface for adding new contacts and displaying a list of saved contacts in a table format.

Features

• Add new contacts: Users can add new contacts to the app by providing their name, email, and phone number.
• Display contacts: The app displays the list of saved contacts in a table format, showing their names, email addresses, and phone numbers.
• Responsive design: Contactify is designed to be responsive and can adapt to different screen sizes, making it accessible on various devices.
• Contacts are stored in localStorage

Technologies Used

• React: The front-end of the app is built using React, a popular JavaScript library for building user interfaces.
• HTML and CSS: The app's structure and styling are created using HTML and CSS, ensuring a visually appealing user interface.
• JavaScript: JavaScript is used for adding interactivity and functionality to the app.

Getting Started

To run the Contactify app on your local machine, follow these steps:

1. Clone the repository: git clone <repository_url>
2. Navigate to the project directory: cd contactify-app
3. Install dependencies: npm install
4. Start the development server: npm start
5. Open your web browser and visit http://localhost:3000 to view the app.

Usage

1. Home Page: The app's home page displays a hero section with a welcoming message and an option to get started. Below the hero section, the user can find a form to add a new contact and a table showing the saved contacts.

2. Add a New Contact: To add a new contact, fill in the required fields (name, email, and phone number) in the form. Click the "Add Contact" button to save the contact.

3. View Contacts: The app displays the list of saved contacts in a table format. Each contact's name, email, and phone number are shown in separate columns.

Contributing

Contributions to Contactify are welcome! If you find any issues or have ideas for improvements, feel free to open an issue or submit a pull request.

screenshot

Acknowledgments

• The design inspiration for the app's hero section comes from Colorlib.
• The fonts used in the app are from the Google Fonts library.

---