https://github.com/prathamesh-pichkate/user-management-dashboard
https://github.com/prathamesh-pichkate/user-management-dashboard
jsonplaceholder-api react-redux react-router reactjs
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/prathamesh-pichkate/user-management-dashboard
- Owner: prathamesh-pichkate
- Created: 2025-01-29T14:15:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-30T06:25:19.000Z (over 1 year ago)
- Last Synced: 2025-12-27T18:42:29.342Z (5 months ago)
- Topics: jsonplaceholder-api, react-redux, react-router, reactjs
- Language: JavaScript
- Homepage: https://user-management-dashboard-beta.vercel.app
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# User-Management-Dashboard
## 📌 Objective
The goal of this project is to develop a simple web application where users can **view, add, edit, and delete user details**, interacting with a mock backend API. This application simulates CRUD operations on user data using the **JSONPlaceholder API**.
## 🚀 Technologies Used
- **React 19** – For building the user interface and managing state.
- **React Redux** – For state management and handling user data.
- **Tailwind CSS v4** – For styling and responsiveness.
- **Flowbite** – A Tailwind-based component library for UI enhancements.
- **Axios** – For making HTTP requests to the backend API.
- **React Router DOM** – For handling navigation within the app.
- **React Toastify** - For notification
---
## ✨ Features
### 🔹 View Users
- Displays a list of users fetched from the **JSONPlaceholder API** (`/users` endpoint).
### 🔹 Add User
- A form to add a new user.
- Sends a **POST** request to `/users` (simulated, does not persist).
### 🔹 Edit User
- Allows users to edit existing user details.
### 🔹 Delete User
- Deletes a user via a **DELETE** request to `/users/:id`.
### 🔹 Responsive Design
- Fully responsive using **Tailwind CSS**, optimized for mobile & desktop.
### 🔹 Error Handling
- Displays error messages if API requests fail.
### 🔹 Show More Users
- Initially loads 10 users, with a **Show More** button to fetch additional users.
---
## 🛠️ Getting Started
### ✅ Prerequisites
Ensure you have the following installed:
- **Node.js** (>= 16.x)
- **npm**
### 📥 Installation
Clone the repository:
```sh
git clone https://github.com/prathamesh-pichkate/User-Management-Dashboard.git
cd user-management-dashboard
```
Move to the Frontend Folder:
```sh
cd frontend
```
Install the packages and run
```sh
npm install
```
Run App
```sh
npm run dev
```
---
## ⚠️ Challenges & Improvements
### 🛠️ Challenges Faced
- **React 19 Updates** – Faced challenges adapting to **React 19** due to breaking changes and updated APIs.
- **Flowbite Compatibility** – Encountered issues with **Flowbite** as several updates changed the component structures.
- **Mock API Limitations** – Since **JSONPlaceholder** does not persist changes, managing state properly to simulate add/edit/delete operations was challenging.
### 🔮 Improvements for Future
- **Use MERN Stack** – Given more time, I would integrate a **MongoDB, Express, React, and Node.js (MERN)** backend for real **CRUD operations**.
- **Pagination Support** – Implement pagination to improve performance when handling large datasets.
- **Enhanced UI** – Improve UI/UX with animations and additional interactive components.
- **DarkMode** - I would i worked on the dark mode and light mode.