A responsive, interactive Dashboard built with Next.js, TypeScript, and Tailwind CSS for tracking and updating user test scores, percentiles, and insights visually.
Deployed Link [https://whatbytes-assignment-delta.vercel.app/]
A modern dashboard interface for administrators to view, analyze, and update skill test results using dynamic graphs and visuals.
- QuickStats – View live stats including rank, percentile, and score.
- TestCard – Provides test overview and option to update stats.
- UpdateForm Modal – Popup form to update rank, percentile, and score with inline validation and toast confirmation.
- QuestionAnalysis – Dynamically updating score tracker with Pie Chart using
recharts. - ComparisonGraph – Line graph using
TinyLineChartfromrechartsto show percentile vs average comparison. - SyllabusAnalysis – Displays syllabus breakdown (placeholder for further development).
- Left MenuBar – Fixed sidebar with responsive icons and section navigation.
- Navbar – Simple top navigation bar.
- Next.js 14 (App Router)
- React 18
- TypeScript
- Tailwind CSS
- Recharts (Charts and Graphs)
- React-Hot-Toast (Notifications)
- Responsive Layouts (using
flex,media queries)
- Opens in modal popup.
- Has inline field validation.
- Updates state and reflects immediately in all connected components (QuickStats, PieChart, Line Graph).
- Shows toast confirmation on successful update.
- Pie Chart in
QuestionAnalysisreflects updated score. - Line Chart in
ComparisonGraphreflects updated percentile vs average comparison. - Both charts animate on data change.
- Contains Dashboard, Skill Test, and Internship.
- Responsive: only icons shown on small screens.
- Fixed to the left side across all pages.
- Hover effects for interactivity.
git clone https://github.com/your-username/your-repo-name.git
cd dashboard
npm install
npm run dev