How We Built Bar Hoppa: Melbourne's Nightlife Discovery App
Case Study
All articles

How We Built Bar Hoppa: Melbourne's Nightlife Discovery App

Lumen Tech·April 28, 2025·8 min read

Bar Hoppa is a mobile app for discovering Melbourne's bar scene in real time — venue listings, opening hours, maps, ratings, and distance-based filtering, all in a fast, dark interface designed for use on a Friday night.

We built the full product: design, iOS development, backend systems, and the admin dashboard for venue operators. This is a detailed breakdown of how we approached it, what we built, and the decisions that shaped the final product.


The brief

The founder Adrian came to us with a clear problem statement: finding a bar in Melbourne on a night out is messier than it should be.

Google results are cluttered with SEO-optimised listicles that were written in 2019. Yelp data is patchy and often out of date. Word of mouth works but doesn't scale. There was no single, reliable tool that told you — right now, tonight — what bars near you were open, what the vibe was, and how far away they were.

The opportunity was a real-time venue discovery app. Not a review platform, not a booking tool — a discovery tool. The entire product brief was built around one question: how fast can someone go from opening the app to walking through a bar's door?

That question drove every design and technical decision we made.


Understanding the user

Before designing a single screen, we spent time understanding how people actually behave on a night out.

The key insight was friction tolerance. Someone planning a dinner reservation a week in advance will read reviews carefully, compare options, and make a considered choice. Someone standing on a corner in Fitzroy at 10pm on a Saturday night will not. They want a fast answer, not a comprehensive one.

That changed our entire approach to information architecture. Instead of showing everything we knew about every venue, we had to ruthlessly prioritise:

  1. 1Where is it? (distance, map pin)
  2. 2Is it open right now?
  3. 3What's the vibe? (a few tags: rooftop, craft beer, cocktails, live music, sports bar)
  4. 4What do people think? (star rating, no need to read reviews in this moment)

Everything else — full menus, detailed reviews, booking systems — was secondary. If you wanted more information, it was one tap away. But the primary interface assumed you wanted to decide and move.


Design: building for darkness

The visual brief was straightforward: dark, fast, and built for one-handed use in a dimly lit environment.

Light interfaces are blinding at night. More importantly, bright UIs kill your eyes' adjustment to low light, which is the opposite of what you want in a bar. The entire colour system was built on near-black backgrounds (#0d0d10), with high-contrast whites and a single accent colour (red, matching the Bar Hoppa brand) used only for actionable elements.

Typography choices:

We chose a typeface with strong legibility at small sizes on OLED screens — critical because most premium Android devices and all iPhones above the base model use OLED displays where dark backgrounds are literally black pixels, improving contrast significantly.

Font sizes were set slightly larger than typical app conventions. When you've had a few drinks and you're reading your phone screen at arm's length in a dark venue, you don't want to squint.

Navigation model:

The app uses a bottom tab bar — the standard iOS convention — with four tabs: Map, Nearby, Saved, and Profile. Map and Nearby handle 90% of use cases. The navigation model requires no explanation, which was intentional.

We explicitly rejected the idea of a search-first interface. Search requires knowing what you're looking for. Discovery assumes you don't. If you're discovering bars, you should see a map centred on your location with nearby venues visible immediately — no search required.


Technical architecture

Frontend: React Native

We built with React Native rather than Swift/Kotlin for two reasons: Adrian's roadmap included an Android version, and React Native's cross-platform capability meant we'd write the logic once and ship to both platforms from the same codebase.

React Native has a reputation for being slower than native iOS development. In practice, for an app at this complexity level — map views, list rendering, API calls — the performance difference is negligible on modern hardware, and the development speed advantage is significant.

Maps: Mapbox

We chose Mapbox over Google Maps for several reasons:

  • Better visual customisation (we needed a dark map to match the app theme)
  • More flexible pricing for the expected volume
  • Offline tile caching for subway and tunnel dead zones

Getting the map tiles dark-themed was non-trivial — Mapbox's Studio lets you customise every layer, but getting the balance right between readability and aesthetic required careful tuning. The final map uses a custom style we built specifically for Bar Hoppa.

Backend: Node.js + PostgreSQL

The backend is a REST API built in Node.js with Express, running on AWS. The database is PostgreSQL, hosted on AWS RDS.

Venue data is stored in a normalised schema with separate tables for venues, opening hours, amenities (tags), and reviews. The opening hours calculation — determining whether a venue is open right now, accounting for different hours on different days and edge cases like closing after midnight — required more careful logic than it sounds.

Real-time status:

Open/closed status is computed on the fly from the stored hours data and the server's current time (Melbourne timezone). This was simpler and more reliable than trying to pull live status from external sources, which are inconsistent.

Venue data (menu, photos, amenities) is cached and updated by venue operators through the admin dashboard. Critical fields like phone number and opening hours are verified during onboarding.

Search and filtering:

Location-based search uses PostGIS, PostgreSQL's spatial extension, which lets us run efficient distance queries directly in the database. "Show me all venues within 1km of this coordinate, sorted by distance" is a single SQL query with PostGIS — no external geocoding service needed.

Tag filtering (craft beer, cocktails, rooftop, etc.) uses a many-to-many relationship between venues and amenity tags, with a compound index for performance.


The admin dashboard

Venue operators need a way to keep their information current. We built a web-based admin dashboard (separate from the mobile app) where operators can:

  • Update opening hours, including special hours for public holidays
  • Add and remove photos
  • Update their venue description and amenity tags
  • Respond to reviews
  • View basic analytics (profile views, saves, direction requests)

The dashboard uses Next.js on the frontend and hits the same API the mobile app uses. Operator accounts are separate from user accounts, with role-based access control — a venue operator can only edit their own venue.


What we learned

Speed of iteration beats planning for unknowns. We made several design decisions that seemed right in theory but didn't hold up once we had a real prototype in real hands in a real environment. The filter interface went through three complete redesigns. The map clustering algorithm (grouping nearby venues when zoomed out) took more time than expected to feel right.

Dark mode is harder than it looks. Every UI element — buttons, cards, overlays, loading states, empty states — needs to be redesigned for dark contexts. Elements that look good in a light interface often look flat or washed out in dark mode. Getting the hierarchy right with a limited range of greys required careful attention.

Opening hours are a nightmare. "Open until 3am" crosses midnight, which means Tuesday's closing time is Wednesday 3am. Venues that open at different times on public holidays. Venues that are temporarily closed. Venues that change their hours seasonally. A problem that looks like a simple data model is actually significantly more complex.


The result

Bar Hoppa launched in late 2024 and has grown organically through word of mouth in Melbourne's hospitality community.

The metric that matters most to us: average time from app open to "get directions" tapped is under 30 seconds in testing. We set out to minimise that number, and it shows.

Adrian's review: "Working with Lumen was a complete game-changer. They built the Bar Hoppa app from the ground up and delivered something our users genuinely love."


Working with us on your app

If you have a mobile app idea and want to talk through what's involved — technically, financially, what's realistic — we're happy to have that conversation without any commitment.

App development in Melbourne through Lumen Tech starts from $12,000 for an MVP. We work through design, development, and launch, and we're honest about what's achievable at each budget.

Get in touch to discuss your project →

Ready to build something that works?

Fixed price, no retainers, no surprises. Let's talk about your project.

Start a project

More articles

How Much Does a Website Cost in Melbourne? (2025 Guide)
Pricing

How Much Does a Website Cost in Melbourne? (2025 Guide)

Wix vs Custom Website: What Melbourne Businesses Actually Need
Web Design

Wix vs Custom Website: What Melbourne Businesses Actually Need