YouTube-Inspired Interface with Vue 3 and Quasar

A responsive front-end prototype built with Vue 3, Quasar Framework, and Vue Router. The project recreates core layout patterns from a modern video platform to demonstrate component-based UI development with Quasar.

Motivation

The project began as a front-end assignment focused on translating a familiar product interface into reusable Vue components. Its main purpose was to explore Quasar's layout system, navigation drawer, toolbar, cards, icons, responsive behavior, and routing in a practical interface.

Project goals

• Build a recognizable video-platform layout with Vue and Quasar.
• Organize the interface into reusable page, layout, and navigation components.
• Practice responsive navigation and interactive UI states.
• Establish a maintainable project structure that can later connect to real data and services.

Implemented work

• Header toolbar with menu control, search field, microphone icon, and user avatar.
• Expandable and compact navigation drawer with Home, Shorts, Subscriptions, and History links.
• Reusable navigation-link component.
• Responsive video-card grid using Quasar cards, items, and avatars.
• Simulated view counts for prototype content.
• Vue Router configuration with a main route and fallback 404 page.
• Font Awesome, Quasar Extras, and Bootstrap Icons integration.

Accomplishments

• Translated a reference interface into a working Quasar layout.
• Used Vue component composition to separate navigation, layout, and page content.
• Implemented responsive drawer behavior and routed page rendering.
• Configured linting, formatting, development, and production-build scripts.

Technology stack

Vue 3 Quasar 2 Vue Router 4 JavaScript Vite ESLint Prettier

Project structure

quasar-project/
├── src/
│   ├── components/EssentialLink.vue
│   ├── layouts/MainLayout.vue
│   ├── pages/IndexPage.vue
│   ├── pages/ErrorNotFound.vue
│   ├── router/
│   └── assets/
├── package.json
└── quasar.config.js

Getting started

git clone https://github.com/sajeda1311/Vue.js-Quasar.git
cd Vue.js-Quasar/quasar-project
npm install
npm run dev

Useful commands:

npm run lint
npm run format
npm run build

Current status and limitations

This repository contains a UI prototype rather than a complete video application. Search actions currently log input instead of querying an API, voice search remains a visual placeholder, card data is static, and the project does not include automated tests or a backend.

Next goals

• Connect search and content cards to a public video API or mock service.
• Replace duplicated card markup with reusable data-driven components.
• Add component and interaction tests.
• Improve keyboard navigation and accessibility labels.
• Remove generated dependencies from version control and rely on the lockfile for reproducible installs.

Author

Sajeda Patel