MixMap – Map-Based DJ Event Discovery

MixMap is a personal side project: a mobile-first app that lets people discover DJ-driven events on a live map, filter by music and vibe, and interact with DJs through features like song requests.

Where my enterprise work focuses on large-scale banking platforms, MixMap is my end-to-end “maker” project — I own product strategy, UX, UI, and implementation, using it as a playground to explore real-time maps, event discovery, and social interaction patterns.

As the sole designer and builder, I:

• Defined the product vision and roadmap for an MVP focused on discovery and song requests.
• Designed end-to-end flows for two primary personas: DJs and party-goers / guests.
• Created the visual system, including map treatments, cards, filters, and interaction patterns.
• Built the app in Angular & Ionic, integrating with a backend (Supabase) and a map provider for geolocation and markers.

Today, discovering DJ events is fragmented across Instagram stories, flyers, group chats, and word of mouth. Guests often find out about events too late, and DJs don’t have a single, focused channel for showcasing where they’re playing tonight.

Existing event apps tend to be either very broad (all kinds of events) or built around ticketing, not the specific experience of nightlife and DJ culture.

The challenge: create a focused, map-based experience that:

• Shows what’s happening nearby tonight at a glance.
• Helps guests quickly decide where to go based on vibe and music.
• Gives DJs a lightweight way to promote sets and accept song requests.

As an early-stage side project, research was lean but focused:

• Informal interviews with DJs and friends who go out frequently to understand how they currently find and promote events.
• Light competitive analysis of nightlife and event apps to identify gaps in the map experience, filters, and interaction features.
• Concept sketches and quick Figma flows to align on the core “happy path”: open app → see map → filter → tap event → view details → request a song.

MixMap centers around a **map-first** home screen that keeps location and context visible at all times. A bottom sheet shows an event list synced with the map, and filters allow guests to zero in on the right vibe.

Flow 1: Discovering an Event Tonight

Goal: “I want to see what’s happening near me and pick a spot.”

• Map opens to the user’s current area with markers for DJ events.
• Horizontally scrollable filters for date, music type, and distance.
• Bottom sheet event list that can slide up over the map for more detail.
• Tapping an event syncs map and list, highlighting the marker and card together.

Flow 2: Event Details & Song Requests

Goal: “I want to see what the night is like and maybe request a track.”

• Event detail screen highlights DJ, venue, time, and basic lineup info.
• Clear primary action: Request a Song.
• Request UI is lightweight – song title/artist, optional note, and submit.
• Feedback states show when a request is sent or if the DJ isn’t accepting requests.

I leaned into a dark, nightlife-inspired palette with strong contrast for legibility in low-light environments. Cards and markers are designed for quick scanning, with clear hierarchy for event name, time, and distance.

• Dark map and UI chrome with high-contrast cards and chips.
• Consistent card patterns for events across map, list, and detail views.
• Micro-interactions on sheet expansion, filter selection, and request submission.

To move quickly from concept to something I could test with real people, I built MixMap using technologies I’m comfortable shipping with:

Front-end: Angular & Ionic, targeting both web and iOS.

Backend: Supabase for authentication, data storage, and simple APIs.

Maps: Integrated with a map provider for tiles, markers, and geocoding.

Building in code meant I could iterate directly on interaction details (map panning, sheet behavior, loading states) instead of stopping at static mockups. I backfilled key Figma artifacts later for clarity in this case study and to communicate flows more effectively.

With a working prototype, I shared MixMap with a small group of DJs and friends:

• Observed how quickly people could orient to the map and understand what the markers represented.
• Tweaked filters and event card hierarchy based on what users looked for first (e.g., time, music type, distance).
• Simplified the song request flow after seeing people hesitate at too many input fields.

• Delivered a functional MVP that demonstrates end-to-end product thinking: from problem framing to live code.
• Validated that a map-first approach with a bottom sheet feels natural for real-time event discovery.
• Identified clear areas for future development, including deeper DJ profiles, saved favorites, and richer social features.

MixMap sits in deliberate contrast to my enterprise banking work: instead of leading a large team inside a complex organization, I’m wearing every hat — product, UX, UI, and front-end build.

The project has sharpened my sense for scope and trade-offs, reinforced how valuable it is to design directly in code for interaction-heavy experiences, and given me a sandbox to explore patterns I can bring back into more formal product environments.