This project is a Phonebook application built with React. The main purpose of this homework is to practice working with events, component state, forms, Formik, Yup validation, and localStorage.
- GitHub Repository: https://github.com/kutluhangil/goit-react-hw-03
- Live Demo (Vercel): https://goit-react-hw-03-gamma-navy.vercel.app/
- React — Building the user interface using components and hooks
- Vite — Fast development environment and build tool
- Formik — Managing form state and form submission
- Yup — Schema-based form validation
- nanoid — Generating unique IDs for contacts
- CSS Modules — Scoped and modular component styles
- localStorage — Persisting contacts between page reloads
The following libraries were installed manually during the project setup:
npm install formik npm install yup npm install nanoid
These libraries are listed in package.json and are used throughout
the application.
GOIT-REACT-HW-03 ├── dist ├── node_modules ├── public ├── src │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Contact │ │ │ ├── Contact.jsx │ │ │ └── Contact.module.css │ │ ├── ContactForm │ │ │ ├── ContactForm.jsx │ │ │ └── ContactForm.module.css │ │ ├── ContactList │ │ │ ├── ContactList.jsx │ │ │ └── ContactList.module.css │ │ └── SearchBox │ │ ├── SearchBox.jsx │ │ └── SearchBox.module.css │ ├── App.css │ ├── App.jsx │ ├── App.module.css │ ├── index.css │ └── main.jsx ├── .gitattributes ├── .gitignore ├── eslint.config.js ├── index.html ├── LICENSE ├── package-lock.json ├── package.json ├── README.md └── vite.config.js
The Phonebook application allows users to manage a list of contacts. Each contact contains a name, phone number, and a unique ID.
Main features:
- Add new contacts using a validated form
- Filter contacts by name (case-insensitive)
- Delete contacts from the list
- Automatically save contacts to localStorage
- Restore saved contacts on page reload
All components are rendered inside the App component. The main markup structure is:
<div> <h1>Phonebook</h1> <ContactForm /> <SearchBox /> <ContactList /> </div>
Components overview:
- App — Root component, manages state and business logic
- ContactForm — Formik-based form for adding new contacts
- SearchBox — Controlled input for filtering contacts
- ContactList — Renders the list of contacts
- Contact — Displays a single contact with delete functionality
Contacts are stored in the App component as an array in state. Initially, static test data is used to verify rendering.
A controlled input (SearchBox) filters contacts by name. Filtering logic is case-insensitive and handled in the App component.
New contacts are added using ContactForm built with Formik. Validation rules are implemented with Yup. Unique IDs are generated using nanoid.
Each contact includes a Delete button that removes it from state.
Contacts are saved to localStorage whenever the state changes. On application load, stored contacts are read and restored.
This homework strengthens core React skills such as component composition, state management, controlled inputs, form handling, validation, and data persistence. It serves as a solid foundation for more advanced React applications.
Happy coding! 🚀