Burak Cebe

Young Man’s Services

Website for a lawn care, small engine and trucking business in Chester, Virginia.

Drawing
DWG 01
Revision
Live
Year
2026
Role
Design and build
Status
Live
Type
Web design, Front-end, Back-end
Tools
Next.js 16, Supabase, Vercel, Figma
Young Man's Services home page at desktop width: a bold uppercase headline, 'We cut grass, not corners. Engines and trucking too.', orange Free Estimate and green Call buttons, and an illustration of a young man pushing a lawn mower.
Fig. 01.1Home, 1440 px.

A fast, plain-spoken site for an owner-run local business. Prices are published up front, a free estimate takes one short form, and behind it sit staff and customer accounts that turn an estimate into a scheduled job.

Visit the live site ↗

§01Overview

Young Man’s Services does lawn care, small engine repair and trucking around Chester, Virginia. Most visitors are homeowners on a phone, so the page leads with the price ranges, a call button and a free estimate form, and everything else waits below.

The business has a 5.0 rating from 13 Google reviews, and the site says exactly that and nothing more: no invented customer counts or years in business.

Home page on a phone: headline, Free Estimate and Call buttons, rating badge.
Fig. 01.2Phone, 390 px.
The free estimate form beside a dark green panel titled How it works, with three numbered steps and a 2 by 2 grid: 5.0 star Google rating, 13 of 13 five-star reviews, 3 service lines, $0 estimates.
Fig. 01.3Estimate form and the only four numbers the site claims.

§02What’s behind it

  1. 01

    Estimate requests

    Validated on the server, saved to the database and emailed to the owner. A hidden honeypot field drops spam without a captcha.

  2. 02

    Staff area

    Each staff member signs in to their own job list. The admin reads the estimate inbox, turns a request into a job and assigns it.

  3. 03

    Customer accounts

    Customers get their quote by text or email and accept or decline it online.

  4. 04

    Security

    Sign-in is checked twice, at the edge and again on the server, and Postgres row-level security is the last line. Public sign-up is off; staff join by invite.

§03Build

Framework
Next.js 16 App Router. Public pages are static; only the staff and account areas render per request.
Data and auth
Supabase: Postgres with row-level security, email invites and password resets
Hosting
Vercel
Design system
Built in Figma first (colour, spacing and type variables, button, field and service-card components), mirrored one to one in CSS tokens
Type
Barlow Condensed for headings, Source Sans 3 for reading
Lighthouse
Home page on mobile: 98 performance, 100 accessibility, 100 best practices, 100 SEO (local production build)
Testing
41 end-to-end checks against a real local Supabase: forms, roles, invites, password resets and row-level security

§04Brand

Logo, app icon and merch mockups. The full set is in the portfolio.

App icon: a smiling cartoon boy in a cap beside a green leaf, on a rounded dark green square.
Fig. 01.4App icon.
Mockups of a dark green hoodie and a cream T-shirt, each printed with the mower illustration.
Fig. 01.5Hoodie and tee mockups.
Mockup of a cream and green cap embroidered with the mower illustration.
Fig. 01.6Cap mockup.
Next · DWG 02Robot main board →