From WordPress Frustration to a Custom Next.js Gym Site in One Build Session
How we replaced Camelback CrossFit's aging WordPress site with a fast, dead-simple platform their gym owner actually wants to use.
See the finished site: camelbackcrossfit.com
The Problem
Rob, the owner of Camelback CrossFit in Scottsdale, AZ, had a problem every small business owner knows too well: his website was working against him, not for him.
The gym's WordPress site was outdated, slow, and overcomplicated. Rob isn't a tech guy — he's a CrossFit coach who wakes up before dawn to lead the 5 AM class. His only digital need is simple: post tomorrow's workout, maybe attach a photo, and move on with his day. WordPress made that feel like filing taxes.
The site needed to do three things well:
- Look professional and match the gym's aggressive brand identity
- Let Rob post daily workouts without touching anything complicated
- Capture leads when someone wants to try a free week
Everything else — membership signups, class bookings, payments — already lived in Wodify, their gym management platform. The website just needed to be the front door.
The Approach
We didn't start with the pretty stuff. We started with Rob's workflow.
Admin first, design second.
Before building a single public page, we built the admin panel. Rob's bookmark would be camelbackcrossfit.com/admin. He logs in, sees a clean dashboard, clicks "Post Workout," fills a form, hits publish. Done. If that flow didn't feel effortless, nothing else mattered.
We chose a modern stack that would be fast, cheap to run, and zero-maintenance:
App Router + TypeScript — server-rendered pages that load instantly
Utility-first styling that keeps the design system tight
Postgres database, auth, and image storage in one platform
Hosting with CDN/SSL + email notifications for leads
No separate hosting bills
Hosting, database, and support are all included in our standard service.
No plugins to update. No security patches. No surprise invoices.
The Build
Brand Translation
Camelback CrossFit has a strong visual identity — the CB/CF block logo, CrossFit red (#C1272D), and a no-nonsense attitude. We translated that into a dark-themed design system with three fonts: Bebas Neue for bold headings, Inter for body copy, and Space Mono for workout content. Red is reserved exclusively for calls-to-action — never decoration.
The WOD System
The daily WOD (Workout of the Day) is the heartbeat of any CrossFit gym's website. We built a custom text parser that takes Rob's raw workout input and automatically styles it:
Rob types exactly how he's always typed workouts. The parser handles the formatting. If a line doesn't match any pattern, it renders as-is — the system never breaks on unexpected input.
We also built a week-by-week browser so members can look ahead at the full week of programming, and a 5 AM auto-publish system using Vercel's cron scheduler. Rob can load an entire week of workouts on Sunday night as drafts, and each one automatically goes live at 5:00 AM Arizona time on its scheduled date.
The Admin Panel
Rob's dashboard shows him everything at a glance: how many WODs are scheduled this week (and which days are missing), recent lead count, and quick-action cards for every section. Six admin modules total:
SEO for Local Discovery
Replacing a WordPress site that Google has already indexed is risky if you don't handle the migration carefully. We implemented:
- JSON-LD structured data — LocalBusiness and ExerciseGym schema with hours, pricing, geo coordinates, and service areas
- Dynamic sitemap that includes every published WOD page
- 301 redirects from every old WordPress URL to its new equivalent
- Auto-generated OG share image so the branded card shows when anyone shares the site
Overcoming Challenges
The middleware migration
Next.js 16 deprecated the middleware.ts convention in favor of proxy.ts. Our auth guard for the admin panel broke on first deploy. We caught it in the Vercel build logs and migrated within minutes.
Supabase Row Level Security
RLS policies protect the database but require precise WITH CHECK clauses for insert/update operations. We debugged this live with Rob testing uploads until every admin action worked seamlessly.
Image cropping
Gym photos are often shot at odd angles. Default object-cover was cutting off faces. We added object-top positioning and built the WOD page with a cinematic background approach — 55% dark overlay landed perfectly.
The Final Product
The site launched with:
- 15+ public pages covering everything from daily WODs to nutrition philosophy
- Homepage hero slider that crossfades through gym photos every 6 seconds
- WOD hub with week-by-week browsing — members can look back or ahead at programming
- Cinematic WOD detail pages where workout photos serve as backgrounds
- Two embedded Vimeo videos — including a Nike Metcon commercial filmed at the gym
- Real coach profiles with bios and credential badges
- Lead capture with instant email notifications to the owner
Rob's daily workflow: open his bookmarked admin page, post the workout, optionally attach a photo, hit publish. Under 60 seconds. That's what he wanted, and that's what he got.
The Numbers
| Metric | WordPress (Before) | Next.js (After) |
|---|---|---|
| Hosting overhead | Separate bills + plugins | Included in service |
| Page load | 3-5 seconds | Under 1 second |
| Time to post a WOD | 5+ minutes | Under 60 seconds |
| Mobile experience | Template-dependent | Mobile-first design |
| SEO foundation | Basic (Yoast plugin) | JSON-LD + sitemap + redirects |
| Lead notifications | None (check manually) | Instant email to owner |
What We Learned
- Build for the user, not the feature list. Rob didn't need a CMS with 50 options. He needed a form with a date picker, a text box, and a publish button. Every feature we added was in response to a real need he expressed — not a hypothetical one we imagined.
- WordPress isn't always the answer for small businesses. For sites where the owner only needs to update one type of content, a custom admin panel tailored to that exact workflow will always beat a general-purpose CMS.
- The migration is the hardest part. Building the new site was straightforward. Making sure Google didn't lose the old site's search authority during the DNS switch — that required careful redirect mapping, sitemap submission, and monitoring.
Outgrown Your Template?
Radius Systems designs and builds custom web applications for businesses that have outgrown their templates. Book a call to see what we can build for you.