Case study 03 / 08Web
Ocean Trading Auction
Making Japanese auction-house stock easy to browse and book
Maker/model browsing with live counts, lot booking, favourites and one-click PDF photo export.
- Role
- Senior Full Stack Developer (in-house)
- Industry
- Japanese vehicle auctions and export
- Region
- Japan
- Stack
- React.js · PHP Laravel
- Live
- Private build
Overview
Ocean Trading Auction helps customers find vehicles listed in Japanese auction houses. Buyers browse the whole auction catalogue by maker and model, see how many vehicles are available per model, open the details, and book a vehicle in a few clicks. The front-end is React and the back-end is PHP Laravel.
The challenge
Japanese auction houses list a huge, constantly changing volume of vehicles, and overseas buyers find that catalogue hard to navigate. Buyers need to narrow it down quickly, keep track of the vehicles they like, pass lot numbers to their agent without mistakes, and share photos with their own customers.
The solution
I built a React interface on a Laravel back-end. It organises auction vehicles by maker list and model list, with vehicle counts per model so buyers know where the stock is. From a vehicle's detail page they can copy the lot number, book the vehicle or bookmark it. A single action downloads all of the vehicle's images as a PDF.
Key features
Maker and model browsing
Browse all available auction vehicles by maker list and model list.
Vehicle counts per model
Buyers see at a glance how many vehicles each model has available.
Vehicle details
Full vehicle detail view for every listing.
Copy lot number
One-click copy of the lot number to avoid transcription errors.
Booking
Book a vehicle directly from its detail page.
Favourites
Bookmark vehicles to come back to them later.
Images as PDF
Download all of a vehicle's images as a single PDF to share or archive.
How it fits together
From the people using it to where it runs: the main parts of Ocean Trading Auction and how they connect.
- Users01Auction buyersBrowse by maker and model, book lots
- Client02React UICounts, details, favourites and lot copy
- API03PHP LaravelCatalogue, booking and favourites data
- Output04PDF exportAll of a vehicle's images in one PDF
Tech stack and why
- React.js
- Browsing and filtering a large catalogue needs a responsive, stateful interface.
- PHP Laravel
- A mature framework for APIs, authentication, queues and data handling, well suited to a catalogue-and-booking back-end.
Architecture
- Laravel API serving catalogue, booking and favourites data to a React front-end.
- Aggregated maker/model counts so buyers see stock distribution before drilling in.
- User accounts for bookings and bookmarks.
- Server-side PDF assembly of vehicle images.
Process
Mapped how buyers actually search auctions (maker, then model, then lot).
Designed browse, detail and booking flows.
Built the Laravel API and React UI.
Added productivity features
Lot copy, favourites, PDF export.
Deployed and iterated with the sales team.
Outcomes
- Buyers can move from the full auction catalogue to a specific lot in a few clicks.
- Copying lot numbers and exporting photos as PDFs cuts manual back-and-forth with buyers.
- Favourites and booking keep the buyer's shortlist inside the platform.
Gallery
Related projects
See all projects- WebOcean TradingAdvanced stock search, detailed vehicle pages and multi-language, multi-currency support, built to rank internationally.Next.js · Node.js
- EnterpriseOcean ERPVehicle inventory, sales, payments, expenses and financial reporting in one multi-branch, multi-currency system.React.js · Node.js
- WebKhushi MotorsEvery vehicle in the showroom online, across locations, languages and currencies, and built to rank.Next.js · Node.js
Need something similar? Hire a React & Next.js developer.
Need a catalogue or booking platform for a complex inventory?
I build web, mobile and enterprise software for teams in Pakistan, the UAE/GCC, the UK and beyond. Tell me what you're working on and I'll reply with a clear plan.