Innov Projects – Project Management Platform

URL

Status

Type

Product

Client

My self

Duration

4 Months

Project Overview

Innovation Lab Project Management (PM) Tool is a comprehensive, enterprise-grade system custom-built to streamline operations, project tracking, and team collaboration.

Initially commissioned for the Innovation Labs at the Bank of Ceylon (BOC) Head Office, the system was originally engineered as an air-gapped, offline-first application running on a local ZimaOS server to comply with strict banking network policies.

With official permission from the Senior Manager, the project was later refactored, heavily modified, and securely migrated to a public-facing Hostinger VPS, showcasing adaptability, advanced security implementations, and modern cloud infrastructure.

Project Scope

The goal was to replace fragmented tracking methods with a single, unified command center.

The scope required a seamless user interface for project lifecycle management, real-time communication, and secure file handling.

Beyond standard CRUD operations, the system needed to provide administrators with live server telemetry (CPU, RAM, and Database usage), enforce military-grade authentication (including offline 2FA), and maintain absolute data integrity.

The scope ultimately expanded to include the implementation of a zero-downtime CI/CD pipeline for automated cloud deployments..

Journey

The development process was deeply iterative.

It began with,

1. Hand-drawn sketches to map out complex user flows and system architecture, ensuring all stakeholder requirements were met before writing a single line of code.
2. These sketches were translated into high-fidelity Figma prototypes, allowing the team to perfect the UI/UX, specifically focusing on polished loading states and intuitive navigation.

After securing the initial build on the isolated ZimaOS environment, the architecture faced a major evolutionary pivot.

- Transitioning to a public Hostinger VPS required redesigning the security posture from the ground up.
- This involved configuring Nginx as a reverse proxy, enforcing SSL certificates, orchestrating a custom Socket.io server alongside Next.js using PM2, and resolving complex dependency trees to ensure latest frameworks ran flawlessly in production.

UI Sketches

UI Prototypes

Key Features

Real-Time System Telemetry & Dashboard

1. Custom Admin Dashboard that polls live server hardware metrics (CPU, RAM) and dynamic MySQL database size.

2. Built with usability in mind, including smooth Tailwind CSS skeleton loaders during server "cold starts" to provide immediate visual feedback.

Enterprise-Grade Security & Offline 2FA

1. Implemented a custom authentication flow using Argon2 for password hashing.

2. Designed an offline-first, Two-Factor Authentication (2FA) system utilizing TOTP and QR codes, allowing users to authenticate securely even without internet access.

Live Chat (WebSockets)

1. Integrated Node.js/Socket.io server running perfectly in sync with Next.js.

2. Real-time updates, instant inbox messaging, and live status changes without requiring page refreshes.

CI/CD Pipeline

1. Architected GitHub Actions pipeline syncs code, installs dependencies, compiles production builds, securely migrates database schemas (Drizzle ORM), and restarts the PM2 process manager without dropping active users.

Asset & Report Generation

1. Integrated Cloudinary for optimized image and file uploads.

2. The system utilizes client-side rendering tools (html2canvas and jsPDF) to instantly generate and download comprehensive project reports and visual Gantt charts directly from the browser.

Database with Type-Safe ORM

1. Utilized Drizzle ORM to maintain strict end-to-end type safety between the MySQL database and the frontend. This ensures absolute data integrity when handling sensitive project milestones, user roles, and team assignments.

Technology Stack

Frontend

1. React 19

2. Next.js 16 (App Router)

3. Tailwind CSS v4

4. Framer Motion (for fluid UI animations)

5. Zod (for strict schema validation)

Backend

1. Next.js Server Actions

2. Custom Node.js Server (handling Socket.io real-time events)

3. Nodemailer (for automated email alerts)

Database

1. MySQL

2. Drizzle ORM

Infrastructure

1. ZimaOS (Initial local deployment)

2. Hostinger VPS (Ubuntu)

3. Nginx (Reverse Proxy)

4. PM2 (Advanced Node process manager)

5. GitHub Actions (Automated CI/CD)

Performance & Security

1. Argon2

2. SSL/HTTPS

3. Offline TOTP & OTP

4. Strict Content Security Policies

Challenges & Lessons

Challenges

1. Software Compatibility: Because I used the newest available technology to build the system, I frequently ran into compatibility issues where different software parts didn't immediately work well together.

2. Cloud Server Migration: Moving the application from a private, closed bank network to a public cloud server was complex. It required setting up specific internet routing rules so that real-time features, like live updates and chat, functioned properly on the open web.

3. Automating Live Updates: I wanted the system to update automatically whenever new features were finished. The challenge was that minor errors in unfinished, behind-the-scenes work could accidentally interrupt the live website during the update process.

Lessons

1. Careful System Maintenance: To safely isolate and update specific parts of the system. This ensures the system stays secure and up-to-date without breaking existing features that the users rely on.

2. Web Server Configuration: Experienced in setting up secure web servers, managed internet traffic rules so that the application runs quickly and reliably for outside users.

3. Failsafe Deployments: Learned the importance of adding strict safety checks to the automated update process. Now, the system is programmed to only accept new updates if the code is 100% error-free, guaranteeing that users never experience unexpected downtime.

Gallery

The End...