https://github.com/developer-25/dashboard
React ,Tailwind CSS and React Charts
https://github.com/developer-25/dashboard
reactcharts reactjs tailwindcss
Last synced: 8 months ago
JSON representation
React ,Tailwind CSS and React Charts
- Host: GitHub
- URL: https://github.com/developer-25/dashboard
- Owner: developer-25
- Created: 2025-05-06T05:46:20.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T06:07:10.000Z (8 months ago)
- Last Synced: 2025-05-07T03:14:57.053Z (8 months ago)
- Topics: reactcharts, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://6819a59809d045bf5d912e36--jazzy-tiramisu-ab2a03.netlify.app/
- Size: 182 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🚀 User Insights Dashboard
This is a modern and interactive React-based dashboard that displays user data in a table along with insightful visualizations using Recharts. It features global search, pagination, sorting, and charts like Bar, Pie, Line, and Area charts.
✨ Features
🔍 Global Search — Filter users with ease.
🔢 Pagination — Navigate through pages of user data.
🔼 Sortable Columns — Click on column headers to sort.
📊 Bar Chart — Visualize total revenue per user.
🧁 Pie Chart — View distribution of user roles.
📈 Line Chart — Track revenue growth over time.
🌱 Area Chart — See user joins over time.
📦 Technologies Used
React (with Hooks)
react-table — For creating dynamic, sortable, paginated tables.
recharts — For data visualizations (charts and graphs).
Tailwind CSS — For modern, responsive styling.
🛠️ Getting Started
Prerequisites
Node.js & npm installed
Installation
Clone the repository:
bash
Copy
Edit
git clone https://github.com/developer-25/Dashborad.git
cd user-insights-dashboard
Install dependencies:
bash
Copy
Edit
npm install
Start the development server:
bash
Copy
Edit
npm start
Open https://6819a59809d045bf5d912e36--jazzy-tiramisu-ab2a03.netlify.app/ in your browser.
📁 Project Structure
App.js — Main component that renders the table and charts.
App.css — Custom styles using Tailwind CSS.
mockData — Sample user data (name, email, role, join date, revenue).
📄 License
This project is open-source and free to use under the MIT License.