Project Overview
Arash Media is a premier automotive photography and videography platform serving the Vancouver luxury car market. The goal was to build a visually immersive experience that handles high-resolution media without compromising on performance or discoverability.
By leveraging Next.js 15 (App Router) and React 19, the site delivers a gallery-heavy experience that feels instantaneous, achieving perfect Core Web Vitals while managing complex, dynamic content.
Technical Architecture
Core Stack & Performance
The application is built on a TypeScript foundation, ensuring type safety across the full stack.
- Rendering Strategy: Utilizes a hybrid approach of SSR (Server-Side Rendering) for dynamic routes and SSG (Static Site Generation) for the blog and portfolio archives to maximize Time to First Byte (TTFB).
- Edge Runtime: OpenGraph image generation and specific API routes run on the Edge to reduce latency for global users.
- Asset Optimization: Implemented
next/imagewith custom loaders and strict sizing policies to prevent layout shifts (CLS), crucial for image-heavy photography portfolios.
Advanced SEO Implementation
As an automotive business in a competitive local market, SEO was a primary deliverable.
- Dynamic Schema.org: A custom service generates structured data (JSON-LD) for every page, including
LocalBusiness,Article(for blogs), andImageObjectschemas. - Programmatic Metadata: Leveraging the Next.js Metadata API to dynamically inject canonical URLs, alternates, and robust OpenGraph tags based on CMS content.
- Sitemap & Robots: Automated generation ensures Google indexes new portfolio items immediately upon publication.
Key Features
1. Interactive UI/UX
Built with Tailwind CSS and Magic UI, the interface features:
- Responsive Navigation: A mobile-first drawer menu that preserves state across routes.
- Dark Mode Persistence: Themed components that respect system preferences and user overrides.
- Micro-interactions: Subtle animations and transitions that guide user attention without impacting main-thread performance.
2. Content Management System
The platform uses MDX to treat content as data:
- Custom Frontmatter: Allows the client to define SEO titles, publication dates, and featured images easily.
- Component Injection: React components (like Image Carousels or Call-to-Action buttons) can be directly embedded into blog posts.
Performance Metrics
| Metric | Score | Impact |
|---|---|---|
| Performance | 100 | Near-instant loads via SSG & Edge caching |
| Accessibility | 100 | Full WCAG compliance for broader reach |
| Best Practices | 100 | Modern HTTPS & security standards |
| SEO | 100 | Optimized meta tags & semantic structure |
Business Impact
Since launch, the platform has successfully consolidated the brand's digital presence, providing a professional landing point for high-profile clients like Lugaro and Supreme Shine. The integration of Google Tag Manager and Vercel Analytics provides real-time insights into user engagement and conversion funnels.