Full stack · Business operations · Product design

Live portfolio demonstration

DutchGreen Digital Demo

A connected landscaping estimate journey and synthetic operations workspace for Ottawa.

DutchGreen digital demo home page with Ottawa landscaping services, a project image, and estimate actions

Overview

What the project is designed to do

An independent DutchGreen portfolio demonstration pairing responsive landscape-service discovery with a guided estimate flow and a clearly separated fictional customer and field-operations workspace.

Visitors can explore services and projects before preparing a three-step estimate request with validation, review, and explicit demonstration boundaries.

A cookie-gated portfolio workspace presents synthetic leads, customers, jobs, schedules, crews, materials, invoices, and deterministic assistance without real authentication.

Intended users

Who the release supports

Prospective Ottawa landscaping customers and fictional operations staff reviewing estimate, scheduling, and field-work workflows.

Problem

What needed to change

A public landscaping experience and an internal operations concept needed to feel connected without implying that estimates, accounts, notifications, or customer records were operating in production.

Solution

How the release responds

Build one coherent responsive journey, label the workspace as a portfolio demonstration, validate requests at the API boundary, and keep all operational records fictional.

Key features

What visitors can use

  • Service and project discovery
  • Three-step estimate preparation
  • Responsive customer and operations workspace
  • Lead, job, crew, material, and invoice views
  • Deterministic and clearly labelled assistance

Implementation

How it was built

  1. 01

    Next.js Server Components provide the route foundation with small interactive client islands.

  2. 02

    Zod validates and limits the estimate request handled by the same-origin API.

  3. 03

    A local HttpOnly cookie opens the synthetic workspace while persistence and notification delivery remain disabled.

Architecture

Delivery shape

A Next.js and React application separates public routes, a validation-focused estimate endpoint, and cookie-gated synthetic workspace routes without a production data backend.

Product boundary

What this release does not claim

  • Independent portfolio demonstration with synthetic records and photos, not an affiliated DutchGreen service
  • No real customer data, identity provider, persistence, appointments, notifications, or remote AI

Continue exploring

Related projects