Diggers & Bandits: RC Construction Experience

Website for a mobile RC construction experience: fleet, party and event packages, and a multi-step reservation request.

Status
Live
Type
Client project
Website
diggers-bandits.vercel.app

About this project

Diggers & Bandits is an RC construction experience: guests drive remote-controlled excavators, dump trucks and other construction machines in a hands-on dig pit. The website presents the fleet, the party and event packages, the events schedule and a gallery.

Visitors can send a reservation request through a multi-step form covering their details, the rental and schedule, delivery or pickup, and agreements. The request is emailed to the team, and the customer can receive a confirmation. I built the site from UI implementation to deployment.

My role: Developer, from UI implementation to deployment

Key features

  • Fleet

    Presents the machines guests can drive: hydraulic excavators, dump trucks, cranes, loaders and bulldozers.

  • Packages and events

    Dedicated pages for birthday parties, corporate team bonding and private events, plus packages, pricing and an events schedule.

  • Multi-step reservation request

    Guided form covering contact details, rental and schedule, delivery or pickup, and agreements, with a confirmation email.

  • Trust and practical info

    Photo gallery, Google reviews section, location and hours, how it works, safety rules, privacy policy and terms.

Technical approach

  1. Server actions for email

    Booking and contact emails are sent from Next.js server actions through the Resend API, so the site needs no separate backend.

  2. Schema validation

    The multi-step form combines React Hook Form for state with Zod schemas for validation and typed errors.

  3. Server-rendered pages

    Multi-page Next.js and TypeScript site with a component-based architecture, deployed on Vercel.

What I built

  • Built a server-rendered Next.js/TypeScript site with a component-based architecture: home, fleet, packages, events, gallery, location, contact and legal pages.
  • Implemented a multi-step booking flow with schema validation (Zod) and controlled form state (React Hook Form).
  • Set up Next.js server actions that send booking and contact emails through the Resend API.
  • Owned the project end-to-end: component architecture, API integration and production deployment.

Built with

Framework
  • Next.js
  • React
  • TypeScript
Styling
  • Tailwind CSS
  • CSS
Forms
  • React Hook Form
  • Zod
Email
  • Resend