MABcars AutoTrade
A Philippine car trading platform where owners submit their car once, certified partner dealers bid, and the seller takes the highest offer — no dealership tours, no obligation.
I built MABcars AutoTrade as an SEO-first marketing and lead-capture site for a car trading business in Pasig City. Sellers fill in a short "board" with their car details, partner dealers bid, and the seller is called back with the highest offer. Every submission lands in a Neon Postgres database and is worked from a password-protected admin dashboard that gets live updates and Web Push notifications on every phone the team has enabled. The site ships with per-route metadata, JSON-LD structured data, a generated sitemap, Cloudflare Turnstile bot checks, rate limiting, and a staging branch deployed as a Vercel preview. Built with Next.js 16, React 19, TypeScript, Tailwind CSS 4 and Drizzle ORM.
Features
A mobile-first car trading site designed to capture organic search traffic for sell and valuation intents and convert visitors into vehicle submissions.
Sell My Car Board — A short, forgiving form (prefilled from the home page quick form) that validates server-side, stores the lead, and returns a reference number to the seller.
Dealer Bidding Flow — Explains the three-stop route — submit, dealers bid, viewing and payment — with a worked bid board and fare matrix so sellers know what to expect.
Admin Dashboard — Password-protected lead list with search, type and status filters, per-lead notes and offer tracking, CSV export, and highlighting of leads that miss the 10-minute promise.
Push Notifications — Standards-based Web Push (no third-party service) alerts every enrolled browser or phone the moment a new lead arrives; the admin also polls for live updates with a toast and chime.
SEO Foundation — Unique titles and descriptions per route, Open Graph images, canonical URLs, Article and FAQ JSON-LD, plus generated sitemap, robots and web manifest.
Guides & FAQ — Owner-focused articles on selling, valuation and LTO paperwork, and a grouped FAQ, each linking back to the sell CTA.
Abuse Protection — Cloudflare Turnstile on every public form, per-IP and per-mobile rate limits, admin login lockout, and hardened security headers.
Staging Workflow — A staging branch deployed as a noindex Vercel preview against its own Neon database branch, so test leads never touch production data.
Screenshots
Tech Stack
This project runs on the latest Next.js and React with a lightweight, serverless-friendly data layer, keeping the site fast to crawl and cheap to operate.
Frontend
React v19.2.8 — A JavaScript library for building dynamic and interactive user interfaces using reusable components.
TypeScript v5.x — Adds static typing to JavaScript, improving code maintainability, scalability, and developer productivity.
Next.js v16.3.3 — App Router with Server Components, Server Actions, route metadata, and generated sitemap, robots, manifest and Open Graph images.
Tailwind CSS v4.x — A utility-first CSS framework; design tokens are declared under @theme to keep the black, white and red brand system consistent.
Backend
Server Actions — Form submissions are validated and saved on the server, with notifications fired after the response so a failure never blocks the seller.
Drizzle ORM v0.45.2 — A type-safe SQL ORM used to define the schema and query leads, push subscriptions and rate-limit tables.
Neon Postgres — Serverless Postgres provisioned through the Vercel Storage integration, with a separate branch for development and preview data.
Web Push v3.6.7 — VAPID-signed push notifications delivered through a service worker to Android, desktop and iOS Home Screen browsers.
DevOps
Vercel — Hosts production and the staging preview, with functions pinned to Singapore next to the database.
Cloudflare Turnstile — Bot check on every public form, verified server-side and failing open so real sellers are never blocked.
Git — Used for distributed version control, enabling efficient code management, branching, and collaboration.