← Back

JavaScript Frameworks: Vibity Store

Vibity Store screenshot — SPA with routing, product filters, Zustand cart and checkout.

Overview

Vibity Store is a responsive React eCommerce SPA with Styled Components. Users can search and filter products, view details, add items to a Zustand-powered cart, and complete a simple checkout flow. The app consumes the Noroff Online Shop API and prioritizes clear navigation, fast perceived performance, and accessible interactions.

Tech & Responsibilities

Framework: React + React Router (multi-page SPA), fetch/REST
State: Zustand store for cart and UI state
Core flows: product listing & detail, search/filter, cart, checkout
UX & a11y: focus order/keyboard support, helpful error/empty states
Role: End-to-end front-end — UI, state, validation, API integration, deployment

Improvements

Refactoring & code quality: Implemented formatting updates, added JSDoc documentation, replaced index-based list keys, removed any in favor of proper TypeScript types, standardized currency formatting (€), and ensured the project passes ESLint and Prettier.

Outcome

The app now builds cleanly with zero lint/type errors, uses stable keys and typed declarations, includes JSDoc.