AJ and the Groove
Pro bono editorial site and self-service Sanity admin for an Eastern Massachusetts jazz band — built and handed off.
The Challenge
The Problem
Some members of the team had put together a website using a pre-built Wix template, and the quality of the site was not up to the quality of the musical group.
Why I Took This On
The members of this group are immensely talented, and after hearing them live, I felt that the site that they had would limit the venues that they could play in. That was just a case of presentation, not ability. The band is absolutely amazing, but the site communicated neither the height of their professionalism nor the quality of the venues they should be playing in.
Constraints
It's always challenging to potentially be calling somebody's baby ugly and recommending a new approach. Fortunately, everyone involved agreed.
The Process
Initial Approach
Initially, I spoke with Anita and the band member who is the technical member of the group over email to ensure that I wasn't stepping on anyone's toes. When I got agreement from both of them, I began construction in the background, planning on putting together something to show them as a prototype.
What Went Wrong
I went through a number of new working channels and planned to steal some techniques from sites that I had built before. I discovered that the approaches that I want to take necessitated new blocks of code and things to exist that hadn't existed before. I ended up going back to the beginning, tearing down a lot of the initial structure, and starting with a more complete plan in mind once I picked out my additional destinations.
Breakthroughs
The coolest parts of this website won't ever be seen, and that's because they exist in the admin side. The unsexy job of adding in new shows and uploading videos and audio to the site has been made very easy, and a lot of the pieces are automated. For instance, there is a venue picker that exists now, which just means that they can choose a venue they've played at before instead of having to type in all of the information every single time. It's a small example, but it's a big deal for the person that has to do the grunt work.
The Solution
The website is a site that exists across several services:
- GitHub
- Sanity
- Cloudinary
- Vercel
We had to move their domain ownership away from Wix because Wix won't let you change certain things in order to keep you locked into their platform and continue to pay them. Once that was moved, the rest of the site lives as a code repository in GitHub. It uses Sanity for the administrative pieces and all of the things that would change and that you read dynamically on the site, like addresses and venues and dates, as well as YouTube videos and such. In addition to that, all of their pictures are hosted on a service called Cloudinary.
The website pulls values from Sanity and pictures from Cloudinary, and Vercel packages it all together into the website that you see when you go to ajandthegroove.com.
One of the best side benefits from all of this, in addition to a much improved website, is the fact that their costs went down from $30 or $40 a month being handed to Wix for a basic template that was reused, to a complete bespoke, fully functional website that is completely free to use. The only thing they pay for is the domain, which is about $10 a year.
“Not only is the site beautiful and highly functional, but the band's costs also went down, saving $400 every year!
”
What I Learned
Skills Gained
Unexpected Discoveries
After having done several band sites and understanding the functionality, I was surprised at how much I was able to find large areas of improvement in design capabilities and ease of use for administrators.
What I'd Do Differently
Looking at it in retrospect, there's not much that I would change from the process. Each iteration led naturally to the discovery of the next improvement. It's in the doing that you find out what else can be done.
“It's in the doing that you find out what else can be done.
”
Where It Stands Now
Current State
It is up and running and live for the band to use.
What's Next
The future plans for this are that there isn't anything concrete in terms of steps, but there is the rationale that as I work on other projects, I will backport new solutions and improvements into this website as I create them.
The Bigger Picture
The amount that I learned from this particular build was incredible in terms of process thinking, which is hard to explain without really boring you, so I won't hear. What I will say is that I did learn a lot about packaging skills and making learning concrete and being able to take leaps made in a project and bring that expertise to bear consistently in future projects. This helped really codify a lot in that realm.
The Impact
Client Results
AJ & The Groove
The results remain to be seen, but in the short term, this band has a site that aspires to communicate the scope and quality and overall gravitas that their live shows have. It's my fervent hope that venues considering booking them look at this and adjust their expectations accordingly, because this is quite the group. I can't wait to see and hear them live in the venues they deserve to be playing.
Personal Impact
This helped me coalesce quite a few ideas that have been in nascent form in my mind as I go down the journey of developing useful digital tools for clients. I had quite a few comprehension light bulbs when it comes to packaging and reusing discoveries, skills, and concepts. I markedly moved forward in solidifying a package of tools that I had created around Sanity that I call the Sanity Admin Kit.
Build Log
Queued two kit improvements for sanity-admin-kit 0.3.0 from this session's editor-friction surfacing: a dual photo-picker preview (full + as-rendered side-by-side, with object-position honored on the cover view) and a draggable focal-point input replacing the percentage-typing pattern across every consumer's photo focus fields.
Prepared the Element 119 retrofit handoff — multi-pass reconciliation of the spec into a single self-contained execution plan a fresh agent can run Phase 0a → 6 against. Kit canon decisions, operational guardrails, version pinning, and technical corrections folded into one document with no mid-execution decision points.
Kit 0.2.6 ships an admin photo-picker fix — the preview now shows the full image (letterboxed) instead of a panoramic crop, so editors can actually evaluate what they're picking. Surfaced from a real editor's hero-photo evaluation flow.
Shipped sanity-admin-kit 0.2.5 — humane error messages on the gallery picker so future credential drift, rate limits, and session expirations self-diagnose for editors without a developer round-trip.
Tracked down a production bug Anita reported — the admin's Cloudinary photo gallery was returning a 502 from stale API credentials. Diagnosed via Playwright, refreshed the env vars in Vercel + local, verified the fix end-to-end on production.
Shipped a venue-image-with-override admin primitive. Pick a venue and its standard photo previews on the show form; upload a per-show override and a "Make this the new venue image" checkbox appears — ticking it promotes the override to the venue and clears the show's now-redundant copy in a single save.
Reworked the rich-text styling on long-form show notes. Body copy switched from light italic to ink-dark roman, and editor-marked <em> emphasis regained visual contrast against the body — deliberate italic accents in a write-up now pop instead of disappearing into an italic block.
Generalized two paired mobile-popup bugs into a kit-level lesson: any floating UI rendered inside an ancestor with overflow:hidden, transform, filter, backdrop-filter, contain, or will-change will get clipped or repositioned. Added it to the kit backport queue as a hard requirement for all future dropdown / menu / sheet / tooltip primitives.
Fixed an Add-to-Calendar dropdown that was clipped inside its show card on mobile instead of floating above it. Refactored the menu to portal into document.body with position:fixed and coords computed from the trigger's bounding rect, so it escapes any ancestor's overflow:hidden or transform-induced clipping.
Fixed a mobile hamburger menu bug where the full-screen overlay only painted its background across the header strip, leaving menu items unreadable over the busy hero. Root cause was the header's backdrop-filter creating a containing block for fixed-positioned descendants — fix was rendering the sheet as a sibling of the header, not a child.
Refactored the admin kit's 32 components off hardcoded color utilities onto a CSS-variable surface defined via Tailwind v4 @theme. Consumers now rebrand the entire admin UI by redefining variables in their own globals.css — no forking, no per-component overrides.
Codified the post-launch health-check pattern at armature/standards/post-launch-routines.md — prompt skeleton, per-stack CMS query recipes, connector matrix, gotchas — so the next build-and-handoff project gets the same tripwire for free.
Scheduled a one-shot remote routine for 2026-05-10 that audits the live site, checks Sanity content drift, cross-references Cloudinary assets, and emails the punch list — so the build keeps an eye on itself after handoff without anyone needing to remember.
Diagnosed and fixed a CSS aspect-ratio + grid items:stretch overflow that clipped the venue display headline on /shows at 880-1280px viewports. Root cause: aspect-ratio container with auto-width was computing width from the grid-stretched height.
Vendored sanity-admin-kit as a tarball in the AJ repo so Vercel resolves it without the local E:/Code/ workspace — pattern documented for the next consumer.
Shipped Phase 1 to production at https://aj-and-the-groove.vercel.app — five public pages, full self-service Sanity admin, mobile-responsive, 9 schemas + 12 shows + 6 members + 6 tracks + 4 videos seeded, Vercel env wired across Production/Preview/Development.
