Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredvuni/contactify
A simple react app that enables users to add contacts to a list of contacts using localStorage
https://github.com/fredvuni/contactify
context-api css localstorage reactjs robohash-avatar usereducer
Last synced: 16 days ago
JSON representation
A simple react app that enables users to add contacts to a list of contacts using localStorage
- Host: GitHub
- URL: https://github.com/fredvuni/contactify
- Owner: FREDVUNI
- Created: 2023-07-24T12:20:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-26T07:20:47.000Z (over 1 year ago)
- Last Synced: 2024-12-01T17:43:25.506Z (3 months ago)
- Topics: context-api, css, localstorage, reactjs, robohash-avatar, usereducer
- Language: JavaScript
- Homepage: https://contactiify.netlify.app/
- Size: 449 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `
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](https://colorlib.com/).
- The fonts used in the app are from the Google Fonts library.
---