FICTIONAL BUSINESS DEMO / GUIDED ENQUIRY DESIGN
North
Creek.
From a portfolio
to a useful brief.
A fictional photography portfolio with package preselection, flexible dates and a four-step enquiry.
FOUR DETAILS / ONE BRIEF
the brief.
FLEXIBLE DATE?
THAT'S AN ANSWER, TOO.
- My contribution
- Design, development
& deployment
- Context
- Demo · Fictional photography business
July 2026 account
- Built with
- React · TypeScript · Vite
Tailwind CSS · Static Worker
01 / THE BUILDLet the portfolio lead to a useful brief
North Creek is a fictional wedding, family and brand photographer. The project combines an image-first portfolio with a guided enquiry rather than ending at an undifferentiated message box.
The public page includes a filterable masonry grid, a lightbox, sample packages and an FAQ. The enquiry then asks for the details that shape a shoot: its type, its date, its location and a way to contact the person asking.
Those details prepare a conversation; they do not calculate a price. The documented version has no quote calculation, and its front-end confirmation is not connected to delivery.
02 / THE BUILDFour questions, in a usable order
Choose a shoot type below, or start from one of the sample package shortcuts. Each shortcut preselects the type and opens the date step, following the original flow. “I'm flexible” lets the example continue without a fixed date.
KEEP THE CONTEXT
From a package to a useful brief.
Try preselection, a flexible date and per-step checks using invented details only.
- 1Type
- 2Date
- 3Place
- 4Contact
What kind of shoot?
When are you thinking?
A flexible date is an answer—not a missing value.
Where would it happen?
The source checks for more than two characters after trimming.
How would we reach you?
Use fictional details only. Nothing leaves this page.
A brief, not a quote.
No enquiry was sent. This is not a quote, delivery receipt or saved customer record.
Choose a shoot type, or start from a sample package.
Read the explanation without interacting
The source asks for shoot type, date, location and contact details. A package preselects the type and opens the date step. A date can be flexible. The location, name and phone use string-length checks, and email uses a pattern. Passing them does not confirm a real contact or availability. This local example ends at a review screen and never sends, saves or quotes an enquiry.
Use only fictional details. This explanation keeps inputs in memory and produces a local review screen. It is not a quote, a saved lead or a sent message. No enquiry leaves this page.
03 / THE BUILDKeep the package context
The documented page has three packages with visible price labels. Selecting a package opens the enquiry with its shoot type already selected rather than asking the visitor to repeat that choice.
The example below carries that category, not a price. The complete package data is not available in the supplied account, so there is no estimate to calculate here.
04 / THE BUILDValidate a step before advancing
The original validation checks that a type has been chosen, that a date is present or flexible, and that the trimmed location contains more than two characters. Contact validation checks name length, an email pattern and phone-string length.
These are front-end input checks. They do not establish a real phone number, verified email address, available date or successful delivery. The article includes the original function and an interactive inspection of its boundaries.
05 / THE BUILDThe visual work and the remaining work
The source describes a warm-paper layout, Cormorant Garamond headings and a twelve-image portfolio, built with React 19, TypeScript, Vite, Tailwind CSS v4 and motion for the enquiry transitions. The application is deployed as static assets on a Cloudflare Worker.
The original next steps are an enquiry endpoint with an email notification and lazy-loading for a larger image collection. Both remain unfinished in the source account. The layered contact-sheet graphic here is an illustration; no genuine portfolio capture or client photograph was supplied for this page.
Source, dates, and what this page verifies
This rewrite describes the supplied fictional-business project and its article published July 17, 2026. The original publication date and canonical source address are preserved. The original application and current deployment have not been audited.
New miniatures are explicitly illustrative, not screenshots or full reproductions. All teaching inputs stay in memory. No booking tool, enquiry service, message provider or outside page is loaded by an interaction. Original code excerpts remain unchanged and are displayed rather than executed as application code.
The named source limits and exact explanation of each new model are recorded in docs/batch-4/SOURCE-REVIEW.md. No business, medical, conversion or performance outcome was measured for these demos.