Case Studies

brighton.dog

Bespoke JAM-Stack Nuxt website

brighton.dog

Over the past few months we’ve been tinkering away on a new Nuxt website, www.brighton.dog – a guide to 2000+ dog-friendly venues in Brighton & Hove. We’ve had enormous fun learning some new tech which we’ll list below…

Design

We created the assets in Adobe Illustrator and composited them together in Figma. As this was a side project, we took more of a design-in-browser approach, rather than wireframes and super hi-res mockups per page, we mostly freestyled it!

Frontend

We’ve been using Vue JS for years, the single-file-component Dev-Ex is sublime, and the Nuxt framework gives it superpowers. This is the first site we’ve built using Nuxt v3 + Vue 3, which despite being an RC, has been rock solid. We generate (SSR) the thousands of static pages on Netlify.

Vue.js code → Markdown with MDC components → Output

MDC — MarkDown Components

Speaking of Nuxt, we’re using the latest Nuxt Content module content.nuxtjs.org which allows you to author, query and render content in .md, .json, .yaml, .csv, which also extends .md with amazing MarkDown Components - you can just plop a Vue JS component right in your markdown – very powerful!

Database & Hosting

We normally turn to Google’s Firebase for easy NoSQL data, but after reading tons of hype for supabase (an open source version of Firebase, using Postgres) we thought we’d try it out. We fell in love with the table view immediately, and we found their auth easier to use than Firebase.

Good ‘ol Netlify. Simply push to prod on GitHub and Netlify will generate all the thousands of pages (thanks for the 25000 monthly build minutes!), and uses Netlify plugins to generate a sitemap and an Algolia search index. We also use their super simple contact form handler.

Domains & URL shortener

We’ve found porkbun to be a no-frills but superb DNS provider, we also use them for my URL Shortener — btn.lol — again using netlify-shortener by @kentcdodds

Social Media

Got to be on TikTok these days! Also Instagram reels and YouTube Shorts. We make the animations using the world’s greatest software – Blender – for the motion graphics and license music from soundsnap.com. Fun!

AI Blog Images

Artificial Intelligence is coming to take our jobs! We’ve used DiffusionBee on an M1 MacBook Air (!!!) to generate the blog images, some good results and some less good results – but a huge amount of fun and wonder. We host them using Cloudflare Images which is cheap AF (~$9/mo for 100000s image views)

A big pile of window stickers saying Dogs WelcomeA screenshot of a map showing locations of dog-friendly venues
Window cling stickers and Map component

Other Stuff

Stickermule for tons of non-adhesive, static-only window-cling stickers to give out to dog-friendly venues of Brighton and Hove

Cloudflare Images for UGC image hosting, Algolia for search, Plausible Analytics for, well, analytics. Google Places for the map control, Open Props for CSS design tokens (thanks @argyleink) and MailGun for SMTP mail.

Dog

All of this has been made possible thanks to Brighton’s laziest dog.