Case Study: How We Built a Full-Stack Website and Private Client Portal for Before It Fades

Every now and then a project comes along that stretches across the full width of what a web developer can do. The Before It Fades project was one of those. What started as a brief to build a website for a Pembrokeshire memory preservation service turned into one of the most technically involved and personally rewarding builds we've delivered at Metcalf Media - combining front-end design, CMS development, server configuration, cloud storage integration, database architecture and a fully authenticated client portal, all delivered at a pace that simply wouldn't have been possible even a few years ago.

About Before It Fades

Before It Fades is a memory preservation service run by Martin, a Pembrokeshire-based photographer with a deeply personal mission. The service captures people's stories - through photography, video and audio recordings - and preserves them for families to keep forever. Clients book a session, Martin spends time with them capturing their memories, and the finished media is delivered both as a beautifully presented physical keepsake box and through a private online portal where clients can log in and access, view and download their files at any time.

It's a genuinely moving concept, and it needed a digital presence worthy of the work behind it.

The Brief

Martin came to us with two distinct requirements. First, a public-facing website that would communicate the emotional weight and quality of the service - something warm, elegant and trustworthy that would speak to families considering the service. Second, and more technically complex, a private client portal where each client could log in securely after their session and access their personal photographs, video footage and audio recordings.

Each client session generates approximately 2GB of mixed media. That's a significant volume of files that need to be stored securely, organised per client, and delivered through a clean, private interface - without any risk of one client seeing another's content.

The Solution: Two Distinct Systems Working Together

From the outset it was clear this project needed two separate technical environments. A single server handling both the public website and a growing media library of personal client files would have been the wrong approach - both from a performance standpoint and a security one. We designed the solution in two parts.

Part One: The Public Website on Umbraco

The public-facing Before It Fades website was built on Umbraco, our CMS of choice for bespoke business websites, hosted on a managed Windows Server environment. Umbraco gave Martin a powerful, flexible content management system he can update himself - adding new blog posts, updating service information, managing the FAQ section and keeping the site fresh - without needing to touch any code.

The design was built from scratch to reflect the tone of the service. Warm photography, considered typography, generous white space and a layout that leads visitors gently through the story of what Before It Fades does and why it matters. Every template was custom-built in Razor/C#, with a full suite of page types covering the homepage, services, about, blog, FAQ and contact - all mobile-optimised and built with on-page SEO foundations in place from day one.

Part Two: The Private Client Portal on Laravel and Linux

The client portal was an entirely different technical proposition. We set up a dedicated Linux VPS - completely separate from the main website infrastructure - and built a bespoke portal application on Laravel, the PHP framework. This separation was deliberate: the portal handles authenticated user sessions, file uploads and private media delivery, and keeping it isolated from the main site means performance, security and scalability are all independently managed.

The portal runs on its own subdomain - portal.beforeitfades.com - with its own SSL certificate, its own database and its own dedicated server resources. When Martin adds a new client to the system, they receive login credentials and can access their personal media library through a clean, branded interface. Every client sees only their own files - the access control is enforced at both the application and database level.

Cloud Storage with Cloudflare R2

Storing 2GB per client session on a server's local disk would quickly become unmanageable. We integrated Cloudflare R2 - a cloud object storage solution that's S3-compatible and built for exactly this kind of use case - as the media storage layer for the portal. Every file uploaded by Martin is stored in R2, organised in a per-client folder structure.

Crucially, the files in R2 are private. Clients never access them directly via a public URL — instead, the Laravel application generates time-limited signed URLs for each file on demand. This means a client can view or download their photographs, watch their video footage and listen to their audio recordings through the portal interface, but the underlying files are never exposed or accessible without an authenticated session. If anyone tried to share a link directly, it would expire and return nothing.

The portal also supports bulk downloading - clients can download their entire media library as a single zip archive, generated server-side and delivered securely.

The Admin Panel

Alongside the client-facing portal, we built Martin a full admin panel where he can manage client accounts, upload new media files, organise assets into galleries, edit file labels and monitor what's been accessed. The admin interface is entirely separate from the client view and protected by role-based authentication - Martin has full control over the system without needing to touch a database or server directly.

The Full Stack in One Project

What makes this project a useful illustration of what Metcalf Media does is the sheer breadth of skills it required. In a single engagement we covered:

• Front-end web design - custom visual design, HTML5, CSS3, responsive layouts, typography and brand-led UI across both the public site and the portal
• Umbraco CMS development - document types, Razor templates, content architecture, blog systems on Windows Server
• Linux server setup - provisioning and configuring a Hetzner VPS, installing and configuring PHP, setting up the web server environment, SSL certificate installation and DNS configuration
• Laravel application development - authentication system, database migrations, models, middleware, controllers, routing and the full MVC architecture of the portal
• Database design - MySQL schema design for user accounts, client records and asset management
• Cloud storage integration - Cloudflare R2 bucket setup, API token management, Laravel filesystem configuration and signed URL generation
• Security - role-based access control, authenticated sessions, private file delivery, SSL across both environments
• PHP development - file upload handling, mime type validation, zip archive generation, S3-compatible API integration

This is genuinely full-stack development - from the visual layer a visitor sees in their browser, through the application logic, down to the server configuration and cloud infrastructure underneath. Very few web agencies operating at a local level have the range to deliver all of this in-house, on a single project, without outsourcing any component of it.

How AI Changed What Was Possible

It would be dishonest to write about this project without acknowledging the role AI-assisted development played in the delivery. The Before It Fades portal - the Laravel application, the R2 integration, the admin panel, the authentication system - was built in a matter of hours rather than the days or weeks it would have taken even five years ago.

To put that in perspective: in 2019, a developer tackling this exact specification - Laravel app, cloud storage integration, authenticated client portal, admin panel, branded UI throughout - would have been looking at a minimum of one to two weeks of development time. Server setup alone, without modern tooling, could eat the best part of two days. The file handling, signed URLs, zip download functionality and multi-file upload logic would each have been a half-day of research and trial and error.

AI hasn't replaced the expertise required to build something like this - you still need to understand what you're building, why each component works the way it does, and how to make the right architectural decisions. But it has dramatically compressed the time between decision and delivery. Martin got a sophisticated, bespoke, secure client portal that a small business in 2019 simply couldn't have afforded to commission. That's genuinely exciting - and it's something we're now able to offer across a much wider range of projects and budgets than ever before.

The Result

Before It Fades launched with a website that does justice to the quality and sensitivity of Martin's work, and a client portal that adds real, tangible value to the service - giving clients a permanent, private home for their memories that they can return to at any time. The two systems work seamlessly together under a single brand, with Martin in full control of both through intuitive management interfaces.

It's one of those projects where the technology genuinely serves something meaningful. And it's a strong example of what's possible when full-stack expertise, the right tools and a clear brief all come together.

Thinking About a Similar Project?

If your business needs something beyond a standard brochure website - a client portal, a secure file delivery system, a booking platform, a custom database application or any other bespoke web solution - Metcalf Media has the technical range to deliver it. We work across the full stack, from design and front-end through to server configuration, database architecture and cloud integrations.

Get in touch for a free, no-obligation conversation about your project. Whatever you're trying to build, we'll give you an honest assessment of what's possible and what it will take to get there.