Back to Projects
Project Writeup

SecureHub

A secure private repository viewer focused on controlled access, private file storage, and shareable repository links, built with Next.js, Neon, Cloudflare R2, and Vercel.

Next.js
React
TypeScript
Node.js
PostgreSQL
Neon
Cloudflare R2
bcrypt
Tailwind CSS
Vercel

What it does

SecureHub is designed for viewing private repository content and sharing access through secure links instead of exposing files through public storage or unmanaged URLs. The app combines an authenticated admin flow, database-backed metadata, and private object storage so repository assets can be organized, protected, and shared intentionally.

Application architecture

The project runs as a Next.js 16 App Router application deployed on Vercel. The current architecture is Vercel-only, after removing the earlier Render/Go backend path, which keeps the frontend, API layer, authentication, and deployment model inside one Next.js codebase. The repository includes app source under src, database migrations, tests, Vercel configuration, and workflow files for deployment-related automation.

Data and storage

Neon PostgreSQL is used through @neondatabase/serverless for persistent application data, while Cloudflare R2 provides S3-compatible private bucket storage for repository files or generated assets. The setup is environment-driven through values such as DATABASE_URL, R2_ENDPOINT, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, and R2_BUCKET_NAME, keeping infrastructure credentials outside the codebase.

Authentication and setup

Authentication is based on HttpOnly session cookies and bcrypt password hashing. The first administrator is created through a guarded /register flow using an ADMIN_SETUP_TOKEN, which prevents open registration while still allowing a clean first-run setup. A separate SESSION_SECRET signs the session layer, and the production app URL is configured with NEXT_PUBLIC_APP_URL for deployed environments.

Deployment workflow

The README documents a reproducible setup path: install dependencies, copy .env.example to .env, fill in Neon, session, setup-token, and R2 values, apply the initial database migration with npx pg-neon run web/migrations/001_init_sh_tables.sql, then start the development server. The project also keeps Makefile commands for frontend development, builds, and linting.

What I learned

This project strengthened my understanding of building secure Next.js applications around private storage, serverless PostgreSQL, environment-based configuration, cookie-based sessions, password hashing, admin bootstrap flows, deployment simplification, and the tradeoffs involved in keeping protected file access usable without making the underlying bucket public.