Skip to content

developer-25/Dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ 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.