The Classroom Management Dashboard is a modern, scalable, and role-based frontend application built using React and TypeScript. It provides an intuitive interface for managing educational data such as subjects, departments, and users.
Designed with performance and usability in mind, the dashboard delivers a seamless experience through a clean UI, structured architecture, and dynamic data handling powered by a RESTful backend.
This project demonstrates strong frontend engineering practices including component-based architecture, state management, routing, and API integration.
- 🔐 Authentication & Protected Routes
- 👥 Role-Based Access Control (Admin / Instructor / Student)
- 📚 Subject Management (CRUD, search, filter, pagination)
- 📊 Clean Dashboard UI with sidebar navigation
- ☁️ Cloudinary media handling
- ⚡ Fast and responsive user experience
| Role | Permissions |
|---|---|
| 👨💼 Admin | Full system control |
| 👨🏫 Instructor | Manage subjects & classes |
| 🎓 Student | View assigned content |
- React + TypeScript
- Refine
- React Router
- Axios / Fetch API
- Tailwind CSS
- Cloudinary
npm install
npm run dev- Enter personal information
- Select role (Admin / Instructor / Student)
- Submit registration form
- Enter credentials
- Authenticate user
- Redirect to dashboard
- Overview of system
- Sidebar navigation
- Access to features
- View all subjects
- Search by name
- Filter by department
- Paginated results
- Open detailed view
- Modify data
- Save updates
🔗 https://classroom-frontend-liart.vercel.app/