Case study
File Management System
An intranet for sharing documents across departments: personal folders, department libraries, previews, sharing, version history, and built-in team chat.
Built for internal use at Newborn Screening Center - Southern Luzon, so the source code is private. The demo runs the real frontend with sample files and made-up people; browsing and previews work, and changes are turned off.
Role: Design and full-stack development
The problem
- Shared documents were scattered across personal drives, email attachments, and chat threads, so staff often worked from old copies.
- Each department needed its own library of forms and procedures, while still being able to share single files with other teams.
- Quick questions about a document happened in separate chat apps, away from the file itself.
Quick tour (silent, sample data)
Screens (demo, sample data)
What it does
Folders and libraries
Personal folders with breadcrumbs, plus department categories (policies, laboratory, HR, training, IT guides) with their own folder trees.
Upload with conflict handling
Single, multiple, and bulk uploads. When a file name already exists, you choose to replace it, keep both, or save it as a new version.
Previews and versions
PDFs, images, and text open in the browser. Earlier versions of a file can be listed, restored, or removed.
Move with undo
Move files and folders in bulk with a preview of conflicts first, and undo a move batch within 24 hours.
Sharing and activity
Share files with specific coworkers, star the ones you use often, get notifications when something is shared with you, and see recent activity on the dashboard.
Team chat
Direct messages with file attachments, unread counts, and typing indicators, delivered in real time over Socket.IO.
Architecture
A request
React + TypeScript (Vercel)
Dashboard, Files, and Categories pages, with global search across all three
Express API (Render)
About 130 routes for auth, files, categories, moves, sharing, notifications, and chat
PostgreSQL on Supabase
Users, folders, files, categories, shares, activity logs, and messages
File storage
Multer handles uploads; folders and selections download as ZIP archives
Real-time
Socket.IO
Chat messages, typing indicators, and online status pushed to connected users
Security decisions
Hashed passwords
Passwords are hashed with bcrypt at sign-up and checked with bcrypt at login; the app signs a JWT for the session.
Safer uploads
Uploads go to a temporary location first, and name conflicts need an explicit choice instead of silently overwriting someone's file.
Protected PDFs (built, currently off)
Code using qpdf can lock downloaded PDFs against editing and copying with an owner password; it's switched off until qpdf is installed on the server.
A demo with no real data
The portfolio build answers every API call in the browser with made-up files and people, previews bundled sample files, and turns off all changes. It never connects to the real server or database.
How it was built
- Frontend on Vercel, API on Render, and PostgreSQL on Supabase, deployed separately.
- A mock layer for the portfolio intercepts fetch and axios, so the full UI runs with sample data and no server.
- One preview helper serves both the real file URL and the demo's sample files, so the demo needed no changes to how previews render.