Daily Buzz & Bite

Daily Buzz & Bite is a responsive multi-page coffee shop website built using Vue 3, Vue Router, Bootstrap, and an Express.js backend. The project simulates a real-world café that sells hot and cold coffee, specialty drinks, and fresh sandwiches.

Overview

The website is developed as a Single Page Application (SPA) where users can navigate between pages without reloading, while dynamic content such as products, services, and gallery images is fetched from an API. The goal of the project was to demonstrate frontend-backend integration, responsive UI design, and clean code organization.

Mission

Provide users with a modern, visually engaging, and easy-to-navigate digital experience that reflects the warmth and energy of a contemporary coffee shop.
Present products and services clearly.
Ensure accessibility and responsiveness across devices.
Simulate how real businesses manage and display dynamic content using APIs.

Links

Frontend Repo Backend Repo Live Demo Backend API

Key Features

Vue Router Navigation
Responsive Design
Dynamic Content from API
Hero Section with Branding
Loading & Error States
Accessibility Considerations

Tech Stack

Tools

VS Code

Frontend

Vue 3: Component-based UI development
Vue Router: Page navigation
Bootstrap 5: Responsive layout and styling
Axios: API data fetching
CSS Grid & Flexbox: Custom layout control

Backend

Node.js
Express.js: REST API
CORS: Enables frontend-backend communication
In-memory JSON arrays: Simulated database
Static file serving: Images served from Express

Website Screenshots

Lessons Learned

Understanding how Vue differs from traditional HTML + Live Server, especially with component-based rendering and dev servers.
Properly structuring a project with separate client and server folders.
Serving static assets correctly from an Express backend and consuming them in Vue.
Debugging common issues such as blank pages, broken image paths, and API errors.
Using CSS Grid vs Flexbox for layout control and preventing unwanted scrolling.
Implementing responsive design using media queries alongside Bootstrap.
Gaining confidence in building a full-stack mini application that mirrors real-world development workflows.