2025
Artur.art
A high-performance Next.js e-commerce marketplace for selling Paintings and personalized art discovery, featuring AI model integrations.
Architected the frontend infrastructure for Artur.art, a media-rich e-commerce platform bridging AI-generated art with physical product fulfillment. I led the critical transition from an MVP prototype to a scalable, production-ready application, focusing on aggressive performance optimization and long-term maintainability.
Key Technical Achievements:
Performance Engineering (43 → 96 Lighthouse):
Executed a comprehensive optimization strategy that raised mobile performance scores by over 120%.
Bundle Optimization: Implemented intelligent code splitting using `next/dynamic` across 12+ high-traffic landing pages (Home, Gift Guides, Decor), ensuring heavy components only load when required.
Main Thread Unblocking: Moved third-party scripts (Google Analytics, Clarity) to `strategy="afterInteractive"` and debounced high-frequency search inputs (300ms), eliminating input lag.
LCP Protection: Engineered a "Placeholder-First" loading strategy for the Hero Video, delaying heavy media by 3 seconds to prioritize critical content rendering.
Advanced Data Architecture (TanStack Query):
Re-architected the data fetching layer to eliminate redundant network requests, configuring specific `staleTime` windows (5–15 mins) for static catalogs vs. dynamic user data.
Implemented Optimistic Updates for cart interactions, providing instant feedback and improving perceived performance.
Developed a tiered loading strategy for the "Tindart" swipe deck: Eager loading for the first 3 cards, followed by on-demand lazy loading for the remaining queue.
Scalable UI & Design System:
Established a strict Semantic Design Token system using Tailwind CSS, replacing legacy hardcoded styles to ensure visual consistency across the platform.
Built a library of reusable, accessible components (Buttons, ArtworkCards, Modals) to reduce technical debt and accelerate feature development.
Mobile-First Refactoring: Resolved critical responsiveness issues on complex layouts like the "Product Details" page, utilizing Intersection Observers to conditionally render desktop-only components.
Resource & Network Optimization:
Eliminated Cumulative Layout Shift (CLS) by implementing `next/font` for self-hosted typography.
Reduced connection latency by adding `rel="preconnect"` hints for critical third-party origins (API endpoints, CDNs).
Optimized the delivery of 231+ high-resolution product images, ensuring zero impact on initial load time.
Technologies
Next.jsTanStack QueryPerformance EngineeringDesign SystemsLazy LoadingAPIAI integration