Redux Toolkit Albums & Photos Management Application

📖 Overview

This project demonstrates a state-of-the-art Albums and Photos Management Application using Redux Toolkit Async Thunks and Redux Toolkit Query. The application allows users to seamlessly manage users, albums, and photos with a responsive UI powered by React and styled with Tailwind CSS.

Built with a focus on clean architecture, efficient state management, and modern development practices, this project showcases the ability to design scalable and high-performing front-end applications.

🛠️ Features

Users Management

• Fetch a list of users from the server.
• Add new users with dynamic data generation using @faker-js/faker.
• Remove existing users with API integration.

Albums Management

• View albums associated with specific users.
• Add new albums for users with generated names.
• Delete albums while maintaining state consistency.

Photos Management

• Fetch photos for specific albums.
• Add new photos with realistic images generated by Faker.
• Delete photos with real-time updates to the UI.

Global State Management

• Advanced usage of Redux Toolkit for managing application state.
• Integration of Async Thunks for side effects like API requests.
• RTK Query for efficient data fetching, caching, and auto-updating.
• Comprehensive error handling and loading indicators.

🚀 Technologies Used

Frontend

• React.js: Component-based library for building the UI.
• Tailwind CSS: Utility-first CSS framework for quick styling.

State Management

• Redux Toolkit: Simplified and structured state management.
• RTK Query: For optimized data fetching and caching.

Backend Mock

• Local JSON Server hosted at http://localhost:3005.

Libraries

• Axios: For API calls.
• @faker-js/faker: For generating dynamic mock data.

📂 Project Structure

src/
├── apis/ # RTK Query API definitions
├── components/ # UI components like UsersList
├── slices/ # Redux slices for state management
├── store/ # Redux store configuration
├── thunks/ # Async Thunks for user-related operations
├── App.js # Main App component
├── index.js # Entry point
└── index.css # Tailwind CSS integration

🎯 How It Works

1. Users Management:

   • Fetches data from the JSON server.
   • Allows adding or removing users via Redux Thunks.

2. Albums:

   • Linked to specific users.
   • Enables adding or removing albums through RTK Query mutations.

3. Photos:

   • Fetched based on albums.
   • Supports adding/removing photos dynamically with RTK Query.