NepalEdu - School Administration Dashboard

An educational institution admin dashboard specifically designed for Nepalese schools offering Grades 1–10. This application provides a comprehensive interface for school administrators to manage students, track admissions, and organize school events in the calendar.

---

🚀 Features

• Authentication System: Secure login for school administrators
• Dashboard: Summary cards and analytics charts showing student statistics and trends
• Student Management: Complete CRUD operations with filtering and search capabilities
• Calendar System: School event management calendar with different event types
• Dark/Light Mode: Theme switching with localStorage persistence
• Responsive Design: Fully optimized for mobile, tablet, and desktop devices

---

🛠️ Tech Stack

• React 18 + TypeScript – Modern component-based UI
• React Router v6.4+ (Data Router API) – Data routing mode with nested layouts and code-splitting
• Vite – Lightning-fast dev server and build tool
• Tailwind CSS – Utility-first styling
• Zustand – Lightweight state management
• TanStack Query (React Query) – For efficient server state handling and caching
• Axios + Axios Mock Adapter – Simulated backend APIs
• Recharts – Beautiful data visualizations
• React Hot Toast – Minimal, customizable notifications

---

🧭 Routing Approach

This project uses the modern createBrowserRouter API from React Router v6.4+, which enables:

• Nested routes and layouts (<Layout />)
• Code-splitting via React.lazy and <Suspense>
• Route-level redirection (e.g. redirect / to /dashboard)
• Centralized routing setup in routes.tsx for maintainability

💡 You can find all route configurations in src/routes.tsx.

---

🧪 Mock API Endpoints

The application uses simulated endpoints for demo purposes:

Endpoint	Description
POST /api/login	User authentication
GET /api/stats	Dashboard summary stats
GET /api/admissions	Admissions trend data
GET /api/class-occupancy	Grade-wise student distribution
GET/POST/PUT/DELETE /students	Full CRUD for students
GET/POST/PUT/DELETE /events	Calendar event management

---

🚀 Running the Project

# 1. Clone the repo
git clone https://github.com/darshanbajgain/edu-insights-dashboard.git

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev

Then open your browser at the URL printed in your terminal (usually http://localhost:5173).

---

🔐 Login Credentials

Email	Password
[email protected]	admin123

---

🖼️ Screenshot

\

---

📌 Development Notes

• ✅ Uses React.lazy with Suspense to enable code-splitting and better performance
• ✅ Fully typed using TypeScript for scalability and maintainability
• ✅ Uses modern routing with createBrowserRouter for nested layouts and route-based lazy loading
• ✅ Query caching and background refetching via Tanstack Query
• ✅ Mock APIs allow front-end development independent of a backend

---