Academic Management Dashboard
You need to build a [Link]-based academic management dashboard that provides an
interactive and user-friendly interface for administrators and faculty members to view,
manage, and analyze student performance and course data.
Requirements
1. Dashboard Features
Display a summary of:
● Total students, courses, and faculty members
● Top-ranking students (sorted by GPA)
d
● Most popular courses (sorted by enrollment count)
Lt
Interactive charts:
● Bar chart for course enrollments
s
● Leaderboard table for top students
on
Use ApexCharts for analytics visualization.
2. Student & Course Management
ti
Students
lu
● List of students with:
○ Search functionality
So
○ Filters (course, year, etc.)
○ Pagination
● Student profile page showing:
in
○ Enrolled courses
Ga
○ Grades and progress summary
● Create and update student information using reusable forms.
○ Forms must support dynamic input fields (e.g., adding multiple grades,
custom attributes) using a + action.
○ Proper form validation is required.
Courses
● Course list displaying:
○ Assigned faculty members
○ Enrollment numbers
● Create and update courses using reusable forms.
○ Support dynamic inputs such as multiple instructors or metadata fields.
○ Validation must be applied.
3. Faculty Panel
● Assign students to courses.
d
● Add or update student grades.
Lt
● Support bulk actions (e.g., bulk update of course assignees or student enrollments).
○ Bulk operations should use dynamic forms where inputs can be added or
removed as needed.
s
○ Validation is required for all inputs.
on
● Role-based access is optional.
4. Reporting & Exporting
ti
View reports on:
● Course enrollments over time
lu
● Top-performing students per course or institute
So
Export report data in CSV (Excel-compatible) format.
5. Mock Data & API Handling
Use JSON Server to create a local mock API for:
in
● Students
Ga
● Courses
● Faculty
● Grades
CRUD behavior:
● Create, Update, and Delete actions should immediately reflect in the UI.
● Changes should feel like they are affecting a real database.
Important constraint:
● After a page refresh, the data must reset to the initial state from [Link].
● Permanent persistence is not required.
● Writing back to [Link] is not expected.
Optimistic UI updates should be used where applicable.
● React Query is optional.
6. UI / UX Considerations
● Use React with a UI framework:
○ Material UI, Ant Design, or Tailwind CSS
● Responsive design for desktop and mobile
d
7. Technical Expectations
Lt
● Use [Link] (latest version)
● API handling using Fetch, Axios, or Apollo Client
s
● Component-based architecture
on
● Implement search, filtering, and pagination
● Use ApexCharts for analytics visualization
ti
API Options
lu
● JSON Server (Local Mock API)
● JSON Placeholder (basic mock data)
So
● RapidAPI academic-related APIs
● Custom REST or GraphQL API using [Link] or [Link]
Submission Instructions
in
● Submit the GitHub repository link.
Ga
● Submit a live deployment link (Vercel, Netlify, or equivalent).
● Include a README file with:
○ Project overview
○ Setup instructions
○ Explanation of architecture and decisions
Please note that vibe coding is discouraged. A clear project structure and best practices are
expected throughout the submission.