Computer Vision & AI Lab System

Team

Table of Contents

  1. Introduction
  2. Solution Architecture
  3. Software Designs
  4. Testing
  5. Conclusion
  6. Links
  7. Appendix A: Use Case Diagram
  8. Appendix B: ER Diagram
  9. Appendix C: Project Timeline / Gantt Chart

Introduction

This project implements a comprehensive web platform for the Computer Vision and AI Lab at the University of Peradeniya, designed to streamline both public outreach and internal operations.

The system serves two distinct purposes:

  1. External Visibility: A dynamic public portal showcasing the lab’s latest research, publications, and team achievements to the academic community and industry collaborators.
  2. Internal Operations: A secure, role-based management dashboard that digitizes daily workflows — replacing manual logbooks with automated systems for equipment tracking and GPU resource allocation.

Key Features

Public Portal

Internal Management Portal

Core System Capabilities

Solution Architecture

The system follows a decoupled three-tier client-server architecture:

┌────────────────────────────────────────────────────────────┐
│                    FRONTEND  (React + Vite)                │
│                                                            │
│  ┌──────────────────┐        ┌──────────────────────────┐  │
│  │   Public Portal  │        │    Internal Portals      │  │
│  │ Home / Research  │        │  Student / Officer /     │  │
│  │ People / News …  │        │  Staff / Admin           │  │
│  └────────┬─────────┘        └───────────┬──────────────┘  │
└───────────┼──────────────────────────────┼─────────────────┘
            │         REST API (Axios)      │
            ▼                              ▼
┌──────────────────────────────────────────────────────────┐
│                BACKEND  (Node.js + Express)              │
│                                                          │
│  /api/auth    /api/items    /api/bookings                │
│  /api/users   /api/people   /api/news    /api/analytics  │
│                                                          │
│  ┌──────────────┐  ┌──────────────┐  ┌────────────────┐  │
│  │  JWT + OAuth │  │  Nodemailer  │  │  File Uploads  │  │
│  └──────────────┘  └──────────────┘  └────────────────┘  │
└────────────────────────────┬─────────────────────────────┘
                             │
                             ▼
┌──────────────────────────────────────────────────────────┐
│              DATABASE  (PostgreSQL via Neon)              │
│     Users · Inventory · Bookings · News · People         │
└──────────────────────────────────────────────────────────┘

Deployment Architecture

Layer Platform Purpose
Database Neon Serverless PostgreSQL — always-on, auto-scaling
Backend Northflank Node.js API server containerized deployment
Frontend Vercel React + Vite static site with global CDN

Software Designs

Technology Stack

Component Technology Purpose
Frontend React 19 + Vite Interactive SPA for all portals and public pages
Routing React Router DOM v7 Client-side navigation between sections
Backend Node.js + Express v5 REST API server, authentication, business logic
Database PostgreSQL (via pg) Relational storage for users, bookings, inventory
Auth JWT + Google OAuth Secure session management and single sign-on
Email Nodemailer OTP delivery and notification emails
Styling Vanilla CSS + CSS Variables Theming and component-level styles
HTTP Client Axios Frontend-to-backend API communication
File Handling XLSX Spreadsheet export for data and reports

Project Structure

e23-co2060-Computer-vision-and-AI-lab-system/
├── code/
│   ├── backend/
│   │   ├── config/           # Database connection (pg pool)
│   │   ├── controllers/      # Route handler logic
│   │   ├── middleware/       # JWT authentication middleware
│   │   ├── routes/           # Express route definitions
│   │   │   ├── authRoutes.js
│   │   │   ├── bookingRoutes.js
│   │   │   ├── inventoryRoutes.js
│   │   │   ├── usersRoutes.js
│   │   │   ├── peopleRoutes.js
│   │   │   ├── newsRoutes.js
│   │   │   └── analyticsRoutes.js
│   │   ├── services/         # Business logic & email service
│   │   ├── sql/              # SQL schema files
│   │   └── index.js          # Express app entry point (port 5000)
│   │
│   └── frontend/
│       ├── src/
│       │   ├── components/   # Shared UI components (Layout, Modals)
│       │   ├── pages/        # Public portal pages
│       │   ├── portal/       # Role-based internal portal views
│       │   │   ├── AdminPortal.jsx
│       │   │   ├── OfficerPortal.jsx
│       │   │   ├── StaffPortal.jsx
│       │   │   └── StudentPortal.jsx
│       │   ├── services/     # Axios API service wrappers
│       │   ├── styles/       # CSS theme & global styles
│       │   └── App.jsx       # Root component & router
│       └── index.html
│
└── docs/                     # Department project documentation site

API Endpoints

Method Endpoint Description
POST /api/auth/login User login — returns JWT token
POST /api/auth/register New user registration with OTP
GET /api/items List all inventory/equipment items
POST /api/items Add new inventory item (admin only)
GET /api/bookings View bookings (filtered by role)
POST /api/bookings Create a new booking request
GET /api/users User management (admin only)
GET /api/people Retrieve lab people/profiles
POST /api/people Add/update a person profile
GET /api/news Retrieve news and events
POST /api/news Publish a news item (admin only)
GET /api/analytics Usage and booking analytics (admin only)

User Roles & Access Control

Role Access Level
Student Book equipment, view booking history, request consultations
Officer Review and approve/reject student booking requests
Staff Manage personal profile and lab-related tasks
Admin Full access — user management, inventory, analytics, news

Testing

Backend API Testing

The backend REST API was tested using manual HTTP requests via test_api.js to verify all core endpoints, including:

Frontend Testing

Database Testing

Conclusion

What Was Achieved

This project successfully delivers a dual-purpose web platform for the Computer Vision and AI Lab:

Future Developments

Commercialization Potential

The platform’s architecture is generic enough to be adapted for any university lab or shared-resource facility. With minor customization, it can serve other departments within the Faculty of Engineering or be packaged as a multi-tenant SaaS product for research institutions.

Appendices