HigherFrequency
A mood-based quote card app — from concept to live in 48 hours.
Overview
HigherFrequency is a mood-based quote card application designed to shift a user's state through curated inspiration and high-vibe aesthetics. Built as a lightweight, installable PWA, it lets users select from six distinct moods — ranging from “Cosmic” to “Bold” — to generate beautifully animated, downloadable quote cards backed by AI-generated imagery.
The Challenge
The internet is saturated with “quote-of-the-day” sites, but most are cluttered with ads, lack cohesive design, or feel static. I wanted to build something that felt alive — a tool where the UI itself contributed to the mood shift. The goal was to create a seamless bridge between a digital interaction and a shareable piece of content, while simultaneously standing up a complete subscription-based SaaS infrastructure from scratch in under a week.
Timeline & Process
Day 1 — The Core Engine
From design document to functional scaffold in hours. Built the Quote Engine with GSAP-powered animations, integrated 120+ quotes, and used Google Gemini to generate 18 unique mood-matched background images. By end of day: mobile responsive, image/gradient toggles, story-mode exports, and localStorage persistence all working.
Day 2 — The Ecosystem
Shifted to the “app” experience — favorites system, PWA manifest for Add to Home Screen, Pinterest pin generator for marketing assets, quote history navigation, SEO meta tags, and UI polish.
The Following Week — Infrastructure
The “boring” but critical production work: Paystack subscription integration (R49/month), Express backend, VPS deployment with PM2 and Nginx. I configured my own nameservers (ns1/ns2.devdarren.com), set up a full mail stack with DKIM/SPF/DMARC, SSL, legal pages, and analytics.
Technical Decisions
Vanilla JS
No React, no Vue, no build step. The dev loop was near-instant and the final bundle is tiny. The app feels snappy because it isn't hydrated — it just is.
Own Infrastructure
Hosted on my own VPS with PM2, Nginx, custom nameservers, and a full email stack. 100% control, no vendor lock-in, fixed operating costs.
GSAP + html2canvas
GSAP for premium-feeling animations. html2canvas for one-tap image exports — users save styled quote cards for Instagram or wallpaper.
AI-Assisted Build
Claude Code as a force multiplier during the 48-hour sprint. Rapid prototyping of logic and features while I stayed focused on architecture and visual polish.
Key Features
- Mood-Matched Backgrounds — 18 curated images generated via Gemini to evoke specific emotional frequencies.
- Dynamic Animations — GSAP-powered transitions that make every quote feel like a moment of discovery.
- Image Export — One-tap download to save quotes as styled images for social sharing.
- SaaS Ready — 10 free quotes/day, R49/month subscription via Paystack for unlimited access.
- Offline Support — Full PWA with service worker, installable on any device.
Result
HigherFrequency is a fully functional, monetised web application. It represents the modern solo-dev workflow: using AI to handle the heavy lifting of content and boilerplate, while the developer focuses on custom infrastructure, user experience, and aesthetic integrity.
In ~2,500 lines of code, I delivered an app that is faster, more customisable, and more robust than many projects built with significantly larger overhead.
Visit HigherFrequency →