NexGenStudioDev/ciitm-frontend
Build Full Student Dashboard with Chart.js, Announcements, and Payment Data
Ouverte
#195 ouverte le 17 juil. 2025
Ciitm FrontendONLY_FOR_NEW_CONTRIBUTORSReactResponsiveUi Updateatomic-designenhancementfeature-requestgood first issuehacktoberfesthelp wantedonlydust-wave
Métriques du dépôt
- Stars
- (9 étoiles)
- Métriques de merge PR
- (Métriques PR en attente)
Description
Student Dashboard Feature
This project now includes a Student Dashboard that provides key academic and financial insights through interactive charts and informative sections.
Features
- 📢 Announcements: Display important student notifications.
- 💳 Payment Status: Doughnut chart showing paid vs pending fees.
- 📈 GPA Progress: Line chart visualizing GPA across semesters.
- 📅 Upcoming Deadlines: List of important academic deadlines.
- 🖥️ Responsive Layout: Optimized for desktops, tablets, and mobile devices.
Technologies Used
- React.js
- Chart.js with react-chartjs-2
- CSS Grid and Flexbox for layout
Getting Started
- Ensure you have installed the required packages:
npm install chart.js react-chartjs-2
- Import and use the dashboard components in your app.
- Customize the data inside the chart components or fetch it dynamically as needed.
Example Data
// PaymentChart Data
labels: ['Paid', 'Pending'];
data: [80, 20];
// GPAChart Data
labels: ['Semester 1', 'Semester 2', 'Semester 3', 'Semester 4'];
data: [3.2, 3.4, 3.6, 3.8];