[DMP 2025]: Music Blocks 4 Masonry Module

[pikurasa]

Ticket Contents

Description

Music Blocks programs are designed to be built interactively by connecting
program constructs, which are visually represented as snap-together, Lego-like
graphical bricks. The goal is to develop a module for Music Blocks (v4) that
enables the creation of Music Blocks programs.

The project will begin with the development of a framework for generating individual
brick components that represent various program syntax constructs. This will be
followed by the creation of utilities to represent any program structure through
visual connections between the bricks. Next, a component will be built to display
all available program bricks, organized into categories, sections, and groups.
Finally, a workspace will be developed where users can drag-and-drop, as well as
connect and disconnect the program bricks to create their programs.

To draw the bricks, we will use SVG paths, so a solid understanding of SVG path
commands is crucial. The development will follow an Object-Oriented Programming
approach in TypeScript, with the rendering and management of visual states handled
using React Functional Components. A strong understanding of both TypeScript and
React is expected.

This project began last year, and you will be expected to build upon the progress
made and complete the module.

Goals & Mid-Point Milestone

Goals

• Collaborate with project maintainers to create a design document outlining
  functional requirements, UI considerations, both high-level and low-level designs,
  and a technical specification.
• Develop utilities to generate SVG paths for the bricks based on configurations.
• Build utilities to represent and manipulate Music Blocks programs in-memory.
• Develop the four individual submodules outlined above.
• Write Storybook stories to document and showcase UI components.
• Implement unit tests for functions and classes using Vitest.
• Focus on optimizing processing performance.
• Export a minimal API for integration with other parts of the application.
• Document progress, outcomes, and technical guides for future contributors.

Setup/Installation

No response

Expected Outcome

No response

Acceptance Criteria

No response

Implementation Details

The following tools will be important to implementation:
TypeScript 5, React 18, Sass, Storybook, Vitest, and Vite

Knowledge of how Music Blocks (v3) works is essential to proper contextualization. Please familiarize yourself with that tool from a user's perspective, creating a few projects that interest you: https://musicblocks.sugarlabs.org/

Mockups/Wireframes

No response

Product Name

Music Blocks V4

Organisation Name

Sugar Labs

Domain

⁠Education

Tech Skills Needed

React, TypeScript, UI/UX/Design

Mentor(s)

Mentors

Anindya Kundu

Assisting Mentors

Walter Bender

Devin Ulibarri

Category

Frontend

[Abhsihekkaul]

Hi @pikurasa @meganindya @walterbender ,

I hope you're doing well! My name is Abhishek, and I am very interested in contributing to the Music Blocks 4 Masonry Module as part of GSoC 2025.

I have a strong background in React (Functional Components), TypeScript, and SVG-based UI development. I have also explored Music Blocks v3, and I am excited about the opportunity to enhance the visual programming experience for music creation.

To ensure I align with the project's vision, I have reviewed the repository and started experimenting with Music Blocks. I’d love to discuss the current progress, any existing challenges, and how I can contribute effectively. I have successfully set up the music v4 in my local machine.

Would you be open to a short discussion or providing guidance on the next steps? Looking forward to collaborating with you and the team!

Best regards,

[btwshivam]

Hi @meganindya @walterbender @pikurasa,
I'm interested in contributing to the Music Blocks V4: Masonry Module project. I have experience with React and TypeScript and would love to get started. Could you please guide me on the next steps or any issues to get started?

[kevalmehta17]

Hello ! I am interested to work. Could you please guide me on the next steps or any issues to get started?

[pikurasa]

hey would love to work on this please let me know the further steps to follow

This is a special issue for people interested in DMP: https://codeforgovtech.in/dedicated_mentoring_program/

Also, I suggest you join us in https://matrix.to/#/#sugar:matrix.org, https://matrix.to/#/#musicblocksdev:matrix.org, and https://matrix.to/#/#sugarizer:matrix.org.

[Piyush-t24]

Hi @pikurasa,@meganindya,@walterbender ,

The concept of building an intuitive visual programming interface using SVG and React really caught my attention. I’m especially excited by how the project blends music, creativity, and frontend engineering through snap-together blocks.

I've been working with React, TypeScript, and component-based design, and I’m eager to contribute and further explore SVG rendering and drag-and-drop UIs. It would be great if you could guide me on how to get started or how I can begin contributing toward the DMP 2025.

Looking forward to hearing from you!

[RohanMatre]

Hi @pikurasa, @meganindya, @walterbender,

Hey everyone! I'm Rohan Matre, a frontend developer with a strong background in React, TypeScript, and building clean, interactive UIs. I came across the Music Blocks V4 project and it immediately caught my attention — combining code, music, and education is such a cool intersection.

I’ve worked on projects involving drag-and-drop interfaces, custom SVG rendering, and component-driven design. I’m comfortable with tools like Storybook, Vitest, and Vite, and I love writing clean, maintainable code that’s easy to scale and collaborate on.

I’ve started exploring Music Blocks v3 to get a good feel for how it works from a user’s perspective, and I’d be excited to build on that and contribute to version 4. Would love the chance to collaborate with the team and learn from the amazing mentors involved!

Looking forward to hearing from you!

[sourav-sm]

Hi! @meganindya , @pikurasa , @walterbender ,
I'm really interested in contributing to this project. I love the idea of combining music and coding through interactive visual blocks.

About me , I am Sourav, final year student of NIT Durgapur I have experience with React and TypeScript (build several applications), and I'm excited to learn more and help build Music Blocks V4!

Previously I worked as a frontend Developer Intern at Prodloop and also contributed to Processing Foundation.
Looking forward to hearing from you!

[himudit]

Hi @AnindyaKundu @walterbender @devinulibarri,

I hope you are doing well! My name is Mudit, and I’m excited about the opportunity to contribute to the Music Blocks V4 project under Sugar Labs, particularly the visual programming module for brick components.

I have hands-on experience with React (Functional Components), TypeScript, and SVG-based UI development, which aligns closely with the technical requirements of this project. I’ve also explored Music Blocks v3 to better understand its context and philosophy, and I’ve started setting up the v4 environment locally.

I’m especially drawn to the blend of visual programming, musical creativity, and frontend engineering in this project. I’d love to collaborate with the team to bring an intuitive, high-performance drag-and-drop interface to life. I’m also comfortable working with tools like Sass, Storybook, Vitest, and Vite, and I look forward to contributing to both development and documentation.

Would it be possible to discuss the current state of the module, any specific challenges, and the best way to start contributing? I’m eager to learn more, align with the roadmap, and contribute meaningfully to the team’s goals.

Looking forward to hearing from you!

Best regards,
Mudit

[dhaarypravi]

Hi @meganindya @walterbender , I'm interested in contributing to this issue. Could you please assign it to me?

[marvillage]

I hope you're doing well! I have reviewed the project details for Music Blocks V4 and I am very excited about the opportunity to contribute to this module. I have experience with TypeScript, React, and UI/UX design, and I am confident that I can help move the project forward by implementing the necessary components and utilities for Music Blocks programs.

Could you please assign this project to me? I would love to collaborate with you and the team to contribute to the success of this module.

Looking forward to your response!

[pikurasa]

Hi @meganindya @walterbender , I'm interested in contributing to this issue. Could you please assign it to me?

This is a special issue. It's for https://codeforgovtech.in/dedicated_mentoring_program/. We encourage interested contributors to apply there.