GSoC 2023 with Sugar Labs | Week 1-5 | Music Blocks (v4) project updates

Posted on by

Hi everyone, welcome to the GSoC’23 Blogs, Index 0 with Sugar Labs – the first blog of the series where I am documenting my complete journey as a contributor for Google Summer of Code 2023 under Sugar Labs for the Music Blocks (v4) project.

Since the beginning of the coding period one month ago, I would like to share what I have done during the last month as well as the overall project updates.

Week 1:

As our final semester exams were going on, so I participated passively in the first week while joining the meetings and taking part in the discussions.

Week 2:

Just to mention, the Music Blocks v4 project is a complete overhaul of the original Music Blocks project (v3), which was derived from the Turtle Blocks project. So, there are lots of complex patterns and interactions which are a part of our codebase. We’re following the MVC pattern for the application where the models, views, and controllers are completely separated (i.e. to separate business logic and display).

That’s why we spent our first two weeks mainly discussing various things related to our app, patterns and different methods for handling the interactions (eg. rendering SVGs inside a canvas or directly to the DOM nodes).

Week 3:

This week we worked on building one prototype (inspired by the existing builder-framework prototype) for different blocks (Flow, Clamp, Arg, etc.) using React’s functional component approach, where we can pass different values and properties for the SVGs using props. But later, after discussion, we dropped this approach as per the suggestion of our mentor. And we focused on building the classes for different blocks (which are named “bricks” later on).

Week 4-5:

This week, I implemented and raised Pull Request (#342) covering the following things:

  • Implement the final classes as described in Implement a class-based inheritance structure for bricks #328
  • Implement the SVGpaths getter which returns string[]
  • Generate the path for the SVGs for different types of Bricks using the generatePath utility method
  • Create 4 different React components for the bricks under design0/components
    – modules/code-builder/src/brick/design0/components/BrickBlock.tsx
    – modules/code-builder/src/brick/design0/components/BrickData.tsx
    – modules/code-builder/src/brick/design0/components/BrickExpression.tsx
    – modules/code-builder/src/brick/design0/components/BrickStatement.tsx
  • Add styling properties to the appropriate tags
  • Fix Storybook stories for the components under modules/code-builder/src/brick/stories

Here are some of the screenshots:


Also, as per the research work, I proposed a beautiful open-source library called react-aria for handling the drag events across all devices for the different Bricks (SVGs).

This week (week 6), we’re focusing on implementing the rest of the things for the Bricks components and the classes, i.e. handling scale property, resizing SVGs as per the width of the text labels and rendering SVGs correctly with the updated properties.

In the coming weeks, I look forward to making more progress on the project. So far, I hope you’ve enjoyed reading about my progress. I’ll be back with new updates about my GSoC journey soon.

Also, don’t forget to drop a star on the project GitHub repo! ⭐
Link: https://github.com/sugarlabs/musicblocks-v4

You can connect with me on LinkedIn. Additionally, you can follow me on GitHub and Twitter, it will be appreciated.

Thank you for reading!