Web Design & Development

Set de Copos — Live Music Bar Website

Live music bar website featuring real-time event calendar synced with Firebase Firestore, customer review carousel, interactive location map, and comprehensive information about specialty gin selection and live music events.

Built with React 19 and TypeScript featuring cosmic nightclub aesthetic with vibrant neon colors (hot pink, teal, coral), canvas-based particle animations, and smooth Framer Motion transitions. Fully responsive design captures the bar's unique nightlife ambiance.

Completed Date: May 2026
Visit Live Site
Project Details

Overview

Industry

Nightlife & Entertainment / Food & Beverage

Scope

Complete single-page website design and development with real-time event management system, custom cosmic theme, and Firebase backend integration

Timeline

2 weeks from design to launch

The Problem

Challenge

Set de Copos needed a modern digital presence that would reflect their unique cosmic nightlife atmosphere and effectively communicate their weekly live music events and specialty gin offerings. The bar required a way to keep customers informed about upcoming events in real-time without needing technical knowledge to update the website. Additionally, the website needed to capture the energetic, modern vibe of the venue while remaining accessible and easy to navigate.

Our Approach

Solution

We developed a single-page React website with a bold cosmic aesthetic using vibrant neon colors and animated particle effects to mirror the bar's ambiance. The site features a Firebase-integrated event calendar that updates in real-time, allowing the bar staff to manage events easily through their backend. We implemented smooth Framer Motion animations throughout, created a custom review carousel showcasing Google reviews, and integrated an interactive map for easy location finding. The result is a visually striking, performant website that effectively represents the brand and keeps customers engaged with upcoming events.

What's Included

Key Features

Real-Time Event Calendar
Responsive Design
Cosmic Particle Animations
Interactive Google Maps
Customer Review Carousel
Firebase Integration
Custom Shimmer Effects
Smooth Scroll Navigation
Performance

Results

95+/100
Performance Score
Lighthouse performance - optimized Vite build with code splitting
100/100
Mobile Responsiveness
Mobile-first design with responsive breakpoints
60fps
Animation Performance
Canvas-based particle system with requestAnimationFrame optimization
<100ms
Real-Time Updates
Firebase Firestore event synchronization
Technology

Tech Stack

React 19
TypeScript
Vite
Tailwind CSS 4.x
Framer Motion
Firebase
shadcn/ui
React Hook Form
Yup
React Leaflet
Lucide React
Firebase Hosting
Get Started

Ready to Start Your Project?

Let's discuss how we can create a stunning website tailored to your business needs.

Set de Copos — Live Music Bar Website | Portfolio | low-key solutions