· Szymon Berski · Portfolio · 2 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. The backend, powered by Laravel, manages REST API delivery and includes an admin panel for product management, category organization, translations, and media uploads.
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.
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.
