Battle Motors Web Platform
Everything I sell, in one URL — UI/UX, a modern React front-end, motion graphics, and a real PHP/MySQL backend powering live truck inventory.
A legacy heavy-industry brand competing in vocational refuse and infrastructure needed a web presence that could match its hardware ambitions. The prior site couldn't carry live inventory, didn't speak to dealers, and looked nothing like the engineering behind the trucks.
The work had to do three jobs at once: sell trucks to buyers, give dealers tooling to manage their own stock, and prove — to anyone who looked under the hood — that the company builds modern software. All while I served as CDO/CMO, meaning I owned the narrative and the codebase simultaneously.
Pick a current, honest stack
React 19 + TypeScript + Tailwind 4 + React Router 7 + TanStack Query + React Leaflet — written this year, current versions, no legacy debt. The point isn't novelty; it's that a buyer who inspects the site sees production-grade modern engineering, not a template.
Motion as a system across 23 pages
Framer Motion is in use on 15 of the 23 pages — truck card reveals, build-flow transitions, scroll choreography. This is real motion design governed across a large surface, not an effect dropped on the home page.
Own the full motion-graphics pipeline
Five hero videos (hero_01–hero_05) encoded in both .mp4 and .webm with poster JPGs, from 60MB raw source clips — building exterior, drone over production, welding, console, truck — driven by an encode_hero_videos.sh script. The encoding strategy is part of the deliverable, not an afterthought.
Wire the front-end to a real database
PHP serving JSON APIs against MySQL: bootstrap helpers, structured error handling, JSON response shaping. The React front-end consumes it through TanStack Query. This is the part most designer portfolios can only claim — here it's verifiable at the URL.
The backend is production PHP/MySQL, not toy code. Three core tables drive live inventory, consumed by a set of JSON endpoints the React app queries.
Endpoints: trucks, truck-specs, dealers, inventory, news, newsletter, contact, search. Comprehensive SEO infra layered on top — JSON-LD Organization schema, OpenGraph + Twitter cards, sitemap.xml, llms.txt for AI discovery, geo metadata, canonical alternates.
| Table | Holds | Feeds |
|---|---|---|
| ice_trucks | Truck models & configurations | Inventory grid, Truck Detail |
| dealer_stock | Per-dealer available units | Dealer Locator, stock counts |
| truck_spec | Spec sheets per model | Truck Detail, comparisons |
Hero video pipeline
Five cinematic clips encoded for the web in two formats with posters, swapped by context across the site. The drone-over-production and welding clips anchor the brand in real manufacturing — motion graphics doing brand work, not garnish.
Truck card interactions
The inventory and category grids use Framer Motion for staggered card reveals and hover states, so browsing a dense catalog feels responsive and deliberate rather than like a spreadsheet.
Buyer-facing site
23 pages: Home, Build Truck, Truck Inventory, Truck Category, Truck Detail, Dealer Locator, Quote Request, plus News, History, Technology, Services, Financing, First Responders, Safety, Careers, Parts, and more.
Build Truck flow
A guided configuration experience backed by the ice_trucks and truck_spec tables — the bridge between marketing browse and a real quote request.
Admin & dealer portals
Separate PHP apps for admin and dealer-admin let dealers manage their own inventory. This isn't a marketing site — it's a multi-tenant platform with a front-of-house and back-of-house.
Framed as modernizing a heavy-industry brand for the web: a legacy manufacturer's static presence became a live, database-backed platform.
Static, manually-updated listings
Live MySQL-backed inventory + dealer stock
No self-service tooling
Dealer-admin portal to manage stock
Generic stock imagery
Cinematic hero pipeline from real production footage
A single URL that demonstrates UI/UX, modern React, motion graphics, and a working backend — verifiable in 30 seconds at battlemotors.com.
Front-end pages
Pages with Framer Motion
Core MySQL tables, live
Encoded hero video clips
Designer-engineer owning the full stack
To verify it live — battlemotors.com
Original wireframes and end-to-end UI/UX in Figma, stack selection, front-end implementation, motion-language design, the hero video encoding pipeline, and integration with the existing dealer database — while owning the brand narrative as CDO/CMO.
Fortris Command
Want something like this?
Start a conversation→