ContactManager

KO | EN

gitlite — search

#javascript #python #react #typescript #go #android #linux #nodejs #macos #java #windows #pytorch #ios #openai

(★ 11)

A simple React-Redux CRUD app for managing Contacts

ContactManager Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Contact Manager - Redux Learning Project

A comprehensive React application designed to help you learn **Redux** state management through practical implementation. This project demonstrates modern Redux patterns, async operations, and best practices in a real-world application.

## 🎯 Why This Project for Learning Redux?

This Contact Manager is specifically designed as a **Redux learning resource** that covers:

- ✅ **Redux Fundamentals** - Actions, Reducers, Store, and Dispatch
- ✅ **Async Operations** - Redux Thunk for API calls
- ✅ **Modern Redux Patterns** - Loading states, error handling, and optimistic updates
- ✅ **Real-world Scenarios** - CRUD operations with proper state management
- ✅ **Best Practices** - Clean code structure and separation of concerns

## 🚀 Quick Start

```bash
# Clone and install
git clone https://github.com/devmahmud/ContactManager.git
cd ContactManager
npm install

# Start learning
npm run dev
```

## 📚 Redux Learning Path

### 1. **Understanding the Store Structure**
```javascript
// src/store.js - Redux store configuration
{
  contact: {
    contacts: [],    // All contacts
    contact: {},     // Single contact for editing
    loading: false,  // Loading state for async operations
    error: null      // Error handling
  }
}
```

### 2. **Actions - What Happens**
```javascript
// src/actions/contactActions.js
export const getContacts = () => async (dispatch) => {
  dispatch({ type: 'GET_CONTACTS_START' });     // Loading starts
  try {
    const response = await axios.get('/users');
    dispatch({ type: 'GET_CONTACTS_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'GET_CONTACTS_ERROR', payload: error.message });
  }
};
```

### 3. **Reducers - How State Changes**
```javascript
// src/reducers/contactReducer.js
export default function (state = initialState, action) {
  switch (action.type) {
    case 'GET_CONTACTS_START':
      return { ...state, loading: true, error: null };
    case 'GET_CONTACTS_SUCCESS':
      return { ...state, contacts: action.payload, loading: false };
    case 'GET_CONTACTS_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}
```

### 4. **Components - How to Use Redux**
```javascript
// Using Redux in React components
import { useSelector, useDispatch } from 'react-redux';

## 🛠️ Tech Stack & Learning Focus

| Technology          | Purpose          | Learning Value                      |
| ------------------- | ---------------- | ----------------------------------- |
| **Redux 5.0.1**     | State Management | Core Redux concepts and patterns    |
| **Redux Thunk**     | Async Operations | Handling API calls and side effects |
| **React 18.3.1**    | UI Framework     | Modern React with hooks             |
| **React Router v6** | Navigation       | Client-side routing                 |
| **Vite**            | Build Tool       | Modern development experience       |

## 📁 Redux-Focused Project Structure

```
src/
├── store.js              # Redux store configuration
├── actions/              # Action creators (async operations)
│   └── contactActions.js # CRUD operations with Redux Thunk
├── reducers/             # State reducers
│   ├── contactReducer.js # Contact state management
│   └── index.js          # Root reducer
└── components/           # React components using Redux
    ├── contacts/         # Contact CRUD components
    └── layout/           # Shared components
```

## 🔄 Redux Patterns Demonstrated

### **1. Loading States**
```javascript
// Actions dispatch loading states
dispatch({ type: 'GET_CONTACTS_START' });

// Components show loading UI
{loading && <LoadingSpinner />}
```

### **2. Error Handling**
```javascript
// Reducers handle errors
case 'GET_CONTACTS_ERROR':
  return { ...state, loading: false, error: action.payload };

// Components display errors
{error && <div className="alert alert-danger">{error}</div>}
```

### **3. Optimistic Updates**
```javascript
// Immediate UI updates with rollback on error
case 'ADD_CONTACT_SUCCESS':
  return { ...state, contacts: [action.payload, ...state.contacts] };
```

### **4. Async Operations with Thunk**
```javascript
// Redux Thunk for async actions
export const addContact = (contact) => async (dispatch) => {
  dispatch({ type: 'ADD_CONTACT_START' });
  try {
    const response = await axios.post('/users', contact);
    dispatch({ type: 'ADD_CONTACT_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'ADD_CONTACT_ERROR', payload: error.message });
  }
};
```

## 🎨 Features for Redux Learning

### **CRUD Operations**
- ✅ **Create** - Add new contacts with Redux state updates
- ✅ **Read** - Fetch and display contacts from Redux store
- ✅ **Update** - Edit contacts with optimistic updates
- ✅ **Delete** - Remove contacts with confirmation modal

### **State Management Patterns**
- ✅ **Loading States** - Show spinners during async operations
- ✅ **Error Handling** - Display errors from Redux state
- ✅ **Form Management** - Controlled components with Redux
- ✅ **Navigation** - Route-based state management

### **Modern Redux Features**
- ✅ **Redux Thunk** - Async action creators
- ✅ **useSelector/useDispatch** - Modern React-Redux hooks
- ✅ **Immutable Updates** - Proper state immutability
- ✅ **Action Types** - Consistent action naming

## 🚀 Available Scripts

```bash
npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run deploy   # Deploy to GitHub Pages
```

## 🌐 Deployment

### GitHub Pages
The application is configured for automatic deployment to GitHub Pages:

```bash
npm run deploy
```

**Live Demo**: [https://devmahmud.github.io/ContactManager](https://devmahmud.github.io/ContactManager)

### Deployment Features
- ✅ **Automatic Build** - Builds before deployment
- ✅ **Client-side Routing** - 404.html handles React Router
- ✅ **Asset Optimization** - Proper base path configuration
- ✅ **Jekyll Bypass** - .nojekyll file prevents Jekyll processing

## 🌐 API Integration

Uses JSONPlaceholder API for realistic data:
- **GET** `/users` - Fetch all contacts
- **POST** `/users` - Create new contact
- **PUT** `/users/:id` - Update contact
- **DELETE** `/users/:id` - Delete contact

## 📖 Learning Resources

### **Redux Concepts Covered**
1. **Store** - Single source of truth
2. **Actions** - Plain objects describing what happened
3. **Reducers** - Pure functions that specify how state changes
4. **Dispatch** - Method to trigger state changes
5. **Selectors** - Functions to extract data from state

### **Advanced Patterns**
1. **Redux Thunk** - Middleware for async operations
2. **Loading States** - Managing async operation states
3. **Error Boundaries** - Handling and displaying errors
4. **Optimistic Updates** - Immediate UI feedback
5. **State Normalization** - Efficient data structure

## 🎯 Learning Objectives

After studying this project, you'll understand:

- ✅ How to structure Redux applications
- ✅ How to handle async operations with Redux Thunk
- ✅ How to manage loading and error states
- ✅ How to integrate Redux with React components
- ✅ How to implement CRUD operations with Redux
- ✅ How to write clean, maintainable Redux code

## 🤝 Contributing

This is a learning project! Feel free to:
- Add new Redux patterns
- Improve error handling
- Add more complex state management scenarios
- Create additional learning examples

## 📝 License

MIT License - Feel free to use this for learning and teaching Redux!

---

**Start your Redux journey today! 🚀**

*This project is designed to be a comprehensive learning resource for Redux. Each component and pattern is implemented with educational value in mind.*

ContactManager

ContactManager Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ContactManager

ContactManager Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README