Marble Care
Association
Delhi NCR's Premier Marble Contractor — Since 1993
What is Marble Care Association?
Marble Care Association is the digital platform for a Delhi NCR-based marble contractor established in 1993, specialising in marble installation, polishing, and restoration across Delhi, Gurugram, Noida, and Faridabad.
The site showcases 80+ completed projects through an interactive map interface — with project locations automatically extracted from photo GPS data — an auto-rotating hero slideshow, and a contact system powered by server-side email automation.
Static photo gallery, no location context, manual project organisation, generic contact form.
Interactive map with auto-plotted projects, EXIF-powered data pipeline, server-side email delivery.
XponentShift Limited — engineering a premium digital presence for a 30-year marble craftsmanship legacy.
How MCA Differs from
Traditional Contractor Sites
How XponentShift
Built MCA
Designed, developed and deployed in-house — transforming a 30-year marble legacy into a modern digital experience.
Data Pipeline Engineering
Built a custom build-time pipeline that extracts GPS coordinates from photo EXIF data, clusters nearby locations, and reverse-geocodes via OpenStreetMap — fully automated.
Full-Stack Development
Next.js App Router with TypeScript strict mode, API route handlers for contact delivery, and ISR for optimal build performance.
Map Integration
Google Maps with Advanced Markers and clustering via @vis.gl/react-google-maps — dynamic import to avoid SSR hydration errors, deep-linking via URL params.
Performance Engineering
Next.js Image component on every asset with AVIF/WebP negotiation, responsive sizes, 1-year cache TTL, and quality tuning per image role.
Image Watermarking & Brand Protection
A Python (Pillow) pipeline stamps a tiled, 45° diagonal watermark — brand name and contact number — across every project photo, while preserving each image's original EXIF orientation and metadata, protecting 30 years of work from unauthorised reuse.
SEO & Local Visibility
JSON-LD LocalBusiness schema with address, geo-coordinates, service areas, operating hours, and aggregate rating. Dynamic sitemap and robots.txt at build time.
UI/UX & Accessibility
Auto-rotating hero slideshow with Ken Burns effect, keyboard-accessible gallery navigation, and prefers-reduced-motion support throughout.
Biggest Technical
Challenges
Automated Location Extraction from Photos
The client had hundreds of project photos but no structured location data. We built a build-time pipeline that scans images, extracts GPS from EXIF metadata, clusters nearby locations using a two-pass algorithm (110m bucketing, 200m merge), and reverse-geocodes via Nominatim — with caching to respect rate limits.
Map Clustering for 80+ Project Sites
Rendering 80+ markers caused visual clutter at lower zoom levels. Google Maps API also only works in the browser, causing SSR hydration errors. We used dynamic imports with SSR disabled and Advanced Marker clustering that expands on zoom.
Image-Heavy Performance Optimisation
A marble contractor portfolio is inherently image-heavy. Unoptimised assets would destroy Core Web Vitals. We implemented format negotiation (AVIF + WebP), responsive sizing, priority loading for above-the-fold content, and tuned quality per image role.
Gallery Navigation Across Locations
Users browse projects via an interactive map with a side panel. At the last photo of a location, the next arrow advances to the next project location with directional slide animations — making navigation feel seamless across the entire portfolio.
Development
Methodology
Discovery
Analysed the client's 30-year portfolio. Mapped service categories, project locations, and target audience across Delhi NCR.
Architecture
Designed the build-time data pipeline, static generation strategy, and ISR configuration. Chose Supabase for future extensibility.
Build
Developed the EXIF extraction pipeline, interactive map, hero slideshow, gallery navigation, and contact form in parallel workstreams.
Optimise
Performance tuning — image formats, cache policies, Core Web Vitals. SEO structured data and local business schema integration.
Deploy
Production deployment with automated pre-build hooks. Drop photos in the directory — the map and gallery update themselves on next build.
Future Goals
- Admin dashboard for project management
- Blog for marble care tips and guides
- WhatsApp Business API integration
- Project estimation calculator
- Customer portal with project tracking
- Before/after project comparisons
- Automated review collection
- Multi-language support (Hindi/English)
- Expand to new metro areas beyond NCR
- Supplier and inventory management
- AI-powered marble type recommendation
- Franchise partner onboarding portal
// Where craftsmanship meets modern engineering
Want something like this
built for your business?
Designed and built entirely by Xponentshift Limited — engineering digital platforms that showcase real-world expertise.