- Project number
- Project / 017
- Year
- 2026
- Category
- Product
- Status
- Active · Live
VSB
Organizing social volleyball through messages and individual coordination felt unnecessarily difficult. VSB started as an attempt to make that process easier.
- Origin
- Everyday problem → Real product
- Role
- Designer and developer
- Status
- Active · live
- Stack
- React · TypeScript · Vite · Tailwind CSS · Supabase
01 /The problem
Coordination lived in messages.
Sessions were organized through WhatsApp and individual messages: asking who could play, tracking the replies and keeping a list up to date by hand.
- WhatsApp / messages
- Ask players
- Track responses
- Organize session
02 /The idea
One place for the whole session.
VSB is a Malaysian social-volleyball platform where organizers can create sessions and players can discover games, see who is playing, book places, and participate in a broader volleyball community.
- Create session
- Discover
- See players
- Book
- Play
- Community
03 /The product
From messages to a product.
The signed-out home page: find a game, see who is playing, become part of VSB.
Real product · vsb.madebyrazeen.com
The same page on a phone.
Real product · vsb.madebyrazeen.com
01Session cards: date, venue, level, who is playing and how many places are left. A full session switches to a waitlist.
Real product · Development preview with sample data
02Session details: the facts, the price and booking in one panel, then Who is Playing on the court.
Real product · Development preview with sample data
Booking, payment and My VSB need an account. The session and profile screens here come from the app's own development preview, which renders the real pages with sample data, so no member's details are shown.
04 /Player identity
A player card built from real sessions.
Every member gets a VSB player card with their position, level and games played, shown on their profile, on session rosters and on bookings. One photo can become a personal VSB player in the house style, in a pose the member chooses.
How the home page introduces the player card.
Real product · vsb.madebyrazeen.com
My VSB for a sample profile with no games yet.
Real product · Development preview, sample profile05 /Build
What I built.
01Sessions and Who is Playing
Fixtures grouped by week, session details with the roster on a court view, and the waiting list in queue order.
02Booking
Book yourself and one friend, a typed-in guest or a registered member. Private sessions sit behind a passkey.
03Payment and holds
DuitNow QR and receipt upload. Unpaid places are held for a limited time; a scheduled job releases expired holds and fills places from the waiting list.
04Organizer console
Sessions, bookings, payments and players in a separate console. Organizers only see their own sessions, enforced in the database with row-level security, not only in the interface.
05Player identity
Player cards, My VSB, My Games and a community roster where members can hide themselves.
06Two languages
English and Bahasa Melayu throughout.
06 /Current state
Active and live.
VSB is active and live at vsb.madebyrazeen.com, used by a Malaysian social-volleyball club.