University of Peradeniya

|

Department of Computer Engineering

Streamlining Research & Operations

CV & AI Lab System

A unified web platform combining a dynamic public research portfolio with a secure internal management system for equipment bookings and GPU resource scheduling.

React 19 Vite Node.js Express v5 PostgreSQL JWT + OAuth Nodemailer Axios

Introduction

Why this project exists

The Problem

The Computer Vision & AI Lab at the University of Peradeniya relied on manual logbooks and spreadsheets for equipment tracking, booking requests, and resource allocation. High-value assets — drones, depth cameras, GPU servers — had no centralized availability system, leading to double-bookings, lost requests, and poor visibility of lab activities.

Our Solution

We built a dual-purpose web platform that combines a beautiful public portal (showcasing research, publications, team profiles, and news) with a secure internal management system featuring role-based dashboards, automated equipment booking workflows, GPU scheduling, email OTP verification, and real-time analytics.

Application Screenshots

Live captures from the deployed platform

Homepage Hero Section
Homepage — Hero & Navigation
Research Showcase
Research Projects Showcase
Projects Page
Projects & Team Profiles
Publications Page
Publications
News & Events
News & Events
About Section
About the Lab
Contact Page
Contact Page
Student Portal
Student Portal Dashboard
Admin Portal
Admin Portal Dashboard

Platform Features

Dual-purpose platform for outreach and operations

Public Portal

8 dedicated pages — Home, Research, Publications, People, Facilities, Services, News & Events, Contact — dynamically rendered from the database.

Equipment Booking

End-to-end booking workflow: students request equipment, officers review & approve/reject, automated email notifications at every stage.

GPU Scheduling

Job slot management for NVIDIA A100/H100 GPU clusters with time-slot reservation and conflict detection.

Role-Based Access (RBAC)

Four distinct roles — Student, Officer, Staff, Admin — each with dedicated dashboards and permission-gated API endpoints.

Secure Authentication

JWT-based session management, Google OAuth single sign-on, and email OTP verification for account registration and password recovery.

Analytics Dashboard

Admin-only analytics panel with booking metrics, resource utilization trends, and user activity insights.

Solution Architecture

Three-tier client-server architecture deployed across cloud platforms

Frontend

React 19 + Vite
Public Portal · Internal Portals · SPA Router
Deployed on Vercel
REST API (Axios)

Backend

Node.js + Express v5
JWT + OAuth · Nodemailer · RBAC Middleware
Deployed on Northflank
SQL Queries (pg)

Database

PostgreSQL
Users · Inventory · Reservations · News · Projects · People
Hosted on Neon (serverless)

Database Design

8 relational tables powering the entire system

users

Stores accounts with hashed passwords and roles (student, officer, staff, admin).

inventory

Equipment catalog — names, categories, specifications, fees, availability status, and images.

reservations

Booking requests with user references, time slots, purpose, approval status, and admin notes.

people

Lab member profiles — staff and students, with titles, departments, and research areas.

news

Lab announcements, achievements, and events with rich media support.

projects

Research projects with leads, supervisors, team members, tags, status, and demo links.

otp_verifications

Temporary OTP storage for the registration flow with expiry timestamps.

password_reset_otp

Secure password reset tokens linked to email addresses with time-limited validity.

REST API Endpoints

15+ endpoints across 7 route groups

/api/auth

POST /register/initiate
POST /register/verify
POST /login
POST /google
POST /forgot-password/reset

/api/items

GET / — List all equipment
POST / — Add item (admin)
PUT /:id — Update item
DELETE /:id — Delete item

/api/bookings

GET / — View bookings
POST / — Create booking
PUT /:id/status — Approve/Reject

More Routes

GET /api/users — List users
GET /api/people — Lab profiles
GET /api/news — News & events
GET /api/analytics — Metrics

Project Structure

Organized codebase for scalability and maintainability.

System/ ├── backend/ # Node.js + Express API │ ├── config/ # PostgreSQL pool connection │ ├── controllers/ # auth, booking, inventory, users, news, people, analytics │ ├── middleware/ # JWT verification middleware │ ├── routes/ # 7 route modules │ ├── services/ # OTP email & notification service │ ├── sql/ # schema.sql (8 tables + seed data) │ └── index.js # Express entry point (port 5000) └── frontend/ # React + Vite SPA ├── src/ │ ├── components/ # Layout, Modals, UI primitives │ ├── pages/ # 11 public pages │ ├── portal/ # Admin, Officer, Staff, Student dashboards │ ├── services/ # Axios API wrappers │ ├── data/ # Static lab data & menu definitions │ └── styles/ # CSS theming & design tokens └── App.jsx # Root component & state router

Testing

Comprehensive validation across all layers

Backend API Testing

All 15+ REST endpoints tested via test scripts — authentication flows, booking CRUD, inventory management, OTP delivery, and role-based access validation.

Frontend Testing

Role-based routing tested for all four user types. Protected routes verified. Booking forms validated for date conflicts. Google OAuth end-to-end tested. Responsive layouts across desktop and mobile.

Database Testing

Schema correctness verified against Neon PostgreSQL. Seed scripts tested for conflict-free population. SSL connections validated with sslmode=require.

Team Bug Slayer

E/23 Batch · Department of Computer Engineering

M.R.A Rahman

E/23/282

e23282@eng.pdn.ac.lk

A Piraveen

E/23/273

e23273@eng.pdn.ac.lk

A Rajeeth

E/23/289

e23289@eng.pdn.ac.lk

M Tharsika

E/23/396

e23396@eng.pdn.ac.lk