Users Management

A modern application to manage users using Redux Toolkit for robust global state management and Axios for API communication, built with React 19 and Vite.

🚀 Features

📊 Users Management

• User Directory: Browse list of users through responsive cards.
• Detailed Profiles: Access information for each user, including contact details, company information, and address.
• Map Integration: View user locations directly on the map with integrated Google Maps.

🎨 UI & UX

• Dark/Light Mode: Full support for dark and light themes, persisted via localStorage and system preferences.
• Responsive Design: Mobile-first approach with a dedicated drawer menu for smaller screens.
• Custom Styling: Advanced styling using Sass (SCSS) and CSS variables synchronized with the MUI theme.

🛠️ Tech Stack

• Core: React 19 + TypeScript
• Build Tool: Vite
• Redux: Redux Toolkit (Slices, Async Thunks) for robust global state management and asynchronous API data handling.
• API Client: Axios for handling HTTP requests.
• Data Source: JSONPlaceholder as the external mock REST API.
• Routing: React Router 7

📁 Project Structure

src/
├── assets/             # Static assets (images, SVGs)
├── components/         # Reusable UI components (Navbar, UserCard, etc.)
├── pages/              # Main pages components (Home, Users, 404)
├── routes/             # Route configurations
├── models/             # TypeScript interfaces and data definitions (User, Address, etc.)
├── store/              # Redux logic, including store configuration and feature slices
└── main.tsx            # Application entry point

⚡ Getting Started

1. Clone and Install:

   npm install

2. Run Development Server:

   npm run dev

3. Build for Production:

   npm run build

🛠️ Development Scripts

Code Formatting

To maintain a consistent code style across the project:

• Check format: npx prettier --check .
• Fix format: npx prettier --write .

The project uses Prettier with a custom configuration defined in .prettierrc.