User Directory Dashboard

A modern, responsive user directory dashboard built with React, Redux Toolkit, and Tailwind CSS. Features a beautiful UI with dark/light theme toggle, user search, favorites, and detailed user profiles.

✨ Features

• 📱 Fully Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• 🌙 Dark/Light Theme Toggle - Switch between themes with persistent preference
• 🔍 Real-time Search - Search users by name or email with instant filtering
• ⭐ Favorites System - Mark users as favorites with localStorage persistence
• 📄 Pagination - Browse through users with smooth pagination controls
• 👤 Detailed User Profiles - View comprehensive user information
• 🎨 Modern UI/UX - Beautiful gradient backgrounds and smooth animations
• ⚡ Fast Performance - Built with Vite for lightning-fast development and builds
• 🔄 Redux State Management - Centralized state management with Redux Toolkit

🛠️ Tech Stack

• Frontend Framework: React 19.1.1
• State Management: Redux Toolkit 2.8.2
• Styling: Tailwind CSS 4.1.12
• Build Tool: Vite 7.1.2
• Routing: React Router DOM 7.8.1
• API: DummyJSON (https://dummyjson.com/users)

🚀 Installation

1. Clone the repository

   git clone https://github.com/yourusername/user-directory-dashboard.git
   cd user-directory-dashboard

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the application.

📖 Usage

Main Dashboard

• View Users: Browse through the user list with pagination
• Search: Use the search bar to filter users by name or email
• Favorites: Click the star icon to add/remove users from favorites
• Theme Toggle: Click the theme button to switch between dark and light modes

User Details

• View Profile: Click on any user card to view detailed information
• User Information: See age, gender, company, title, phone, and email
• Navigation: Use the "Back to List" button to return to the main dashboard

Responsive Design

• Desktop: 2-column grid layout with full feature access
• Tablet: Adaptive layout with optimized spacing
• Mobile: Single-column layout with touch-friendly controls

🎯 Key Features Explained

State Management

The app uses Redux Toolkit for efficient state management:

• User Slice: Manages user data, loading states, and pagination
• Theme Slice: Handles dark/light theme preferences
• Async Thunks: Fetches user data from the DummyJSON API

Responsive Design

Built with Tailwind CSS for a mobile-first approach:

• Grid System: Responsive grid that adapts to screen size
• Typography: Scalable text sizes for different devices
• Spacing: Consistent spacing that works across all screen sizes

Performance Optimizations

• Lazy Loading: Components load only when needed
• Efficient Rendering: Optimized re-renders with React hooks
• Fast Builds: Vite provides instant hot module replacement

📁 Project Structure

user-directory-dashboard/
├── public/
├── src/
│   ├── features/
│   │   ├── userSlice.js      # Redux slice for user management
│   │   └── themeSlice.js     # Redux slice for theme management
│   ├── App.jsx               # Main application component
│   ├── main.jsx              # Application entry point
│   ├── index.css             # Global styles and Tailwind imports
│   └── store.js              # Redux store configuration
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md

🎨 Customization

Styling

The app uses Tailwind CSS for styling. You can customize:

• Colors: Modify the color scheme in tailwind.config.js
• Spacing: Adjust padding and margins in component classes
• Typography: Change font sizes and weights as needed

API Integration

The app currently uses DummyJSON API. To integrate with your own API:

1. Update the fetchUsers thunk in src/features/userSlice.js
2. Modify the data structure to match your API response
3. Update the user mapping in src/App.jsx

🚀 Deployment

Build for Production

npm run build

Deploy to Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts to deploy

Deploy to Netlify

1. Build the project: npm run build
2. Drag the dist folder to Netlify
3. Configure your domain and settings

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• DummyJSON for providing the user data API
• Tailwind CSS for the utility-first CSS framework
• Redux Toolkit for simplified Redux development
• React Router for client-side routing

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Contact the maintainers
• Check the documentation

---

Made with ❤️ using React, Redux Toolkit, and Tailwind CSS