Ocean Trading

01Overview

oceantrading.jp is the public showroom and export website for Ocean Trading. International buyers can search the inventory in detail, compare vehicles and request a quote, in their own language and currency. It is built with Next.js on a Node.js back-end for speed and search visibility.

02The challenge

Overseas buyers can't visit a yard in Japan. They decide from a screen, often on mobile, often on slow connections, and often comparing several exporters at once. The site had to make a large inventory easy to filter, show enough detail to build trust, display prices in the buyer's currency, and still rank in search for international customers.

03The solution

I built a Next.js site with server-rendered, SEO-friendly vehicle pages and a Node.js back-end. Advanced filters cover make, model, year, body type, price and other specifications. Each vehicle page shows images, specifications, pricing, stock status and an inquiry option. Multi-language, multi-currency and multi-location support makes the same inventory work for buyers in different markets.

04Key features

• 01

  Advanced search and filtering

  Filter by make, model, year, body type, price and other specifications.

• 02

  Detailed vehicle pages

  Images, specifications, pricing, stock status and inquiry options on every vehicle.

• 03

  Quote-led buying flow

  Stock cards show an estimated FOB price and a 'Get a Quote' call to action, and a step-by-step 'How Ocean Works' section explains the export process (as seen on the live site).

• 04

  Browse by body type and popular model

  Entry points such as 'Most Popular Models' with live availability counts (as seen on the live site).

• 05

  Multi-language, multi-currency, multi-location

  One inventory presented for different markets and showroom locations.

• 06

  Responsive and fast

  Mobile-first layouts and performance work aimed at international buyers on varied connections.

06Tech stack and why

Next.js

Server-side rendering and static generation give search engines and social previews fully rendered vehicle pages, which a client-only SPA can't.

Node.js

A JavaScript back-end serves inventory data to the site and fits the rest of the ecosystem.

Linux VPS, Nginx, SSL

Full control over caching, compression and HTTPS for a site where speed matters.

07Architecture

1. SEO-first rendering: vehicle and listing pages are rendered on the server, with per-page titles, descriptions and Open Graph tags (the live site sets a canonical URL and og:image).
2. Localisation: language, currency and location are handled as first-class settings rather than separate sites.
3. Faceted search: multiple filters combine to narrow a large inventory quickly.
4. Deployed on a Linux VPS behind Nginx with SSL/HTTPS. Node.js processes are managed with PM2.

08Process

1. Step 1

   Defined buyer journeys

   Search, compare, inquire.

2. Step 2

   Designed responsive listing and vehicle-detail templates.

3. Step 3

   Built the Next.js front-end and Node.js data layer.

4. Step 4

   Added localisation (language, currency, location).

5. Step 5

   Did technical SEO and performance passes, then deployed to production.

6. Step 6

   Continue with ongoing optimisation as part of the live ecosystem.

09Outcomes

• International buyers can find, filter and inquire about vehicles without contacting sales first.
• Server-rendered pages give search engines and social platforms complete, indexable content.
• The same inventory serves several markets through language and currency switching.

10Gallery