Handwell
A marketplace where a household describes a job and compares quotes from vetted local pros, and a new pro can join on their own.
A fictional marketplace for local home pros · Next.js 16 App Router
The brief.
Written for this demo, the way briefs reach us. Handwell is a fictional company.
We started by matching cleaners and handymen to households through a messaging group and a spreadsheet. It works, but it does not grow: requests get lost, jobs go to whoever answers first and we have no record of who did what. We want a marketplace where a household describes a job and gets quotes from vetted local pros, and where a new pro can join without us chasing documents.
- 01Search and compare vetted pros by service, area, price and rating.
- 02A request that reaches the right pros and comes back as quotes.
- 03Pros who join on their own, with their checks handed to the team.
The pages and journeys in the build.
- [01]Search with a mapFilters for price, rating, date, checks, eco products and languages, kept in the address, with a map of the city that follows the list.
- [02]Pro profilesThe checks passed, services and prices, the week ahead, the service area on the map and reviews with a breakdown.
- [03]A request flowFive steps: the job, with questions that change by service, then when, where, photos and who to send it to.
- [04]Quotes to compareQuotes arrive on the request page, side by side, ready to accept. Then a message thread with the booked pro.
- [05]Join as a proAn earnings estimate, then an application in six steps with documents and a live preview of the profile.
How it works underneath.
- 01Search reads the directoryEach filter change asks a route handler for matching pros. The filters stay in the address, so a search can be shared.
- 02Requests checked and matched on the serverEach request is checked again on the server and matched to up to three pros by service, district, rating and reply time.
- 03Quotes arrive liveEach pro views the request, then quotes, on timers kept with the request, so a reload carries on where it left off.
- 04Applications handed to onboardingA pro's application is checked on the server and handed to the onboarding team with its documents listed.
- 05Files stay on the deviceJob photos and pro documents are previewed in the browser and never uploaded in the demo.
- 06Consent before measurementSearches, request steps and bookings are measured only if the visitor allows it.
The decisions, and the reason for each.
- 01Quotes, not instant bookingHome jobs vary. A quote given after the details are seen is fairer to both sides.
- 02Three matchesEnough to compare, few enough that pros still answer.
- 03Checks on every profileHouseholds choose on trust, so what was checked is shown where they choose.
- 04Payment held until doneHouseholds book with less risk, and pros know the money is there before they start.
- 05Pros onboard themselvesDocuments arrive with the application, so the team reviews instead of chasing.
Where each part sends what a visitor did.
The parts the X-ray marks inside the demo. Open the demo notes on any page and choose X-ray to see them in place.
- 1SearchTurns a job and a district into a search of the pro directory.// Pro directoryOn Home →
- 2Filters and mapEach change asks the pro directory again and keeps the filters in the address; the map follows the list.// Pro directoryOn Search →
- 3Request a quoteStarts a request with this pro, and the page it came from is recorded with it.// CRMOn a pro's profile →
- 4Send requestOn the last step, the request is checked on the server, created in the CRM with its source and sent to the matched pros.// CRM and pro appOn Request a quote →
- 5QuotesEach pro's quote arrives here as it is sent; accepting one confirms the job to both sides and holds the payment.// Pro app and paymentsOn a request, from My requests →
- 6Pro applicationOn the last step, the application is checked, created with its documents listed and handed to the onboarding team.// OnboardingOn Apply as a pro →
- 7Cookie choiceDecides whether searches, request steps and bookings are measured. Everything works either way.// ConsentOn every page →
Three things to do in the demo.
Built with Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, Motion, Zod in the browser and on the server.
Let's talk about what you are building.
A discovery session maps where visitors drop out and which systems the site should feed.