Tools Used
Overview
Built for musicians.
Designed for real use.
Jam-Hub is a community app for musicians: one place to find people to play with, discover local gigs, and talk about music and gear. Everything in it is built around what musicians care about — what you play, how good you are, how serious you are, when you're free, and where you are.
It started as my final project for my UI/UX course at Algonquin College: a full design system and a 27-screen clickable prototype that switches between English, French, and Arabic. I'm now building the real app for iPhone.
What's Inside the App
Musician Profiles
Up to 10 instruments, level, goal, commitment, availability, what you're looking for, and influences. Your area shows as a circle around a rounded point, never your exact location. Add a short video and audio clip so people can see and hear you play.
Jam: Finding Musicians
Browse and filter musicians by instrument, with complete, recently active profiles shown first. Post a "Looking for…" call for exactly who you need, and message anyone in one tap.
Gigs
Open mics, jam sessions, workshops, and rehearsals as a list or on Apple Maps. Filter by type and time, post your own gig, and tap "Remind me" for a notification before it starts.
Forum
Discussions in five categories — Guitar Review, Help, Technique, Gear Talk, and Recording — with photos, replies, likes, and view counts.
Real-Time Messaging
One-on-one chat where messages appear instantly, plus an inbox with unread counts. Tap a name or photo to open that person's profile.
Safety and Privacy
Report any post, gig, comment, or person into a moderator review queue, block users, keep your birth date private, and delete your account and all your data anytime from Settings.
Phase 1 · Design
Solo. Start to finish.
- 01 Full Design System Built the complete token set from scratch: color palette, type scale, spacing units, and icon library. Every component — buttons, cards, tab bars, modals, input fields — defined with variants and auto layout before a single screen was designed.
- 02 27-Screen Prototype — No Dead Ends Mapped every user flow and designed all 27 screens to ensure the prototype was fully navigable. Every path — onboarding, gig discovery, collaboration requests, forum threads, studio management — links through correctly without hitting a closed road.
- 03 Variable Language Switching — EN / FR / AR Used Figma variables to prototype real-time language switching across all 27 screens. English, French, and Arabic — including right-to-left layout adjustments for Arabic — all controlled through a single variable toggle without duplicating screens.
- 04 Gig Discovery System Designed the full event discovery flow: list and map view toggle, filter tags, event detail cards with venue, time, genre metadata, and a registration flow — all consistent with the system's component library.
- 05 Collaboration Hub Designed the Collaborate tab end-to-end: nearby musician cards with instrument tags and contact actions, and an Open Projects board where musicians post projects and invite contributors by role.
- 06 Interactive Prototype Linking Wired every screen with correct navigation, back gestures, tab switching, modal overlays, and micro-interaction states — delivering a prototype that behaves like a real iOS app, not a slide deck.
Phase 2 · Build
From prototype to a real app.
- 01 A Real iPhone App Built to feel at home on iPhone, with the native tab bar and Apple Maps. The dark look and orange accent come straight from the design.
- 02 Accounts and Live Chat Sign-up, profiles, photo and clip uploads, and messages that arrive instantly, with each person's data kept private.
- 03 Discovery and Safety Search across posts, gigs, and people that still works with typos. Reporting, blocking, and deleting your account anytime.
Before & After
Design, then built.
The interactive Figma prototype — 27 screens, tap through it.
Screens from the running iOS app. An interactive walkthrough is coming soon.