Automotive Parts Commerce Platform
A full-stack automotive parts commerce MVP built around a practical order-request workflow. The page below documents storefront behavior, catalog structure, order tracking flow, and admin operations based on real interface screenshots.
Product Surfaces (UI Reference)
Screens from the e-commerce interface illustrating the storefront, catalog browsing, order tracking, and admin operations.
Storefront promotions
Landing page with category navigation, campaign hero, and recommendation strip for the commerce surface.
- Free shipping campaign appears with minimum order THB 800
- Discount cards for THB 500 and THB 100 are visible
- Coupon codes shown: TYTBAT500ECM and TYTPAR100ECM
Parts category with filters
Product grid for the parts category with filter controls, brand checkboxes, and sort dropdown.
- List count shown as 20 products in this category
- Brands include Toyota Genuine Parts, Denso, Osram, Deestone, TRD, and Aisin
- Sample items include fuel cap, H4 lamp, spark plug, and V-ribbed belt
Tires category
Separate tire catalog page with dedicated filter set and higher-price product cards.
- List count shown as 12 tire products
- Brands include Deestone, Michelin, Westlake, Bridgestone, and Yokohama
- Sample prices shown from THB 1,790.00 to THB 2,990.00
Public order status tracking
Customer-facing status page for checking order progress using an order number.
- Format guidance shown: ORD-YYYYMMDD-XXXXX
- Single input field and one check-status action
- Keeps tracking lightweight without account prerequisites
Admin insert-data panel
Back-office setup for fitment and product master data before linking inventory to compatible vehicles.
- Separate forms for Make, Model, Year, and Trim
- Dependent selectors enforce hierarchy order before save
- Navigation shortcut to the orders management screen
Admin orders management
Operations table for search, pagination, and order-level drilldown from a single admin view.
- Columns include order number, status, payment state, total, and timestamp
- Sample records include ORD-20250915-XTVYZ and ORD-20250912-PVVX7
- Status examples include pending and cancelled records
Order detail and bank slip
Detailed order page with totals, shipping address, payment state, and bank-slip attachment area.
- Order id shown: ORD-20250915-XTVYZ
- Totals show subtotal THB 4,110.00 and shipping THB 0.00
- Unpaid state and bank-slip block are visible in the same view
Sample Interface Data
Example values captured from the interface to illustrate real commerce data.
Promotions
FREE_SHIPPING_MIN: THB 800
COUPON_500: TYTBAT500ECM (min THB 3,000)
COUPON_100: TYTPAR100ECM (min THB 1,000)
PROMO_LAYOUT: Hero banner + coupon cards + recommended products
Product Samples
Fuel cap -> THB 230.00
H4 60/55W front lamp -> THB 220.00
Spark plug SC20HR11 -> THB 380.00
Westlake RP18 185/65R15 -> THB 1,790.00
Order Records
ORD-20250915-XTVYZ | pending | unpaid | THB 4,110.00
ORD-20250912-9K3I1 | cancelled | unpaid | THB 11,470.00
ORD-20250912-PVVX7 | pending | unpaid | THB 460.00
ORDER_DETAIL_SAMPLE | subtotal THB 4,110.00 | shipping THB 0.00
Project Overview
Automotive Parts Commerce Platform is a full-stack web application built as a practical MVP for parts discovery and order processing. This page reflects what is visible on real screens, not only abstract architecture notes.
The domain is fitment-sensitive and operations-heavy. Product relevance depends on make/model/year/trim relationships, while teams still need campaign content, order monitoring, and admin data management to stay aligned.
Problem
Automotive commerce is harder than generic e-commerce because a part can be correct by SKU but wrong by vehicle fitment. Users need confidence, and ops teams need reliable structures for catalog and request handling.
Without clear admin workflows, campaign pages and order handling drift apart. The product needs both customer UX and internal control surfaces to be useful.
Solution
The implemented solution combines a Vue.js storefront, Express REST APIs, and SQL fitment structures. Instead of forcing incomplete checkout, it uses a controlled order-request flow with tracking support.
Admin panels cover fitment setup and order operations so the MVP can run with real data discipline today while remaining extensible for future checkout and notification layers.
Platform Capabilities
Platform areas illustrated by captured interface screens
Storefront Commerce
Campaign banner, coupon widgets, category navigation, and recommendation cards.
Catalog Discovery
Category-level browsing with filters, sort controls, and branded product cards.
Order Lifecycle
Public tracking page plus admin list view for active request monitoring.
Admin Data Ops
Master-data forms for fitment hierarchy and operational order handling.
System Architecture
Layered commerce architecture with fitment-aware domain modeling
Frontend
Vue.js and Vite provide campaign, catalog, filtering, and tracking interfaces.
API Layer
Express routes separate auth, products, vehicles, search, and orders.
Data Model
SQL schema handles fitment hierarchy, products, and request-oriented order records.
Admin Ops
Operational screens support fitment setup and daily order management.
REST Route Structure
Route files are grouped by capability so authentication, catalog search, vehicle-fitment logic, and order processing can evolve independently.
Key Features
- Campaign-ready storefront with promo banners, coupons, and recommendation modules
- Fitment-aware catalog navigation across parts and tires categories
- Brand filtering and sorting controls for practical product discovery
- Order-request flow with public order-number tracking
- Admin setup forms for make, model, year, and trim data
- Admin order monitoring with search, pagination, and detail entry points
- Image upload pipeline using Multer
- REST API route organization for long-term backend maintainability
Technology Stack
Future Enhancements
- Payment gateway integration to move from request flow to full checkout flow
- Inventory synchronization with external stock and dealership systems
- Stronger image validation and fallback handling for uploaded bank-slip assets
- Automated notifications for status transitions and customer follow-up