Black & Gold Brand Site + Member Points Economy
2026
JE Auto Detail is a car detailing brand in Xitun, Taichung, born from a used-car dealer's craftsman obsession — the owner personally inspects every car before it goes on sale, and that near-fastidious standard gave birth to JE. Core services span hand washing, premium detailing, ceramic coating, and paint protection film, with 9 professional services available through the booking form.
The visual identity draws on a Lamborghini-style black & gold aesthetic: a pure black stage accented with champagne gold, zero border radius, hexagonal brand language, and layered surface tones. The frontend is built with Astro 5 SSR and Vue 3 interactive components to faithfully deliver that craftsman-grade refinement.
What sets this project apart is that it goes beyond a brand site to include a complete member points economy: JWT authentication (email plus LINE / Facebook / Google OAuth), in-store QR scanning for point accumulation, a 1:1 redemption rewards mall, a three-tier referral program (referral code, link, and QR download — a friend's first purchase rewards the referrer with 200 points), and multi-preference online booking. The backend runs on Laravel + GraphQL + Filament with full admin management.
A Lamborghini-inspired pure black + champagne gold design system — zero border radius, hexagonal brand language, and brushed-metal cards that convey craftsman-grade quality.
Admin-managed banner carousel overlaid with entry points to the four core services: hand wash, premium detailing, ceramic coating, and paint protection film.
Service detail pages plus a before/after portfolio gallery — "real comparisons, visible differences".
Email registration and LINE / Facebook / Google social login with JWT authentication. The member center tracks purchases, redemptions, and booking history.
Each member gets a personal QR identifier — staff scan it in-store at checkout to award points, closing the loop between online and offline.
Browse products and services by category, redeem points at a 1:1 rate with no extra charge, and track redemption status.
Personal referral code, referral link, and downloadable QR. Friends register with the code, and their first purchase rewards the referrer with points.
Multi-preference time-slot booking confirmed by the shop; services, portfolio, banners, products, members, and bookings are all managed from the admin panel.
The frontend uses Astro 5 with server-side rendering. First-screen content is fetched live from the backend GraphQL API and pre-assembled, ensuring SEO crawlers and social previews receive complete content. Interactive components use Vue 3 Islands with client:idle deferred hydration, prioritizing SEO and load performance.
Data exchange runs on GraphQL, with Astro API routes acting as a BFF (Backend for Frontend) layer: login, registration, booking, and redemption all go through /api/* endpoints, with tokens stored in httpOnly cookies and never exposed to frontend JavaScript — balancing security with developer experience.
The membership system is built on JWT authentication, with email login via the memberLogin mutation and LINE / Facebook / Google social OAuth integration. The OAuth flow implements state-based CSRF protection using astro-cookie-session, and the middleware pipeline guards access in sequence: originCheck, then guest, then auth — securing every member-center page.
Points come from purchases, referrals, and birthday gifts: members present their QR identifier in-store for staff to scan and award points. myPointTransactions provides a complete points ledger, productRedeem handles the 1:1 redemption flow in the rewards mall, and myReferralTree renders the three-tier referral tree — friends register via referral code or link, and their first purchase rewards the referrer with 200 points, closing the online-to-offline points economy loop.
Design tokens are defined with Tailwind CSS 4 @theme: pure black #000000 as the stage, champagne gold as the accent, and dark surfaces layered in a #000 to #181818 to #202020 elevation scale. Combined with zero border radius and hexagonal brand language, cards, buttons, and forms maintain a consistent Lamborghini-grade boutique feel site-wide.
Integrates GA4, GTM, LINE Tag, Microsoft Clarity, and Facebook Pixel — all injected via environment variables so the client can toggle trackers or swap tracking IDs per campaign, gaining full visibility into booking conversions and ad performance.
Auto detailing is a high-repeat-purchase service business, so a plain showcase site can't retain returning customers. JE Auto Detail's site therefore bakes in JWT member login, in-store QR scan-to-earn points, a 1:1 points-redemption mall, and a three-tier referral program — combining "brand presence" and "member retention" into one system, so the site works as an ongoing growth engine rather than just a digital business card.
This project was completed in 2026, covering the black-and-gold brand visuals, three social OAuth login options, QR point accrual, a points-redemption mall, a three-tier referral tree, and full Filament back-office management. Brand sites with this scope of member economy typically take 10–14 weeks, depending on the complexity of the social logins and points/payment rules integrated.
Yes. In-store QR point accrual, 1:1 points redemption, and three-tier referral rewards are generic member-economy modules unrelated to auto detailing specifically — swap the services and brand visuals and the same foundation extends to salons, gyms, restaurants, or any physical service business that needs customer retention and membership growth.
CONTACT US
Whether it's a brand site, member points system, rewards mall, or online booking, we can tailor the right solution for you.
Contact Us
