π 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.