EduTrack

The operating system for the modern campus.

A full-stack student & department management platform — a keyboard-first React 19 workspace on top of a Spring Boot 3 REST API with JWT authentication.

🌐 Live demo · Quick start · Features · Screenshots · Architecture · API

---

✨ Features

📊 Live overview

Headline metrics, enrollment by department, access composition, recently added records and a Needs attention queue (unassigned students, empty departments) with one-click assignment — every number is derived from real API data.

👥 Student directory

Search by name, email or ID · filter by department & role · sortable columns · pagination · multi-select bulk move & delete · CSV export · filters live in the URL, so every view is shareable.

🏛️ Departments

Colour-coded department cards with enrollment share, member avatars and a detail panel listing every member. Deleting a department with students requires type-to-confirm.

⌘ Keyboard-first

A global command menu (Ctrl/⌘+K) searches students, departments and actions. Shortcuts for everything: / search, C create, G S go to students, ? help.

🔐 Role-aware & session-safe

Signed JWT sessions with BCrypt-hashed passwords. Administrators manage records; students get a read-only workspace. The client enforces the 30-minute token expiry with a warning before sign-out.

🎨 Crafted UI

Hand-built design system — light & dark themes (with a circular reveal), native <dialog> sheets, Popover-API menus, toasts, skeleton loading, empty & error states, and a responsive layout down to phone width.

📸 Screenshots

🚀 Quick start

Prerequisites: Java 21 · Node.js 20+ · (optional) MySQL 8 on port 3306

git clone https://github.com/RIPJAW1316/edutrack.git
cd edutrack

1 · Start the API (port 8081, in-memory H2 database — no setup needed)

cd cs
./mvnw spring-boot:run -Dspring-boot.run.profiles=h2      # Windows: .\mvnw.cmd ...

Drop -Dspring-boot.run.profiles=h2 to use MySQL (studentdb, configured in cs/src/main/resources/application.properties).

2 · Start the web app (port 5173)

cd frontend
npm install
npm run dev

Open http://localhost:5173 — on Windows you can also double-click start-backend.bat then start-frontend.bat.

🔑 Demo accounts

Seeded automatically on first start — or use the one-click demo cards on the sign-in screen.

Role	Email	Password	Access
🛡️ Administrator	[email protected]	admin123	Full read & write
🎓 Student	[email protected]	student123	Read-only

☁️ Deployment

The API runs on Railway (Docker) and the web app on Vercel.

Part	Platform	How
API (cs/)	Railway · Docker	Live at edutrack-api-ripjaw-production.up.railway.app · builds cs/Dockerfile and runs the prod profile (in-memory H2, reseeded on every start). Set JWT_SECRET in the service variables
Web app (frontend/)	Vercel · Vite	Live at edutrack-ripjaw.vercel.app · root directory frontend, env VITE_API_URL=<API base URL>; vercel.json handles SPA routing

The API can also be deployed to Render with the included render.yaml Blueprint.

 

Demo data lives in memory and resets whenever the API restarts.

⌨️ Keyboard shortcuts

Shortcut	Action		Shortcut	Action
Ctrl/⌘ K	Command menu		G O	Go to Overview
/	Focus search		G S	Go to Students
C	Create in current view		G D	Go to Departments
?	Show all shortcuts		G A	Go to Account

🧭 Architecture

flowchart LR
    subgraph Client["🖥️ React 19 SPA · Vite"]
        UI["Pages & design system"] --> DP["Data / Theme / Toast providers"]
        DP --> AX["Axios client<br/>Bearer JWT interceptor"]
    end
    subgraph API["☕ Spring Boot 3.4 · port 8081"]
        SEC["Spring Security<br/>JwtAuthenticationFilter"] --> CTRL["StudentController<br/>DepartmentController"]
        CTRL --> SVC["StudentService · DepartmentService<br/>JwtService (JJWT 0.12)"]
        SVC --> REPO["Spring Data JPA repositories"]
    end
    AX -- "REST / JSON" --> SEC
    REPO --> DB[("MySQL studentdb<br/>or H2 in-memory")]

Layer	Stack
Frontend	React 19, Vite 6, React Router 7 (data router + view transitions), Axios, lucide-react icons, hand-written CSS design system (no UI framework)
Backend	Spring Boot 3.4.3, Java 21, Spring Security 6, JJWT 0.12.6, Spring Data JPA / Hibernate, Bean Validation
Data	MySQL (studentdb) or H2 in-memory via the h2 profile; demo data seeded by DataInitializer

🔌 REST API

Base URL http://localhost:8081 · Postman collection: Student_Management.postman_collection.json

Method	Endpoint	Description
POST	/students/login	Authenticate → { token, id, email, role }
POST	/students/register	Create an account
GET	/students	List students (with department name & code)
GET	/students/{id}	Get one student
GET	/students/department/{departmentId}	Students in a department
PUT	/students/{id}	Update a student
DELETE	/students/{id}	Delete a student
GET	/departments	List departments (with enrolled count)
GET	/departments/{id}	Get one department
POST	/departments	Create a department
PUT	/departments/{id}	Update a department
DELETE	/departments/{id}	Delete a department (students are unassigned, not deleted)

📁 Project structure

edutrack/
├── cs/                              # Spring Boot API
│   └── src/main/java/com/anurag/cs/
│       ├── config/                  # SecurityConfig, JwtAuthenticationFilter, DataInitializer
│       ├── controller/              # StudentController, DepartmentController
│       ├── service/                 # StudentService, DepartmentService, JwtService
│       ├── entity/ · dto/ · enums/ · repository/ · exception/
├── frontend/                        # React 19 + Vite SPA
│   └── src/
│       ├── api.js                   # Axios client + JWT interceptors
│       ├── layout/                  # App shell, command menu, shortcuts
│       ├── pages/                   # Overview, Students, Departments, Account, auth/
│       ├── components/              # Dialog, Menu, side sheets, charts, UI primitives
│       ├── providers/               # Theme, toast and data providers
│       ├── lib/                     # Session (JWT), hotkeys, formatting
│       └── styles/                  # Design tokens, base, components, layouts
├── docs/screenshots/
├── start-backend.bat · start-frontend.bat
└── Student_Management.postman_collection.json

📄 Project documents: Project abstract · Architecture flowchart

🛣️ Roadmap

• Enforce roles server-side (@PreAuthorize) and require a valid JWT on protected routes — role checks currently live in the UI
• Return 400 for validation errors and add a unique constraint on student email
• Move the JWT signing key and DB credentials to environment variables
• Restrict self-registration to the STUDENT role
• Allow un-assigning a student's department via PUT /students/{id}

---