City Computer

• Duration: 2026
• Role: Lead Frontend Architect & Full-Stack Developer
• Industry: Refurbished Electronics & IT Hardware Retail
• Stage: Live Production / Enterprise Rebrand
• Client / Product: City Computer (Junagadh, Gujarat)

Local IT hardware and refurbished laptop retailers typically rely on generic directory listings, static one-page templates, or basic social media updates. This traditional approach fails to convey the engineering rigor, testing standards, and hardware reliability that modern buyers expect when investing in refurbished laptops.

City Computer has built 18+ years of trust serving thousands of professionals, students, and businesses across Saurashtra. The objective was to build a flagship digital experience that:

1. Redefines Perceptions: Elevates certified refurbished hardware with an immersive, premium aesthetic that rivals major global consumer electronics brands.
2. Engages Through Interaction: Uses an interactive 3D scroll-driven product walkthrough rather than flat, static photos.
3. Drives High-Intent Conversion: Directs curious visitors straight into one-click WhatsApp inquiries, phone calls, and showroom visits via Google Maps.
4. Dominates Local Search: Outranks regional competitors through rich local structured data, microdata schemas, and top-tier Core Web Vitals.

1. Scroll-Driven 3D Storytelling & Canvas Architecture

• Phase-Controlled Interactive Canvas: Designed a custom 3D laptop viewport tied to window scroll phases (01 / 03: Better value → Tested for its next life → Less e-waste). Users dissect the hardware story smoothly as they scroll.
• Non-Blocking Asset Loading: Implemented asynchronous canvas initialization with progressive geometry and texture streaming, ensuring 3D elements never degrade initial Time-to-Interactive (TTI) or First Contentful Paint (FCP).
• Graceful Mobile Degradation: Automated fallback rendering ensuring smooth, battery-efficient 60 FPS transitions across varying device capabilities and mobile viewports.

2. High-Performance Design System & Fluid UX

• Dual Theme Engine (Dark & Light Mode): Zero-flash client theme switcher powered by scoped CSS variables and DOM data attributes, automatically honoring system preferences with instant manual override persistence.
• Modern Typography & Glassmorphic Accents: Paired Google Fonts’ Space Grotesk for technical headings with DM Sans for high-legibility interface copy, complemented by subtle blur filters, border gradients, and elevation shadows.
• Dynamic Category Filter Engine: Instant, zero-latency client-side filtering separating laptops, all-in-one workstations, and dedicated high-performance gaming rigs with animated entry transitions.
• Continuous Brand Marquee: Smooth hardware brand ticker displaying verified vector marks (Dell, Lenovo ThinkPad, HP, ASUS ROG, MSI, Apple) with GPU-accelerated infinite transforms.

3. SEO Excellence & Local Discoverability

• Rich Schema.org Graph Integration: Injected comprehensive JSON-LD microdata specifying @type: ComputerStore, physical coordinates (GeoCoordinates), regional coverage (areaServed), business hours, and payment facilities.
• Hyper-Localized Meta Architecture: Curated keyword coverage spanning regional query intents (refurbished laptops Junagadh, ThinkPad dealer Gujarat, second hand MacBooks Amba Arcade).
• Automated Asset Pipelines: WebP image optimization via Next.js image tooling, automated XML sitemaps, robots rules, and dynamic Open Graph / Twitter cards for social previews.

4. Conversion & Trust Engineering

• Heritage Storytelling: Dedicated spotlight on founder Kaushik Sukhadiya and the store’s 18-year local legacy to reinforce personal accountability and post-sale support.
• Environmental Impact Highlighting: Educational module explaining the circular economy and e-waste reduction advantages of certified refurbishing.
• Frictionless Lead Funnel: Floating direct-to-chat WhatsApp actions, call triggers, and interactive address maps to capture buyers at their exact moment of intent.

Frontend & Core

• Framework: Next.js (App Router, Server Components)
• Language: TypeScript
• State & Logic: Modern React Hooks & Scoped DOM Observers

3D & Creative Engineering

• Rendering: HTML5 Canvas / WebGL 3D Model Pipeline
• Animations: Scroll-linked phase interpolation, GPU-accelerated CSS keyframe marquees

Styling & Design System

• Architecture: Tailored CSS Tokens & Custom Design System (Zero UI bloat)
• Typography: Space Grotesk & DM Sans (Next Font Optimization)
• Design Elements: Glassmorphism, Dual Theme (OLED Dark & Editorial Light), Dynamic Badges

Performance & SEO

• Structured Data: Schema.org (ComputerStore, WebSite, GeoCoordinates)
• Assets: WebP image generation, SVGs, Preloaded WOFF2 typography
• Hosting / CDN: Vercel Global Edge Network with instant caching headers

• Instant Load Times: Sub-second First Contentful Paint achieved despite rich interactive 3D elements.
• 100% Mobile Responsive: Consistent, touch-friendly UI across high-DPI smartphones, tablets, and wide-format monitors.
• Top Organic Search Ranking: High local visibility across Saurashtra for high-intent queries around tested refurbished computing.
• Measurable Customer Inquiries: A direct increase in WhatsApp leads and in-store footfall originating from digital search.