Skip to content

This project is an excellent demonstration of how to build a full-featured React application with authentication, secure data management, and a modern UI.

Notifications You must be signed in to change notification settings

Miro-wq/goit-react-hw-08-phonebook

Repository files navigation

✨ Contact book, final code refactoring, implementing login and user authentication. ✨

🛠 Tools used

My Skills

Description

The project is the final part of code refactoring for the phonebook application with user authentication, showcasing advanced React concepts such as state management, form handling, and integration with a backend for user registration, login, and data persistence.

Features

  • User Authentication: Supports user registration, login, and logout functionality.
  • Personalized Phonebook: Users can securely add, edit, and delete their contacts.
  • Form Validation: Ensures proper input for creating and editing contacts.
  • Persistent Data: Contacts are stored and retrieved from a backend service.
  • Routing: Implements private and public routes for authenticated and unauthenticated users.

Key Learning Objectives:

  • State Management: Manage and update state in React, particularly how to structure state to store multiple properties and handle user inputs in a controlled manner.
  • Componentization: The importance of breaking down an application into smaller, reusable components became evident. This approach not only simplifies development but also makes the codebase easier to maintain and scale.
  • Form Handling: Experience in handling forms in React, including managing controlled inputs and validating user data through patterns and required fields.
  • Conditional Rendering: Implementing conditional logic to prevent duplicate contacts from being added, which reinforced the concept of controlling what gets rendered based on the application's state.
  • Refactoring and Code Organization: Refactoring the application into separate components taught me the significance of organizing code in a way that promotes reusability and separation of concerns.
  • User Experience Considerations: Enhancing the user experience by providing feedback (such as alerts) and ensuring the interface remains responsive and intuitive.