Manila Watch Atelier
Live Demo
Live preview of Manila Watch Atelier
Problem
Luxury watch retail storefront built for Sherard, a Manila-based watch dealer. Features server-side filtering, normalized product data model, and an inquiry system for high-value timepieces. Built with PostgreSQL + Prisma (migrated to JSON-file backend for Vercel constraints), WhatsApp integration, admin dashboard with CRUD and status pipeline, Market Insights page with interactive Recharts charts, multi-currency display (PHP, USD, EUR, SGD, HKD), and SEO-optimized brand landing pages. Pre-launch.
Constraints
- -Solo developer on MVP budget and timeline
- -Vercel serverless constraints required migration from PostgreSQL to JSON-file backend
- -Images must be high-quality (luxury market) but page speed matters for SEO
- -Inquiry form must feel premium and trustworthy with rate limiting to prevent abuse
- -Multi-currency support required for international clientele (PHP, USD, EUR, SGD, HKD)
Architecture
SSR product pages (Next.js) for SEO with brand-specific landing pages. PostgreSQL + Prisma data layer migrated to JSON-file backend for Vercel serverless constraints. Inquiry system with database storage, email delivery via Resend, rate limiting, and WhatsApp integration. Admin dashboard with full CRUD operations and status pipeline management. Market Insights page with interactive Recharts charts. Multi-currency conversion (PHP, USD, EUR, SGD, HKD). Mobile-first responsive grid with 3 columns on desktop and single column on mobile.
Tech Choices & Why
Next.js SSR
Product pages and brand landing pages need SEO for organic traffic
Resend + Rate Limiting
Email delivery with abuse prevention. WhatsApp integration as secondary channel.
Recharts
Interactive Market Insights charts for price trends and market analysis
JSON-file backend
Migrated from PostgreSQL + Prisma due to Vercel serverless cold start and connection limits
Psychology-driven UX
FOMO, scarcity, urgency, and social proof patterns to drive inquiry conversion in luxury market
Challenges & Solutions
Problem
High-resolution watch images caused slow page loads and poor Core Web Vitals.
Solution
Next.js Image with blur placeholders, lazy loading, responsive srcsets, and WebP format. Multiple size breakpoints for different devices.
Problem
PostgreSQL + Prisma hit Vercel serverless connection limits and cold start latency.
Solution
Migrated to JSON-file backend with atomic read/write operations. Eliminated database connection overhead while maintaining data integrity for the inquiry pipeline.
Problem
Inquiry system needed rate limiting, email delivery, and WhatsApp integration without complex infrastructure.
Solution
Multi-step form with Zod validation, rate limiting middleware, email delivery via Resend, and WhatsApp deep links. Admin dashboard with status pipeline for inquiry management.
Trade-offs
- ~JSON-file backend limits concurrent writes but eliminates database connection overhead on Vercel.
- ~Multi-currency uses static exchange rates. Acceptable for inquiry flow, not for checkout.
- ~Psychology-driven patterns must be tasteful for luxury market — subtle, not aggressive.
Impact
Live at manila-watch-atelier-mvp.vercel.app. Delivered a full retail platform with inquiry management, admin dashboard, market insights, and multi-currency support. Core Web Vitals improved from poor to good after Next.js Image optimization.
What I'd Improve
- +Add a lightweight CMS (Sanity or Payload) for dealer self-service
- +Add real-time exchange rates via API
- +Add conversion tracking and analytics
- +Scale into a full e-commerce flow with Stripe checkout
This project was reviewed by Luka (Principal Research Consultant) and Nala (UI/UX Compliance Auditor). They had no comments, which we interpret as approval.