Motorcycle Marketplace
Explore motorcycles through riding-specific filters, structured details, and focused photo inspection.
01 — The brief
Start with the useful tension.
Motorcycle shoppers need a focused way to search a varied inventory by riding-relevant criteria, compare structured listing facts and inspect the available photos of a bike before deciding what to save or review further.
People looking for new or used motorcycles in Switzerland, together with private sellers and motorcycle dealers who need a structured listing workflow.
Independently built the motorcycle marketplace implementation: the motorcycle-specific data model and mode configuration, German search and riding-relevant filters, listing detail and photo inspection flow, local favourites, and the account surface for managing motorcycle advertisements.
02 — Capability ledger
What exists, what is next.
A plain-language status check, so a polished surface never implies more than the work supports.
Implemented
05- Motorcycle-specific marketplace mode
The motorcycle build supplies its own hero, copy, favicon, categories, fuel and transmission options and preserved local favourites key; the API selects the motorcycle inventory and exposes motorcycle-only fields such as cylinders, licence category and riding equipment.
- Search, facets and riding-relevant filters
Visitors can search title, make, model, version or city, select make/model facets, set year, CHF price, power and displacement ranges, filter by cylinder count, derived licence category, seller type, motorcycle category and condition, then sort and paginate the results.
- Structured motorcycle detail and photo inspection
A motorcycle listing opens in a URL-addressable detail dialog with price, location, condition, mileage, registration, identity, mechanical data, licence category, MFK and equipment fields and description; the image gallery supports thumbnails, previous/next navigation and an on-demand PhotoSwipe inspector with zoom.
- Browser-saved motorcycles
Visitors can save and remove motorcycles with the heart controls, open a saved-only results view and keep the saved IDs in this browser while the inventory is fetched and paged.
- Account-based motorcycle listing management
The account surface supports email registration and login, conditional Google/password-reset paths, image uploads, and create/edit/delete workflows for motorcycle listings with motorcycle equipment and MFK fields; the server derives a licence bucket from power rather than accepting it as user input.
Planned
00Nothing recorded here yet.
Unverified
00Nothing recorded here yet.
03 — Design decisions
The reasoning stays in the room.
01Use one shared frontend with an explicit motorcycle mode
The vehicle configuration centralizes mode-specific copy, imagery, field options and icons while the shared search, detail and account components keep behavior consistent; motorcycle-only controls are gated so cars do not inherit licence or motorcycle equipment semantics.
02Keep motorcycle inventory and account data isolated
The backend resolves motorcycle paths under data and gives the mode its own inventory endpoint context, while car deployments use separate paths and cookie names; this keeps the shared product from silently mixing vehicle families.
03Make filters and details shareable through URL state
Search, filter, sort, saved-only state and the selected listing are synchronized to query parameters; opening a detail pushes history and closing it returns through browser history when appropriate.
04Derive licence buckets from recorded power and explain the limit
The backend computes A1, A beschränkt or A offen from power in kW and the UI labels that result as derived, explicitly noting that it is not confirmation of a person's legal riding entitlement.
05Load the high-resolution photo inspector only on demand
The initial detail view uses responsive preview images and thumbnails, while the PhotoSwipe core is dynamically imported only after the visitor asks to inspect the gallery; the inspector is configured for bounded navigation, zoom and focus restoration.
06Keep demo contact actions visibly inactive
Demo records are labelled in cards and details, show an explicit inactive-contact notice and render contact actions disabled, so capture data does not imply a live seller relationship.
07Reject mismatched motorcycle filters at the API boundary
The server rejects car-only filters on the motorcycle endpoint and nulls car-only fields during projection, making a mode mismatch explicit instead of returning misleading cross-family data.
04 — In the hand
Screens that explain themselves.
Images are shown as captured when available. Missing captures are labelled rather than quietly invented.
05 — A short walk-through
See the shape of the interaction.
Motorcycle filter to detail and photo inspection
- Start at / in the motorcycle mode with the sanitized local demo inventory visible.
- Open Weitere Filter, choose 2 under Zylinder and submit; hold on the expanded panel and updated 1–9 von 9 result count.
- Return to the unfiltered listing, open the Honda CBR 1000 RR-R Fireblade SP card, and hold on the detail dialog showing price, location, mileage, registration, motorcycle facts and photo thumbnails.
- Select the third thumbnail, activate Fotos ansehen, advance or zoom once in PhotoSwipe, then close with Escape and stop back on the detail dialog.
The materials