Jonah Matos

Jonah Matos coaches pickleball out of Tampa under the name Pickleball IQ. The site is no longer a coach’s homepage with a phone number on it — it is the front of a small business: fourteen priced offers, a daily training board you reserve against, a three-minute intake form, and a password-gated back office. It sells private hours, a seven-mornings-a-week academy, a weekend bootcamp, an eight-week DUPR cohort and corporate retreats, without any of them crowding the others out.

Role —: Design and build, end to end. The site concept and the design direction were mine; the program structure came out of working through the business with Jonah.
Timeline —: July 2026 — ongoing. First version July 19; services, pricing and the /book intake form August 2; the Academy and its location pages August 19; the session board August 23; the dashboard and program questionnaires August 29.
Stack —: Next.js, React, Tailwind CSS, Neon Postgres, Formspree, Vercel, Schema.org structured data

Visit propickleballcoachtampa.com ↗

The problem

Nobody handed me a brief. I came in with the ideas for the site and the design, and the shape of the offer — what Jonah actually wanted to sell and how the programs should be structured — got worked out with him rather than handed over. Jonah had no site at all. The first version, in July 2026, was a coach’s homepage; two weeks later it started turning into the business behind it — priced services and an intake form, then the Academy, a board to reserve sessions against, and a back office to run the signups from, all inside six weeks. The packaging was the hard part. A coach selling fourteen things at nine price points has a packaging problem before he has a website problem: an hour splits four ways, a block of academy credits is not a booking, and a corporate half-day and a $15 video review are the same business only on paper. All of it had to sit on one site without turning into five.

What I built

The homepage runs as one scroll in labeled sections — “[ The Coach ]”, “[ Daily Academy ]”, “[ Private hours ]”, “[ The Record ]”, “[ Player voices ]”, “[ On camera ]”, “[ The Kitchen ]” for contact, and “[ Service area ]” listing the twelve cities from Brooksville down to Sarasota. A marquee of shot names (DINK, DRIVE, DROP, RESET, ERNE, LOB, ATP, STACK, POACH) runs under the hero. Above it sits a real nav: About, Academy, Schedule, Services, Results, Book.

Behind that are nine more routes. The three programs live on /academy with a page each — the weekend bootcamp at $350–500, the eight-week DUPR Accelerator at $1,200 capped at sixteen players, and corporate retreats at $2,500–5,000 for up to twenty. Private hours are on /services: one-on-one at $120, the same hour split two, three or four ways down to $30 a head, a two-hour block at $200, tournament prep at $480 and video review at $15. /schedule is the Daily Academy board. /book is the intake form. /dashboard is Jonah’s.

The proof sections stay light: a stats block that counts up on scroll — four years coaching, 75+ players coached including four pros, 27 tournament titles coached, and an average DUPR gain of +0.25 in the first thirty days — a text testimonial carousel, and one 0:44 video testimonial with captions. The credentials are external — the footer links his DUPR player profile and his Instagram rather than a bio page, and the structured data points at both as sameAs.

Design decisions

How it looks and moves, and why.

A court at night, not a sports brochure

The palette is seven tokens: near-black ink and two dark surfaces, a warm bone for text, a muted slate for labels, clay orange, and volt — the yellow-green of a pickleball — as the one loud colour. Most coaching sites are white pages with stock photos of a sunny court. This one is dark with a single accent, so the eye goes where the volt goes: the next session, the price, the button.

Three typefaces, three jobs

Archivo, a tight condensed grotesk, sets the headlines like a scoreboard. Inter carries the body copy. Space Mono does the small print — the bracketed section labels like “[ The Coach ]” and “[ Daily Academy ]”, the prices, the stats. The mono labels are what make a long single-scroll homepage read as chapters rather than one wall.

Motion that says “this is a sport”

A muted video loop runs behind the hero, the headline rises in, a marquee of shot names runs underneath, and pickleballs drift as you scroll. Scrolling is smoothed by Lenis and entrances are handled by Framer Motion. It is the most decorative layer of the site, and it sits only on the marketing pages — the board, the forms and the dashboard keep still.

No browser-default surfaces

In August the nav went from transparent to solid, so it stopped sitting on top of the hero text, and every surface the browser paints by itself got themed. The native selects became a themed listbox. Autofill, which repaints a field pale blue on a dark page, was overridden; scrollbars went thin and bone-tinted, volt on hover; the text cursor went volt; and the grey flash phones draw over a tapped link was switched off. A booking form that drops into grey system controls halfway down a dark site looks like a different product, and people hesitate at exactly that moment.

The back office is the same product

The dashboard uses the same tokens, the same mono uppercase labels and the same week grid as the public board — each cell shows a headcount where a visitor sees availability, so Jonah reads fill the way his players read open spots. No component library, no admin template. It is his business; it should look like it.

The flagship gets a door in the nav

The first spec for the signature programs kept them off the nav and reachable only through /services. Two weeks later that was reversed on purpose: the Academy got a nav slot and a hub page of its own, because burying the offer Jonah most wanted to sell behind a services list was exactly the problem the redesign was meant to fix.

Decisions worth explaining

The engineering, for anyone who wants it.

Reserve on the site, pay where he already gets paid

