React Dashboard Project

Hey there! This is a React dashboard I built for managing posts, users, and albums. It's got a clean interface and works great on both desktop and mobile devices.

Setup Instructions

1. Navigate to the project folder cd dashboard-project

2. Install the required packages npm install

3. Start the development server npm start

4. Open your browser The app should automatically open at http://localhost:3000. If it doesn't, just type that URL into your browser.

What This Dashboard Can Do

Here's what I've built into this project:

Main Features

• Dashboard Overview - See quick stats about posts, users, and albums all in one place
• Posts Management - Create, edit, delete, and search through blog posts
• Users Directory - Browse through user profiles with their contact info and company details
• Albums Gallery - View photo albums organized by users
• Responsive Design - Works smoothly on phones, tablets, and desktop computers

User Experience Stuff

• Clean, modern interface that's easy on the eyes
• Smooth animations when you click around (nothing too flashy)
• Search functionality that actually works well
• Mobile-friendly sidebar that collapses when you need more screen space
• Notification system to keep you updated

Technical Features

• Built with React 18 for solid performance
• Uses Tailwind CSS for styling (makes it easy to customize)
• Axios for handling API requests
• Context API for managing app state
• Responsive design that adapts to any screen size

API Endpoints Used

This project connects to JSONPlaceholder (a free testing API) to get realistic data. Here are all the endpoints I'm using:

Posts API

• GET /posts - Fetch all blog posts
• GET /posts/{id} - Get a specific post
• GET /posts?userId={userId} - Get posts by a specific user
• GET /posts?_page={page}&_limit={limit} - Get posts with pagination
• POST /posts - Create a new post
• PUT /posts/{id} - Update an existing post
• DELETE /posts/{id} - Delete a post

Users API

• GET /users - Get all users
• GET /users/{id} - Get a specific user's details
• POST /users - Add a new user
• PUT /users/{id} - Update user information
• DELETE /users/{id} - Remove a user

Albums API

• GET /albums - Fetch all photo albums
• GET /albums/{id} - Get a specific album
• GET /albums?userId={userId} - Get albums by user
• POST /albums - Create a new album
• PUT /albums/{id} - Update album details
• DELETE /albums/{id} - Delete an album

Comments API

• GET /comments - Get all comments
• GET /comments?postId={postId} - Get comments for a specific post
• POST /comments - Add a new comment

Photos API

• GET /photos - Fetch all photos
• GET /photos?albumId={albumId} - Get photos from a specific album

---

By : Marwan Mokhtar ❤️