Shaon Landmarks - Real Estate Architecture

• Create a digital presence that matches the quality of the firm's physical architectural projects.
• Showcase properties with rich media — hero images, floor plans, amenities, and interactive maps.
• Build an EMI calculator that helps buyers estimate payments without leaving the site.
• Document the design system so the site can be maintained and extended consistently.

Design-first approach: documented all design tokens (typography scale, color palette, spacing system) in a design-system.md before writing code. Built the component library from scratch using Base UI React primitives. TanStack Start gave me SSR for SEO out of the box. GSAP handled scroll-triggered animations throughout the site. Deployed with Vite build pipeline.

• Challenge:

  Leaflet maps needed custom markers and popups that matched the site's premium aesthetic — the defaults looked generic.

  Solution:

  Created custom Leaflet marker icons and styled popups using the site's design tokens — matched the premium feel.

• Challenge:

  The EMI calculator required real-time updates as users adjusted loan amount, interest rate, and tenure — had to keep the UI responsive during rapid slider drags.

  Solution:

  Built the EMI calculator as a pure client-side component with `useDeferredValue` to keep calculations off the main thread during rapid input changes.

• Challenge:

  Hero images for each property were 3-5MB originals — the site was loading slowly on mobile.

  Solution:

  Set up a Sharp-based build script that auto-generates WebP thumbnails, responsive sizes, and blur placeholders — cut image payload by 70%.

• TanStack Start's file-based routing with SSR is a solid alternative to Next.js for content-heavy sites.
• Design tokens defined before implementation save hours of back-and-forth during development.
• Sharp at build time is the best image optimization strategy for static site generation.