A dorm browser with filter chips, dorm cards, star ratings and a quiz callout

Personal

Dorms @ Brown

Before the annual housing lottery, students piece dorm information together from old forum posts, secondhand accounts and a housing page with floor plans but no photos. D@B puts it in one place: photos, plans, features and peer reviews, plus a quiz that narrows thirty dorms to a shortlist worth touring.

RoleFull stack
StackReact, Java (Spark),
Firebase, Docker
Year2023
NoteIf you would like the detail, please get in touch
Context

Everyone was guessing, including Res Life

The information existed. It was just scattered across a university housing page, a few years of forum posts, and whoever you happened to know who had lived somewhere. There was no single place to see what a room actually looks like or hear what the people in it thought.

The cost landed on students as a bad decision they lived with for a year, and on Residential Life as a steady stream of one-off questions that better upfront information would have answered.

How it works

Why there is a backend at all

The frontend never talks to the database. Every read and write goes through a Java server, which is the only thing holding admin credentials; the client holds a public config good for sign-in and photo upload and nothing else.

That split is what forced the deployment shape. GitHub Pages serves static files only, so the server needed a real host and runs as a container elsewhere, with the service-account key passed in as an environment variable rather than a file, because most container platforms have no friendly way to drop in a raw secret.

01One credential holderAdmin keys live on the server. The client gets a public config and no more.
02Static front, hosted backA static host cannot run a server, so the two deploy separately and meet over HTTP.
03Sign-in by redirectPopup sign-in is silently killed by default cross-origin policy on static hosts: the window opens, closes, and never completes.
How it works

Photographs nobody framed

Dorm photos are phone snapshots in every orientation and resolution. Hard-cropping a tall photo into a fixed frame cuts off half the room, which is the half you wanted.

The gallery letterboxes the full photo over a blurred, darkened copy of itself filling the rest of the frame. Nothing is cropped, the frame stays a consistent size, and the fill reads as intentional rather than as empty space.

What it taught me

The deployment is part of the design

I had thought of hosting as something that happens after the build. It is not: the static-host constraint decided the architecture, the auth flow and the routing, and every one of those is visible to the person using it.

Client-side routing on a project path needed an explicit basename and the redirect trick for deep links, because there is no server to rewrite a URL. That is a design decision that arrived from the infrastructure, and I would now go looking for those earlier.