Provider guide
Provider public profile tutorial
This tutorial explains the public provider page: profile hero, portfolio gallery, website and Instagram links, review eligibility, review submission/editing, and image lightbox.
Public profile
Portfolio
Reviews
Lightbox
Provider public page · /provider/[id]
Provider API — loads provider details from the provider id in the route.
Close Window — top button closes the current window, useful when opened from another dashboard tab.
Hero card — shows profile image/initial, category, name, experience, rating, bio, and links.
Portfolio — optional gallery appears when provider.gallery has images.
Stats — shows jobs completed, operator count, and review count.
Reviews — customers with eligible bookings can leave a review; existing reviews are listed below.
Purpose: This page is the trust-building public profile operators and customers use to assess a provider.
What you see
✕ Close Window
H
Catering
Harbour Kitchen
8 years experience
Premium canapé and seafood catering for private harbour charters.
🌐 Website ◎ Instagram
Portfolio
Provider public page · Hero card
Profile image — uses provider image filename if available.
Fallback avatar — if there is no image, the first letter of the provider name is shown.
Category — uppercase label above the provider name.
Name — large Playfair Display heading.
Experience — shown only when years_experience exists.
Rating row — shown only when average rating exists; stars are rounded from avg_rating.
Bio — shown when provider.bio exists.
Hero card
P
Photography
Pixel Harbour
5 years experience
Event photographer experienced in harbour cruises, proposals, corporate events, and sunset shoots.
Provider public page · External links
Website — appears only when provider.website_url exists.
Instagram — appears only when provider.instagram_url exists.
New tab — both links open in a new tab with safe rel attributes.
Hover treatment — website link turns blue; Instagram link turns pink.
Provider setup: Ask providers to add website and Instagram URLs because these links improve trust and conversion.
External links
🌐 Website
◎ Instagram
Hidden if empty: Empty URLs produce no button.
Provider public page · Portfolio gallery
Conditional display — Portfolio section appears only when gallery has one or more images.
Section label — blue uppercase Portfolio label with divider line.
Responsive grid — images fill a grid with 4:3 thumbnails.
Thumbnail click — clicking a thumbnail opens the lightbox at that image index.
Alt text — uses image caption if available, otherwise provider name.
Best content: Use real job photos, food presentation, setup shots, crew in action, or event service examples.
Provider public page · Stats row
Jobs done — displays provider.jobs_completed.
Operators — displays provider.operators_count.
Reviews — only appears when total_reviews is greater than zero.
Visual separation — thin dividers separate each stat item.
Trust signal: These numbers help operators judge whether a provider has marketplace history.
Provider public page · Review list
No reviews — if reviews array is empty, page shows “No reviews yet.”
Review cards — each review card shows customer name, stars, date, and comment if provided.
Date format — review dates are formatted in en-AU as day, short month, year.
Comment optional — comment text appears only if r.comment exists.
Trust signal: Reviews are one of the strongest public profile elements because customers can only review after hiring this provider.
Review list
Amelia Wong
★★★★★
25 Jun 2026
David Chan
★★★★★
12 May 2026
No reviews yet.
Provider public page · Edit review
Operator check — page checks the current operator identity via operator/me.
Edit button — appears only when operatorId exists and the review operator_id matches the current operator.
Edit mode — replaces review comment with editable rating stars and textarea.
Rating required — edit cannot save without a rating.
Save changes — sends a PUT request to the provider review endpoint.
Cancel — exits edit mode without saving changes.
Important: Normal public viewers do not see edit controls; edit is conditional.
Review with edit button
Edit mode
Provider public page · Gallery lightbox
Open — clicking a gallery thumbnail sets the lightbox index.
Overlay — dark full-screen overlay appears behind the modal.
Image — active gallery image is shown large and contained within the viewport.
Caption — appears under image only when caption exists.
Close — close button or overlay click exits lightbox.
Previous/Next — arrows appear only when previous or next image exists.
Lightbox preview
✕
‹
Seafood canapé setup before boarding.
›
Provider public page · Loading and error states
Loading — spinner and Loading text while provider API request is pending.
Provider not found — red message and Back to home link when API returns an error.
Review validation — missing star rating or missing booking shows reviewError.
Submitting — submit button shows Submitting... or Saving... while request is running.
Success — green success banner confirms the review was submitted.
Loading state
Not found state
Review validation
Provider public page · Mobile layout
Hero stacks — profile hero becomes vertical and centered on small screens.
Links centered — website and Instagram buttons are centered under bio.
Page padding — reduced padding creates more room on phone screens.
Gallery — gallery becomes two columns on mobile.
Review date — date moves to its own line to avoid cramped layout.
Lightbox — image is constrained to viewport width and height.
Mobile profile layout
H
Catering
Harbour Kitchen
Premium harbour event catering.
🌐 Website ◎ Instagram