← GO BACK

Quotd: Share the Word

Published November 9, 2025

Try Quotd View on GitHub
An image of a tree in the desert with the words 'The Lord is good, a stronghold in the day of trouble'

Quotd (pronounced “quoted”) is an app for quickly sharing Bible verses as attractive images. The goal is to make it easier to share good Bible verses on social media, with fast creation and “no bad options.”

Features

The app includes several key features that make sharing verses simple and engaging:

  • Beautiful verse cards featuring nature photos and a curated selection of fonts
  • Quick customization with simple controls and no bad options
  • Daily verses - each visit loads a new random verse card
  • Easy sharing - simply download and share into your favorite apps

Why I Built It

I wanted to make it easier to share good Bible verses on social media. The idea is that it should be fast to create an image, with “no bad options.”

Technology

Quotd is built with modern web technologies:

  • Vue with TailwindCSS to manage frontend layout
  • Vite to bundle into a static output that is easy to host
  • HTML2canvas to convert webpage elements to a downloadable image
  • Playwright for e2e testing to ensure stability

Development Journey

Foundation

Initially built in React with Mantine in early 2024. Much of the foundation was too challenging for AI at the time and had to be hand coded with reference to Mantine documentation. Getting the image framing right, and getting font loading detection for the loading animation were the biggest things I had to dig deep on, but later migrations preserved the correct setup.

The Great Migration

Used coding agents to assist with building out tests before migrating the tech stack, first to TailwindCSS over Mantine, then from React to SolidJS and then to Vue. These migrations were done mainly due to preferring a more lightweight setup. End to end tests were used to ensure key functionality was retained. These migrations were accomplished largely autonomously, between Codex and Claude Code in the web.

Mobile Packaging

It took a little work to setup the Capacitor build pipeline, and agents weren’t able to see the app output without setting up additional tooling to enable a proper feedback loop. However, with the Android Debug Bridge (adb) screenshot tool, and connecting remote Chrome dev tools, I managed to get this working.

Try it out for yourself and start sharing verses that inspire you!

← GO BACK