Case study

RA Design

The public site for an architecture and landscape studio — an Angular portfolio front end over a small Express service that serves the project catalogue and routes contact and job enquiries straight to the studio's inbox.

Role
Full-stack developer
Mode
solo
Headline result
200+ images across 15+ projects
AngularTypeScriptNode.jsExpressNodemailerBootstrap
RA Design cover screenshot

Context

RA Design is an architecture, interiors and landscape studio. Their work is visual first — a project is a set of photographs, a site area and a short written narrative — and they needed a site that treats it that way rather than as blog posts. I built and shipped it as the only developer on the project: front end, back end, deployment and the content model in between.

The problem

Two things had to be true at once. The portfolio had to open fast and stay smooth while carrying 200+ photographs across 15+ projects, most of them full-bleed architectural shots. And the studio had to be able to receive enquiries and job applications — CVs included — without an inbox integration, a CRM or a monthly SaaS bill.

Architecture & solution

An Angular 14 single-page app handles routing and presentation: a home carousel, a portfolio grid, a per-project gallery route, about and contact. Behind it sits a small Express service with a handful of endpoints — one returns the whole project catalogue as JSON, one streams project imagery with the right content type, and two accept the contact and job-application forms. The application endpoint takes a multipart upload through Multer's memory storage and forwards the file straight on as a Nodemailer attachment, so nothing about an applicant's CV is ever written to disk.

Key decisions & tradeoffs

The catalogue lives in a single JSON document rather than a database. With 15+ projects that change a few times a year, a schema and a query layer would have been ceremony — a JSON file is editable by hand, diffable, and removes a whole tier from the deployment. Enquiries go out over SMTP through the studio's own Google Workspace account rather than into storage: the studio already lives in that inbox, so the inbox is the queue, and nothing sensitive accumulates in a database I'd have to secure. Galleries are lazy-loaded and images preloaded ahead of the lightbox so paging through a project never shows a blank frame.

Results

Live at radesign.info and serving the studio's public presence and hiring pipeline since 2022 — 15+ projects, 200+ images, and a careers page carrying three open-role groups with CV upload wired to the studio's inbox.

Learnings

The clearest lesson was about the size of the substrate. It's tempting to reach for a database and an admin panel by reflex; here a flat JSON file and an SMTP transport carried the whole product for years with almost nothing to operate. The one I'd change is the credential: the mail account's app password sits in the source rather than in the environment, which is exactly the kind of thing that's invisible while you're the only person with the repo and obvious the moment you aren't.

Screens

RA Design home page — full-bleed landscape photograph in the lazy-loaded hero carousel, with the studio wordmark and primary navigation
The portfolio index, alternating project titles and cover photographs down the page
A project gallery at /portfolio/:title — the Hillview Resort lead photograph opening the image set
The careers page listing open roles, above the apply form that posts a CV to the studio inbox as an email attachment

RA Design home page — full-bleed landscape photograph in the lazy-loaded hero carousel, with the studio wordmark and primary navigation

// contact

Building something like this?

If this maps to what you're planning, I can walk you through how I'd approach yours.