Skip to content
coded4
Download CV Available for contract & freelance work
 All work
Case study Own studio Integrations

Shock Creative Admin

Hosting that bills itself, and tells me when something breaks.

The Shock Creative Admin dashboard with demo data: one site down, one payment past due, one stale backup and the monthly recurring revenue
Role
Design & development
Platform
Private web app on its own Forge server
Stack
Laravel 13, Inertia, Vue 3, Stripe, Pest
Status
Live

The brief

One place to sign up, bill and watch every site Shock Creative hosts, without chasing anyone.

Shock Creative offers managed hosting, but there was no system behind it. Payments were collected by hand, setting a client up for a recurring payment was awkward for both sides, and nothing told us when a payment failed or a site went down. Problems were only noticed when someone happened to look.

Now I add a Customer and their Site with a fixed monthly price and press Send. The client gets an email with a link to a Shock Creative page that explains what they are signing up for, accepts the hosting terms and sets up a Bacs Direct Debit through Stripe, with card as a fallback. From then on each Site is billed monthly from its go-live date, with no one doing anything.

It was built to fix three things:

  • Chasing payments. A failed payment marks the Site Past due and emails me straight away, and again if it is still unpaid after 14 days. Every Site shows its payment history from Stripe.

  • Knowing a site is up. Every site is checked every 10 seconds. Three failures in a row open an incident and email me, and I get another email when it recovers. Forge database backups are watched too, and a stale or failed one is flagged.

  • Finding things quickly. One dashboard lists everything that needs attention: sites down, payments past due, invites waiting more than 7 days and backups. Customers and Sites live in one place, and every change is in an audit log.

Design

The admin uses Shock Creative’s own brand: the same colour tokens, fonts and logo as the marketing site, copied in rather than shared, on top of shadcn-vue components. Section labels are set in a monospace face, and anything that needs attention, a site down or a payment past due, is marked in red.

A Site’s page holds its whole story: details, price, current uptime, uptime over 24 hours, 7 days and 30 days, a response time chart, incidents, the latest backup, payment history and its audit trail. Forms do the typing for me: pick a Forge server and site from dropdowns and the URL and PHP version are filled in.

The client only ever sees the onboarding page. It says which site it is for, the monthly price, when billing starts and how Direct Debit works, in plain English, before anyone is asked for bank details.

A Site page in the admin: details, price, uptime for 24 hours, 7 days and 30 days, a response time chart, a resolved incident, backups and payment history
The client onboarding page: the site, its monthly price and billing start date, what managed hosting includes, how Direct Debit works and a checkbox to accept the hosting terms
The new Site form: name, URL, platform, monthly price, go-live date, uptime keyword and Forge server and site dropdowns that fill in the PHP version

Build & release

Shock Creative Admin is a Laravel 13 app with Inertia and Vue 3, built on the Laravel Vue starter kit and hosted on its own Forge server, away from the client sites, so monitoring keeps running if a client server goes down. The rules live in services with small interfaces, and Stripe and Forge sit behind gateways so the whole thing can be tested without either.

Locked down There is one Admin, created with an artisan command. Public registration is off, and Fortify asks for a TOTP two-factor code on every login.
One subscription per Site Each Site has its own Stripe subscription through Laravel Cashier. Billing starts on the later of the go-live date and the Direct Debit being set up, price changes apply from the next invoice, and a client who already has a Direct Debit is added to it without filling in their bank details again.
Webhooks drive the state Stripe events move a Site between Draft, Invite sent, Active, Past due, Cancelling and Cancelled. Each event is handled once, and every change is written to the audit log.
A monitor that does not cry wolf Checks run every 10 seconds and never faster during an outage. If most sites fail at once, I get one "possible monitor problem" email instead of one per site. Raw checks are rolled up into hourly stats and kept for 7 days.
Forge, read only The Forge API fills the server and site dropdowns and reports the latest database backup every hour. It can never change anything on a server, and it alerts once per stale or failed backup, not every hour.
Tested at the edges More than 360 Pest tests act as the Admin, the client or Stripe would, with Stripe, Forge, mail and time faked at the edge. PHPStan, Pint and vue-tsc run in the same check.
Live Live on its own Forge server since October 2026.

Outcome

Average uptime across hosted sites
99.9%
Incidents caught before a client noticed
1
Next project
Hexbrew

Cookie preferences

Choose what you're happy with. You can change this any time from Cookie settings in the footer.

Strictly necessary
Keeps the site working, like remembering your cookie choice and light or dark mode.
Always on
Analytics
Google Analytics (_ga, _ga_*) counts visits and which pages are read. Kept for up to 2 years.