E-Commerce Catalog
Katalog e-commerce Vue.js 2, live REST API, 3 dynamic UI themes, pixel-perfect Figma, deployed via GitLab CI/CD.
Why I Built It
After a backend-heavy project (Evermos), I wanted to prove the frontend side too: taking a Figma design and live API data and shipping something pixel-accurate, not just functional.
Project Goal
Build an e-commerce catalog frontend in Vue.js 2 that consumes a live REST API and supports multiple brand themes without duplicating components per theme.
What It Does
- check_circleLive REST API integration for product listings
- check_circle3 dynamic UI themes switchable via class binding + CSS variables
- check_circlePixel-perfect implementation from Figma source files
- check_circleDeployed via GitLab CI/CD to Firebase Hosting
Key Screens
Catalog Listing
Product grid pulling live data from the REST API, with the active theme controlling color tokens and imagery.
Theme Switching
3 distinct brand themes toggled at runtime via a single class binding, backed by CSS custom properties rather than separate stylesheets.
Tech Stack
Themes are implemented as CSS custom properties swapped via one root class binding, not three separate component trees. This kept the Figma-to-code work honest to pixel-perfect specs per theme while avoiding 3x the maintenance surface if a layout bug showed up later.