**Dynamo Dashboard ** A modern, responsive frontend for Dynamo, a dashboard application that provides insightful test results, scores, and advanced visualizations. This project focuses on delivering an intuitive and interactive user experience with advanced data representation and subject-based insights.
**Features **
- User Results Summary
Display test results with total marks, obtained marks, and accuracy percentage.
Provide actionable prompts like "Practice More" and "Revisit Paper."
- Subject Insights
Highlight subject-wise performance and understanding.
Use color-coded tags for quick comprehension.
- Interactive Charts
Visualize data using bar charts and progress bars for better comparison and understanding.
Present response time and time taken with graphical meters.
- Comparison Metrics
Include accuracy comparison across multiple parameters.
Show approach data (e.g., based on facts, analysis, elimination, guesses).
- Suggestions & Tips
Provide actionable suggestions categorized by difficulty (easy, medium, hard).
**Technologies Used ** Core Frameworks and Libraries
React.js : Core framework for building the application.
Tailwind CSS: For responsive and modern styling. ** Material UI (MUI):** Pre-built React components for an elegant UI.
React-Icons: Icon library for adding visual enhancements.
**Data Visualization ** Chart.js: For creating responsive and interactive charts and graphs.
Responsiveness
Fully responsive design to adapt to different screen sizes and devices.
Installation
Follow the steps below to set up the project locally:
Prerequisites
Node.js (v14 or above)
npm or yarn
Steps :
Clone the repository:
git clone 'https://github.com/aaradhayasingh811/First_Bench_frontend.git'
Navigate to the project directory:
cd first-bench-dashboard
Install dependencies:
npm install
yarn install
Start the development server:
npm run dev
yarn dev
Open http://localhost:5176 to view it in your browser.