A modern Admin Dashboard built with React, TypeScript, Redux Toolkit, GraphQL, and TailwindCSS. This project provides an intuitive UI for managing users, viewing reports, and handling administrative settings.
⚛️ React.js - Frontend framework
💻 TypeScript - Type-safe development
🎨 TailwindCSS - Modern styling
🔄 GraphQL + Apollo Client - API communication
🌍 React Router - Client-side routing
🗄️ Redux Toolkit - State management
🧪 Jest + React Testing Library - Unit testing
The Admin Dashboard is a comprehensive tool designed for managing user data, viewing analytical reports, and handling administrative settings. This project allows administrators to securely log in, manage users, generate reports, and customize system settings with ease.
- Authentication & Authorization
🔐 Secure login/logout system
🔄 Token-based authentication using Redux Toolkit
👥 Role-based access control
- User Management
📋 View, add, update, and delete users
🔎 Filter and search users by name, email, or role
🏷️ Assign roles and permissions
- Dashboard & Analytics
📊 View key performance indicators (KPIs)
📉 Graphical representation of user engagement and activity
⏳ Filter reports by daily, weekly, or monthly data
- Reports Section
📑 Generate and download reports in CSV format
📊 Interactive data visualization using charts
🔍 Advanced filtering options for reports
- Settings & Customization
🎨 Dark Mode / Light Mode toggle
⚙️ Admin profile settings
🔑 Manage API keys and system preferences
| Path | Description |
|---|---|
/ |
Login Page |
/dashboard |
Admin Dashboard Page |
/users |
User Management Page |
/reports |
Reports & Analytics |
/settings |
Admin Settings |
Clone the repository:
git clone https://github.com/frau-azadeh/admin-dashboard.git
cd admin-dashboard
Install dependencies:
npm install
Start the development server:
npm start
Contributions are welcome! Feel free to submit a pull request or open an issue.
Developed with 🌻 by Azadeh Sharifi Soltani Feel free to connect and collaborate!