GSoC 2025 Project #3 HarmonyHub :: Front-end interface refractoring and expansion for multi-instrument support (175h)

GSoC
1

Mentors: Alberto Acquilino <alberto.acquilino@mail.mcgill.ca>, Mirko d’Andrea <mirko.dandrea@gmail.com>, and Keerthi Reddy Kambham <reddykkeerthi@gmail.com>

Skill level: Intermediate

Required skills: Expertise in front-end development (HTML, CSS, JavaScript); proficiency in Angular framework; knowledge of Ionic framework (preferred); experience with responsive design and cross-platform development; knowledge of UI/UX design principles (experience designing educational interfaces is a plus); basic understanding of music pedagogy and instrument-specific requirements (preferred).

Time commitment: Full time (175 hours)

Forum for discussion

About: HarmonyHub is an open-source, modular web application designed to enrich music education by integrating modern technologies and pedagogical approaches. The platform leverages Ionic and Angular frameworks to deliver reusable components and services, enabling educators to create adaptive and personalized learning experiences for their students. While the current implementation of HarmonyHub focuses on music education for trumpet players, there is a need to refactor its front-end interface to enhance usability and expand its pedagogical scope to include additional instruments (e.g., violin, cello).

Technologies and Frameworks

  • Ionic framework and Angular for app development
  • CSS and responsive design techniques for device compatibility
  • UI/UX design principles to improve pedagogical interfaces.

Aims: This project aims to ensure that the front-end design is responsive, reactive, and optimized for various devices, including Android, iOS, and browser platforms. This project will result in a fully responsive, user-friendly front-end interface that:

  • Refactors the current app to ensure reactivity and compatibility across devices of all screen sizes
  • Expands the pedagogical potential of the app by designing interfaces for additional instruments, such as the violin.

Objectives

  • Refactor the existing front-end interface to improve responsiveness, ensuring seamless operation on Android, iOS, and browser platforms
  • Optimize the app’s reusable modular components for consistency and scalability
  • Design pedagogical interfaces for additional instruments (e.g., violin) to expand the app’s educational scope
  • Enhance the overall UI/UX design to improve usability and accessibility for educators and students

What can I do before GSoC?

  • Familiarize yourself with the existing HarmonyHub codebase, particularly the front-end architecture
  • Explore responsive design principles and best practices for cross-platform development
  • Experiment with Angular and Ionic to understand their capabilities for building modular, reusable components

Websites: Music Education Interface | Alberto Acquilino and GitHub - albertoacquilino/music-education-interface-ionic

Tech keywords: Front-End Development, Responsive Design, Angular, Ionic, UI/UX Design, Music Education

2

Hey @Alberto , @mirko , and @Keerthi_Reddy_Kambha ,

I’m Deepam Jha, a second-year student at GGSIPU. I’m excited about the HarmonyHub GSoC project, especially since it blends my Angular/Ionic front-end skills with my passion for music. After reviewing the code in your music-education-interface-ionic repo, I’m eager to help improve responsiveness, add multi-instrument support, and enhance the overall user experience.

Do you have any specific design patterns, libraries, or performance bottlenecks in mind for the upcoming refactoring? I’d also love to know if you plan to integrate more real-time audio features.

Thank you for your time, and I look forward to the possibility of working with you on HarmonyHub.

3

Dear @Alberto , @ mirko, and @Keerthi_Reddy_Kambha ,

I’m Sai Surya Talla, a student at IIT Bhilai, and I’m thrilled about the opportunity to contribute to HarmonyHub. With my background in frontend development and UI/UX design, I believe I can make meaningful contributions to the project.

I have solid experience working with frontend frameworks, and I’m familiar with Angular. Recently, I’ve started exploring Ionic and will get back to you soon after building some applications using these frameworks.

Additionally, I’m the lead of my college’s graphic design club, so you can expect some delightful UI ideas from me as well! I’d love to know if there are any additional details I should be aware of to get started. I’m super enthusiastic about interacting with the mentors and contributing to the project to the fullest.

