Built with FlutterFlow
Bebop by the Numbers: Music Learning Platform
Studio Kelcy
Bebop by the Numbers: Music Learning Platform
Bebop by the Numbers is a music-learning platform designed to help musicians develop their improvisation skills through practical lessons, guided practice and repeatable musical building blocks.
Studio Kelcy migrated the existing app to FlutterFlow and expanded it into a connected learning experience across iOS, Android, tablet and web.
Project Overview
Services
App strategy, UI/UX design, FlutterFlow development, Firebase development and launch support
Platforms
iOS, Android, tablet and web
Technology
FlutterFlow, Firebase, RevenueCat and Mailchimp
Industry
Music education
Project Type
App migration, rebuild and expansion
The Brief
Bebop by the Numbers had originally been created on another app-building platform. As its content, programs and community grew, the team needed a more flexible product that could continue evolving alongside the business.
The project involved migrating the app to FlutterFlow, restructuring the user experience and expanding its functionality.
The new platform needed to support daily practice content, structured courses, videos, subscriptions, progress tracking and learning resources. The Bebop team also needed an admin dashboard to manage users, programs, access and communication.
Phase 1: Design
Creating the App Experience
The first phase focused on understanding how musicians would move between learning, practising and creating within the app.
The existing content was reorganised into a clearer experience built around five main areas:
Home
Riffs
Courses
Jam Sessions
Resources
This created a consistent navigation system while allowing the platform to hold a growing collection of lessons, videos, practice activities and downloadable resources.
Visual Direction
The app’s visual design was developed around Bebop by the Numbers’ existing identity.
A predominantly black interface allows the musical notation, lesson content and videos to remain the focus. White typography creates clarity and contrast, while small accent colours help identify actions, progress and selected navigation items.
Typography
Readex Pro for clear interface text
Outfit for supporting headings and content
Existing Bebop serif typography retained for branded learning material
Colour Direction
Black and charcoal interface
White text and content areas
Red and turquoise accents
Existing Bebop artwork and illustrations
iPad/Tablet compatible
Responsive Design
The experience was designed to work across mobile, tablet and web.
Layouts were adapted for each screen size so users could access the same programs, resources and practice tools from their preferred device.
Phase 2: Build
FlutterFlow Development
The approved designs were rebuilt in FlutterFlow and connected to a Firebase backend.
The app was structured to support different content types, user access levels and future expansion. Reusable components and dynamic content made it possible for the Bebop team to continue adding new lessons, resources and programs.
Riff of the Day
Riff of the Day gives users a new musical idea to learn and practise each weekday.
Each riff includes musical notation and four play-along videos. Users can practise the riff over different chords before applying it within a complete blues progression.
Riffs can also be saved to a personal collection for future practice.
Courses and Jam Sessions
Structured courses and Jam Sessions allow users to develop their skills through guided learning programs.
Expandable sections keep larger amounts of content easy to navigate, while lessons can include written instructions, videos, charts, downloadable resources and progress tracking.
Practice Tools and Resources
The resources section gives musicians access to interactive tools and supporting material, including:
Riff calculator
Ear-training activities
Random riff pickers
Practice games
Music charts
Downloadable PDFs
Guided exercises
Some activities are displayed through dynamic HTML content, allowing interactive learning tools and games to sit directly within the app.
Subscriptions and User Access
The platform supports both free and paid content.
Subscription access can be enabled or adjusted according to the needs of the business. Unique program codes also allow specific users or groups to access specialised content.
Admin Dashboard
A separate admin dashboard gives the Bebop team control over the platform without needing to edit the app itself.
Administrators can:
Review user activity
Manage learning content
Create program access codes
Control access for different user groups
Send immediate push notifications
Schedule notifications in advance
View platform analytics
Additional Functionality
The finished build includes:
User accounts and profiles
Daily content
Video-based lessons
Courses and programs
Jam Sessions
Downloadable resources
Interactive HTML tools and games
Personal riff creation
Saved riffs and notes
Progress tracking
Subscriptions
Unique access codes
Scheduled push notifications
Mailchimp integration
Responsive mobile, tablet and web layouts
Phase 3: Launch
Testing and Deployment
Once development was complete, the app moved through final testing and launch preparation.
Studio Kelcy supported:
Functional testing
Responsive testing across devices
Subscription configuration
App Store and Google Play preparation
Store listing requirements
Production Firebase setup
iOS and Android deployment
Web-app deployment
Final launch support
The platform was released across iOS, Android and web, giving musicians the flexibility to learn and practise wherever they are.
The Outcome
Bebop by the Numbers was transformed from an existing app into a broader digital learning platform.
Musicians can now discover new riffs, practise with guided videos, complete structured programs, use interactive learning tools and track their progress across mobile, tablet and web.
Behind the scenes, the Bebop team can manage content, member access, programs and communication through a dedicated admin experience.
The rebuilt platform provides a flexible foundation that can continue growing alongside Bebop’s courses, resources and music-learning community.
Explore the Project
Website
https://bebopbythenumbers.com/
Have an App Idea?
Studio Kelcy helps founders and businesses shape, design, build and launch thoughtful digital products with FlutterFlow.
From early product planning and UI/UX design through to development, testing and store launch, Studio Kelcy can help bring your app idea to life.
Like this project
Posted Jun 3, 2025
Bebop by the Numbers is a method for learning music creation for all aspiring musicians, instrumentalists, and vocalists–focused on creating your own music.
Likes
2
Views
35
Timeline
Jun 3, 2024 - Jun 11, 2025
