· Szymon Berski · Portfolio · 3 min read
Parts & Accessories Catalog
Comprehensive catalog for Volkswagen Polo 6R parts and accessories, featuring optimized product displays, efficient navigation, and the ability to function as a Progressive Web App.
VW Polo 6R Parts and Accessories Catalog
I developed a comprehensive catalog website for VW Polo 6R parts and accessories using Astro and Vue3, after migrating from an earlier Vue2 and Vue3 setup. While not an e-commerce site, it shares many features with online stores, except for payment processing.
Challenges
A key challenge was optimizing images, given the extensive product catalog and predominantly mobile traffic. Astro handles image compression, optimizing original photos and using WebP as a fallback to the more modern AVIF format due to its still limited indexing in Google Image Search.
To improve navigation across numerous categories, I implemented a scrollable main category menu and replaced the footer subcategory list with a dedicated “Site Map” page, boosting SERP performance. The site also supports English and Polish with correctly configured hreflangs and renders PDF documents. Additionally, the site features an efficient product search function.
To enhance internal linking, I added sections for Related Products and Similar Products, facilitating better user navigation and SEO. Based on A/B testing, I added navigation buttons for seamless product browsing within categories.
Backend & Admin Panel
The backend, powered by Laravel and FilamentPHP, manages REST API delivery and includes a comprehensive admin panel for:
- Product management with multi-language support
- Category organization and hierarchy
- Translation management (English, Polish, German)
- Media uploads and gallery management
FAQ Knowledge Base
The catalog includes an integrated FAQ system providing technical specifications and how-to guides for VW Polo 6R. Content is organized by product categories (tires, wheels, engine oil, HVAC, brakes, suspension, body parts) and supports multilingual display with links to detailed blog posts.
Content Management with FilamentPHP
The admin panel built with FilamentPHP (19 resources, 36 widgets) provides a comprehensive interface for:
Content & Localization
- Products, categories, pages, and FAQ management
- Multi-language translations (EN/PL/DE) with DeepL integration
- Media library with image conversion tracking
- Redirect management with 404 auto-suggestions
Analytics & Monitoring
- Google Analytics - Page views, visitors, sessions, devices, top referrers, geographic data
- Google Search Console - Clicks, impressions, CTR, average position, top pages and queries
- Google AdSense - Multi-site earnings tracking, RPM, alerts for revenue drops
Operations & Maintenance
- Cloudflare cache purging (by URL, prefix, or model type)
- Database backup/restore utilities
- Activity logging and audit trail
- SEO completeness audits and data quality monitoring
Used Technologies
Astro
Utilizes a modern web framework for building fast and optimized websites. Astro’s partial hydration improves performance by only loading JavaScript when needed.
Vue.js
Enables building of interactive components such as the PDF viewer, ensuring a dynamic and responsive user interface.
Laravel
Ensures robust backend integration with the REST API, facilitating seamless communication between the server and client, thereby supporting the website's dynamic features.
FilamentPHP
Powers the admin panel for content management, including products, categories, translations, FAQ entries, and media uploads with an intuitive TALL-stack interface.
Progressive Web App (PWA)
Progressive Web App (PWA) offers a seamless, app-like experience on mobile devices, featuring offline capabilities, quick access, and enhanced performance for a more reliable user interaction.
Cloudflare
Cloudflare enhances website performance and security by providing DDoS protection, faster content delivery via a global CDN, and advanced traffic management.
Google Tag Manager
Facilitates the integration of Analytics and Adsense, allowing for detailed tracking and monetization.
The site is a Progressive Web App (PWA), allowing users to install and use it like a native application. Future plans include implementing a dark mode.
Strong SEO and image optimization have driven significant traffic from image search engines.
