📘 React + Redux Toolkit — Contacts App

This project is a Contacts (Phonebook) application built with React, Redux Toolkit, and Vite. The main purpose of this homework is to practice asynchronous operations, Redux state management, and backend integration.

---

📸 User Interface

Login Screen

Contacts List

Search & Filtering

---

🔗 Project Links

• GitHub Repository: https://github.com/YOUR_USERNAME/goit-react-hw-07
• Live Demo (Vercel): https://YOUR_PROJECT.vercel.app

---

🛠️ Technologies Used

• React
• Vite
• Redux Toolkit
• React Redux
• Axios
• Formik & Yup
• CSS Modules
• MockAPI (Backend)

---

🎯 Homework Goals

• Refactor the previous Contacts app using Redux Toolkit
• Remove Redux Persist and localStorage logic
• Store contacts on a backend (MockAPI)
• Handle asynchronous HTTP requests
• Implement loading and error states
• Optimize selectors using createSelector

---

📌 Application Features

• Fetch contacts from backend on app load
• Add a new contact (POST request)
• Delete a contact (DELETE request)
• Search contacts by name
• Display loading and error states

---

⚙️ State Management Structure

{
  contacts: {
    items: [],
    loading: false,
    error: null
  },
  filters: {
    name: ""
  }
}

All global state is managed using Redux Toolkit. Async logic is handled via createAsyncThunk.

---

🔄 Async Operations

The following async operations are implemented:

• fetchContacts — GET request to fetch all contacts
• addContact — POST request to create a new contact
• deleteContact — DELETE request to remove a contact by ID

Each operation handles: pending, fulfilled, and rejected states via extraReducers.

---

🧠 Selector Optimization

To avoid unnecessary re-renders when loading or error changes, a memoized selector is used:

selectFilteredContacts = createSelector(
  [selectContacts, selectNameFilter],
  (contacts, filter) => {
    return contacts.filter(contact =>
      contact.name.toLowerCase().includes(filter.toLowerCase())
    );
  }
);

This ensures filtering only runs when contacts or filter value changes.

---

📂 Project Structure

src/
├── components/
│   ├── Contact/
│   │   ├── Contact.jsx
│   │   └── Contact.module.css
│   ├── ContactForm/
│   │   ├── ContactForm.jsx
│   │   └── ContactForm.module.css
│   ├── ContactList/
│   │   ├── ContactList.jsx
│   │   └── ContactList.module.css
│   └── SearchBox/
├── redux/
│   ├── contactsOps.js
│   ├── contactsSlice.js
│   ├── filtersSlice.js
│   └── store.js
├── App.jsx
├── main.jsx
└── index.css

---

🚀 Application Lifecycle

• Application loads
• useEffect in App dispatches fetchContacts
• Backend returns contacts
• Redux store updates state
• UI re-renders with updated data

---

🔐 Authentication Concept (Theoretical)

During this project, authentication concepts were studied conceptually:

• Authentication (login / identity verification)
• Authorization (access rights)
• JWT (JSON Web Token)
• Access Token & Refresh Token flow
• Protected routes

Although authentication is not implemented in this project, the architecture and real-world flow were fully analyzed and documented.

---

✅ Final Notes

This project fully meets all homework requirements:

• No Redux Persist
• Backend integration via MockAPI
• Async operations with Redux Toolkit
• Clean and readable code
• No console errors or warnings

This homework significantly improves understanding of Redux Toolkit, async flows, and real-world frontend architecture.

Happy coding! 🚀