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

https://github.com/yevheniiazalevska/phonebook

Developed a Phonebook application in React to store contacts. Used state (useState) to manage the contact list and filtering. Implemented validation of input data and uniqueness of contacts. Added styling using CSS and responsive design. Used local storage (localStorage) to store contacts between sessions.
https://github.com/yevheniiazalevska/phonebook

api formik-yup hooks module-css react redux router toolkit vercel

Last synced: 4 months ago
JSON representation

Developed a Phonebook application in React to store contacts. Used state (useState) to manage the contact list and filtering. Implemented validation of input data and uniqueness of contacts. Added styling using CSS and responsive design. Used local storage (localStorage) to store contacts between sessions.

Awesome Lists containing this project

README

          

# ☎️ Phonebook

**Phonebook** is a personal project — a simple contact management application built with **React**. It allows users to add, search, and delete contacts.

## 🌐 Links

- **GitHub Repository:** [Phonebook Repo](https://github.com/YevheniiaZalevska/phonebook)
- **Live Demo:** [Phonebook Demo](https://phonebook-tau-seven.vercel.app/)

---

## 📖 About the Project

**Phonebook** is a small but practical app that helps users store their contact list. It demonstrates skills in component-based architecture, state management, form handling, and filtering lists.

### Key Features

✅ Add new contacts with name and phone number
✅ Search/filter contacts by name
✅ Delete unnecessary contacts
✅ Simple and clean user interface
✅ Responsive for all devices

---

## 🛠️ Technologies Used

| Technology | Purpose |
|----------------|----------------------------------|
| React | Main framework |
| React Hooks | State and effect management |
| CSS Modules | Component styling |
| Vercel | Deployment |
| GitHub | Version control |

---

## 🚀 How to Run Locally

1. Clone the repository:
```bash
git clone https://github.com/YevheniiaZalevska/phonebook.git
```
2. Move to the project folder:
```bash
cd phonebook
```
3. Install all dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm start
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser.

---

## 💡 What I Learned

This project helped me practice:

- Building forms and handling user input
- Using **React Hooks** for managing state
- Filtering and displaying dynamic lists
- Creating a clear component structure
- Applying basic responsive design

---

## 👩‍💻 Author

- [Yevheniia Zalevska](https://github.com/YevheniiaZalevska)