Looking forward to hearing from you!

Best regards,
Sai Surya Talla
IIT Bhilai

4

Hello everyone,
Thanks for your interest! We are starting the selection process. I recommend interested contributors to work on the application proposal template: GSoC-Proposal-Template - Google Docs

There are also open issues on the repository which are helpful to start getting familiar with the codebase. We will keep revising the pull requests on the go, according to our availabilities.

Once you have filled the application document, you can reach out to all the mentors via email for feedback.

Best regards,
Alberto

2 Likes
5

@Alberto
My name is Shivam Yadav, and I’m a second-year electronics engineering student at Shah and Anchor Kutchhi Engineering College. I came across the HarmonyHub project, and I’m really excited about the opportunity to contribute to it through GSoC 2025.

I have a strong foundation in HTML, CSS, and JavaScript, and I’m currently learning Angular and Ionic to expand my expertise. I’m particularly interested in UI/UX design and responsive development, and I believe I can help improve the platform’s usability while also working on multi-instrument support.

I’ve started exploring the HarmonyHub codebase and will be looking into open issues to get more familiar with the project. If there are any specific areas where contributions are most needed, I’d love to hear your suggestions!

Looking forward to learning and collaborating with the team. Excited to be a part of this journey

6

Hello everyone!

I am a full-stack developer and a student at Apna College, passionate about front-end development and UI/UX design. I have hands-on experience working with JavaScript, React, Next.js, and Tailwind CSS, and I’m always eager to learn and build scalable applications.

I recently developed an Airbnb clone using the MERN stack, though it currently lacks full responsiveness. In contrast, I also built a highly responsive portfolio website, showcasing my skills and projects. You can check it out here: [https://aryan-portfolio-h9q9.vercel.app/]
airbnb clone : [https://wanderlust-backend-project.onrender.com/]

For GSoC 2025, I am thrilled to contribute to HarmonyHub, focusing on refactoring the front-end interface and improving its responsiveness across platforms. I look forward to collaborating with mentors and fellow contributors to enhance the platform’s usability and expand its scope for music education.

7

By the way, I am Aryan Yadav

8

Hello everyone, I would suggest you to fill the proposal template provided and attach it in an email to all mentors, so we can schedule an interview.
Best,
Alberto

9

I have successfully installed it locally. Is this the right interface?

image
image1366×768 112 KB

10

Hi everyone,

I hope you’re all doing well. My name is Siddarth and I’m a Computer Science student at USC with experience in front-end development, responsive UI/UX design, and modular application architecture.

I’m very interested in the HarmonyHub GSoC project focused on refactoring the front end and expanding support for multiple instruments. I’m eager to apply my knowledge of component-based frameworks like React and Angular to build user-friendly and scalable tools that enhance music learning. I am also a trained pianist for over 10 years which is why this project was appealing to me.

I would love to hear more about the current goals for the project, your expectations for GSoC contributors, and any tips you might have for submitting a strong proposal. I’m excited to explore how I can create a strong application.

Looking forward to your guidance on next steps!

Best,
Siddarth

11

Hello Everyone,
I am Sania Golhar - a second year student at Vishwakarma Institute of Information Technology. My interests lie in development and I have explored multiple coding languages and frameworks such as HTML,CSS, JavaScript, Node, React, Angular, Express and NextJs. I am familiar with Angular and Ionic, them being the key frameworks used here.

P.S. I am myself a Guitar player and use metronome and tuners a lot during practice and learning.

Cheers!
Sania

12

Hey team,

My name is Felipe Sanchez and I am a Full Stack developer based out of Brooklyn, New York. I have experience working on the frontend via CMS tools and React but have tested out Angular. I was interested in this because I also did make music as an aspiring EDM artist when I was younger and this is a cool way to connect both my passions. I look forward to working with the team and helping out.