Case study
My Tech Hero
Small Business Website & Customer Request Platform
A production website for my technology support business: clear service information, a low-friction request flow, and a deployment I own from code to custom domain.
- React
- Cloudflare
- Turnstile
- Resend
Status: Live in production
01 / Overview
Overview
My Tech Hero exists to make professional technology help approachable for people who find technology frustrating or overwhelming. The development challenge was translating a service business into a clear web experience.
- Communicating services clearly
- Establishing trust
- Making it simple to ask for help
- Working well on phones
- Protecting the public request form
- Running on a professional production setup
02 / Challenge
The challenge
A mixed audience
Visitors may not be comfortable with technology, so navigation and language had to stay plain and unintimidating.
Services without jargon
Help spans computers, phones, Wi-Fi, printers, streaming, and smart-home devices. Each needed an everyday description.
A low-friction request
Asking for help had to take very little effort, whether by form or by picking up the phone.
A public form
Any open contact form attracts automated abuse. It needed protection that would not get in the way of real customers.
Real production needs
A local service business still needs search metadata, a custom domain, and dependable hosting.
03 / Role
My role
I built My Tech Hero for my own technology support business, so the product decisions and the engineering were both mine.
Product and UX decisions
Structure, language, and the path from landing to request.
Frontend development
The React application and its responsive layout.
Request workflow
Form, validation, and email delivery through a Cloudflare Worker.
Spam protection
Cloudflare Turnstile on the form, verified on the server.
SEO configuration
Metadata, canonical URLs, robots.txt, and sitemap.xml.
Deployment and domain
Cloudflare deployment and custom domain setup.
04 / Delivered
What I built
Business Website
A responsive, service-focused site with a home page, a pricing page, and a request confirmation page, written in plain language.
- Home
- Pricing
- Request confirmation
- Responsive layout
Customer Request Flow
A request form that takes a visitor from reading about services to a confirmation page, with call and text options for anyone who would rather not type.
- Request form
- Call or text
- Confirmation page
Form Protection
Cloudflare Turnstile guards the form without a puzzle-heavy CAPTCHA. The Worker verifies the token and validates the fields on the server before any email is sent.
- Turnstile
- Server-side verification
- Server-side validation
Production Infrastructure
One Cloudflare Worker serves the built React app and handles the request endpoint, on a custom domain over HTTPS, with structured logging for troubleshooting.
- Cloudflare Worker
- Static assets
- Custom domain
- HTTPS
Search Foundation
Per-page titles, descriptions, and canonical URLs, plus robots.txt and sitemap.xml. The confirmation page is kept out of search results.
- Page metadata
- Canonical URLs
- robots.txt
- sitemap.xml
05 / Flow
Customer journey
The path a visitor takes on the live site, from first impression to a confirmed request.
Home page
Discover
The page opens with a plain-language promise and a list of everyday tech frustrations visitors will recognize.
Home page sections
Explore services
Sections describe the services and the ways to get help, in everyday terms.
/pricing
Review pricing
A dedicated page lists starting prices, so cost is clear before anyone reaches out.
Contact section
Request help
The request form sits on the home page, next to call and text options for anyone who would rather talk.
Cloudflare Worker /api/contact
Protected submission
The form needs a Turnstile token to submit. The Worker verifies it, validates the fields, and only then sends the request by email.
/request-received
Request received
A confirmation page tells the visitor the request went through. It is excluded from search indexing.
06 / Decisions
Key decisions
Keep the experience approachable
Services are described in everyday language, and prices live on their own page so visitors are not left guessing.
Protect the form without adding friction
Turnstile keeps automated submissions out, and verifying the token on the server means the check cannot be skipped by bypassing the browser.
Treat SEO as product infrastructure
Canonical URLs, robots.txt, sitemap.xml, and per-page metadata shipped with the first production build rather than being bolted on afterward.
Make it easy on a phone
Requests can start from a phone, so the layout collapses to a mobile menu and the contact section offers call and text buttons.
One Worker for the site and its API
Serving the app and the request endpoint from a single Cloudflare deployment keeps hosting simple and leaves fewer moving parts to maintain.
07 / Stack
Technology
- Frontend
- React, Vite, Custom CSS
- Request handling
- Cloudflare Workers, Resend
- Protection
- Cloudflare Turnstile
- Hosting
- Cloudflare, Wrangler, Custom domain
08 / Result
Result
What shipped, and what it took to run it in production:
- A production-ready business website
- A responsive service and pricing experience
- A protected customer-request flow with a confirmation state
- A custom domain served over HTTPS
- A search-engine foundation: metadata, canonical URLs, robots.txt, sitemap.xml
- A live deployment on Cloudflare
Work with me
Need something like this built for your business?
I build, fix, and improve web applications and business websites. Tell me what you need and we can work out the next step.
Prefer email? Write about a business website