Project Deep Dive

Fence For Hire

Fence For Hire is a full-stack business website built for a fence installation company. It showcases the company's services and products, handles customer inquiries through a validated contact form, and is built with a clean component-based architecture designed to be maintainable and easily extended.

ReactTypeScriptExpressPostgreSQLDrizzle ORMshadcn/uiTailwind CSS

Project Vlog

The Brief

A local fence company needed a professional web presence that could showcase their services and capture customer leads. The site needed to look polished, load fast, and make it easy for potential customers to request a quote.

What It Does

Fence For Hire is a multi-page marketing and lead-capture site. Visitors can browse the company's services, view fence product options, read about the company, and submit a contact inquiry. The backend captures and stores those inquiries for follow-up.

Key Features

  • Service and product showcase — clean product grid with imagery and descriptions
  • Contact form — validated with Zod schemas on both client and server, preventing bad data from reaching the database
  • Persistent lead storage — form submissions stored in PostgreSQL via Drizzle ORM
  • Accessible UI components — built with shadcn/ui (Radix UI primitives), which provides WAI-ARIA compliance out of the box
  • Responsive design — mobile-first layout with breakpoints for tablet and desktop
  • Tech Stack Decisions

    Why Vite + React? Fast dev experience with HMR, mature ecosystem, straightforward to deploy as a static site.

    Why Express + Drizzle + Neon? A lightweight API layer was needed to handle form submissions securely without exposing database credentials to the client. Drizzle gives type-safe queries without the overhead of a heavy ORM, and Neon's serverless PostgreSQL is a good fit for a site with low but important write traffic.

    Why shadcn/ui? The component library provides a solid design system foundation without locking into a specific look-and-feel. Every component is customizable at the source level, which made it easy to apply the company's navy and gold brand colors.

    Architecture

    The app is a monorepo with a shared schema package:

  • client/ — Vite + React SPA, communicates with the Express backend via TanStack Query
  • server/ — Express API with Drizzle-powered routes for form submission and user data
  • shared/ — Zod schemas and Drizzle table definitions shared between frontend and backend for consistent validation
  • What I Learned

    Building for a real business client is different from building for a portfolio. The design decisions were guided by the customer's brand identity, not personal preference. Working within those constraints — navy blue, gold, professional tone, mobile-first — was a useful exercise in translating a brief into a finished product.