The academy sells blocks of sessions, so money has to change hands — but there is no Stripe, no merchant account and no card fees anywhere on the site. The FAQ states the model plainly: Venmo, Cash App, PayPal or cash on court. You reserve your sessions first, and the confirmation screen opens your payment app with the right amount already filled in. That is the whole checkout. The problem the site had to solve was logistics — holding a spot on a capped board, so eight players do not turn up for six places — and that is what it does. Taking the money was not a problem yet: his players already pay him in those apps. A card processor would have added a fee, a payout schedule and a dispute process before the business needed any of them, so it waits until the volume asks for it.

A board of credits, not a calendar of appointments

The Daily Academy runs the same two sessions every morning of the week — 6:00 to 7:30 and 7:30 to 9:00, ninety minutes each, capped at eight players. You buy a block of one, three or five sessions at $50, $135 or $175, which drops the per-session rate from $50 to $35, and then spend the credits on whichever mornings your week allows. Credits work on any session on the board, can be spent back to back for three straight hours, and do not expire. Selling credits against a fixed board rather than appointments against a calendar means the schedule never has to be maintained: the board is the same tomorrow as it was today, and the only state that moves is how many credits someone has left.

The price list is published as data

The structured data carries an OfferCatalog with all fourteen offers — every program, every session length, every split of an hour, each with its own price and URL, from the $15 video review to the $2,500 corporate retreat. The schedule page adds Course and an eight-question FAQPage on top. Most local-service sites make a search engine infer prices out of paragraph copy; this one hands over a machine-readable price list, which is what a query like “pickleball lessons Tampa price” is actually looking for.

LocalBusiness first, the person second

Where a touring athlete’s site leads with Schema.org Person data (Travis Rettenmaier), this one leads with LocalBusiness and SportsActivityLocation under the name Pickleball IQ, with an address, a phone number, a price range, twelve named service-area cities, and Jonah nested underneath as the employee. It is the shape search engines expect from a business people find by city rather than a public figure they find by name — and it means the brand, not the person, is the thing that ranks. That matters more the moment a second coach ever works a session.

A three-minute intake instead of a contact box

The contact section asks for a rating and “what keeps falling apart”, and the button goes to /book — a dedicated form that opens with “Tell me your game. The more I know before we step on court, the less of your first session goes to figuring out what to work on.” A generic message field produces a lead you have to interview. A structured intake produces one you can price, schedule and prepare for before the first reply. The submissions have somewhere to land: /dashboard is a password-gated area on the same site, so Jonah reads them where they arrive rather than in an inbox.

One page pointed at one search

/pro-pickleball-training-tampa is a full landing page for a single query — the daily academy, the venue, the caps, the ticket blocks and the private-hour formats, all restated for someone arriving cold from a search rather than from the homepage. The homepage copy is tuned the same way, naming 1-on-1 lessons in Tampa, drills for intermediates, clinics in Lutz and corporate events by name. It is unglamorous and it is the honest answer for a business whose customers are within an hour’s drive and find it by typing where they live.

The stack, and why

Each layer, what it runs on, and what it was picked over.

Framework

Next.js App Router, React 19

The marketing pages and the per-city landing pages are static and fast. The dashboard is a React Server Component that reads the database directly, so there is no read API to build, secure or keep in step with the page.

Styling

Tailwind CSS v4 theme tokens

Seven colours and three fonts declared once in the theme, used by the public site and the dashboard alike. That is what keeps the back office looking like the same product without a design system to maintain.

Motion

Framer Motion and Lenis

Framer Motion for entrances and the scroll-driven balls, Lenis for smooth scrolling. Both stay on the marketing pages; anything you fill in or click to book is still.

Database

Neon Postgres, from the Vercel Marketplace

Picked over a JSON file in Vercel Blob, which the site already used for media. Fill counts and status changes are each one SQL statement in Postgres; in a JSON file they are read-modify-write, which races the moment Jonah marks two things paid at once. Reservation slots are rows, not an array, so counting a session’s fill is a plain GROUP BY. Program questionnaires are a separate table with their answers in jsonb, because the questions are content that gets reworded, and columns would need a migration for every edit.

Forms and email

Own API routes, then Formspree

Both forms post to the site’s own routes, which validate and price the request on the server and write it to the database first. Only then does Formspree email Jonah. A failed email never loses a signup: the row is already there and the dashboard shows it.

Auth

One password, no provider

One person logs in, so there are no users, no emails and no auth service. The password is stored as a PBKDF2 hash (Web Crypto, no new dependency), the session is an HMAC-signed, HTTP-only cookie checked in middleware, and failed attempts lock out after five tries in fifteen minutes. The throttle is what makes a single human-chosen password safe on a public login route.

Payments

None on the site: Venmo, Cash App, PayPal

The problem was logistics — holding spots on a capped board — not taking money. Players already paid Jonah in those apps, so a card processor would have added fees and payouts before the business needed them.

Testing

Vitest on PGlite, Playwright end to end

The database code is tested against PGlite, a real Postgres running in-process, rather than a mock: asserting that the code called the database is not a test of what the database did. Playwright covers the pages, the flyer and the hero video.

Hosting

Vercel, with Vercel Analytics and Blob

Deploys from git, the database URL provisioned by the Neon integration rather than pasted in by hand, and media served from Blob.

← All work