Overview

Rock Records is a dynamic multi-page web application engineered to showcase an interactive music and record catalog with a focus on modern user experience (UX) and clean visual communication. Developed individually for the Dynamic Web subject at the University of Lleida (Universitat de Lleida), the project demonstrates the integration of reactive frontend frameworks with modular UI component libraries. By leveraging Vue.js and Bootstrap-Vue, the platform presents a responsive, accessible interface that dynamically fetches and renders internal data assets from structured JSON files across multiple viewports (desktop, tablet, and mobile).

The Challenge

The objective of the assignment was to design and deploy a complete, functional web application featuring between 3 and 5 interconnected subpages, adhering to modern usability and web accessibility standards (WCAG guidelines). Key technical and structural requirements included:
     - Framework Architecture: Building a reactive single/multi-page setup using Vue.js for interactive UI logic and Bootstrap / Bootstrap-Vue for responsive layouts.

     - Data Management: Managing and populating content dynamically through an internal JSON data structure rather than hardcoding static page assets.

     - UX & Accessibility Compliance: Implementing clean visual hierarchies, intuitive navigation flows, and fluid multi-device adaptivity while preventing UI component conflicts.

     - Production Standards: Structuring clear separation between components, views, plugins, and routes, backed by technical documentation and public deployment on GitHub Pages.

Our Approach

To address these technical requirements, the development process was organized into modular architecture phases, prioritizing code maintainability and user-centered interaction:
     - Architecture & View Structuring: Configured a clean project folder hierarchy separating views, components, routes, and plugins. Built a subpage navigation system encompassing key platform areas (landing hero, catalog view, detail pages, and informational sections).

     - UI/UX Implementation & Accessibility: Utilized Bootstrap-Vue components to construct responsive grid layouts, interactive navigation bars, and visual cards. Visual choices (colors, typography, and spacing) were tailored to the rock music theme while applying basic WCAG contrast and readability guidelines to ensure broad accessibility.

     - Dynamic Data Binding: Created an internal JSON data layer acting as a localized catalog API. Used Vue.js reactive state and data-fetching patterns to dynamically render record lists, metadata, and media attributes into reusable template components.

     - Responsive Optimization & Quality Control: Conducted cross-device testing to ensure seamless layout responsiveness and component behavior across PC, tablet, and smartphone screen dimensions before deploying the production build via GitHub Pages.

Project Gallery

Results

- Fully Functional Dynamic Web Platform: Successfully delivered a responsive multi-page web application combining Vue.js logic and Bootstrap-Vue styling, accessible live via GitHub Pages.

- Component-Driven Frontend Architecture: Established a modular codebase with decoupled view views, reusable component blocks, and structured JSON data sources.

- Optimized User Experience: Achieved consistent cross-device performance, smooth interactive transitions, and adherence to foundational UX heuristics and web accessibility criteria.