Summer Prelude : MusicBlocks

About me

- Karan Palan

- Freshman at Manipal Jaipur

Project Name - Masonry Framework Integration

Primary TechStack -  React, TypeScript

What is MusicBlocks ?

Music Blocks is an educational tool that teaches musical concepts and programming through visual, interactive blocks. It helps users create and understand music while learning basic music theory and coding. The platform is ideal for children and beginners.

Why the need for a  newer MusicBlocks?

The existing implementation, which started in 2015 using native Vanilla JavaScript, lacks modern front-end tooling and ecosystem standards, leading to difficulties in maintenance and subpar performance. The v4 (new) project uses improved application architecture, modern tools (such as Vite, ESLint, Prettier, Docker, Jest, Cypress, etc.), better languages (TypeScript and Sass), and libraries (React for UI rendering). This will significantly enhance the overall developer and user experience, maintainability, and performance.

What is the Masonry Framework?

It is a graphical blocks manager module used to create Music Blocks programs, including interactive blocks like Start, Rhythm, Note, Pitch, Instrument, and many more. These blocks can be dragged, dropped, and clicked to perform actions . By implementing the Project Builder feature end-to-end, users will be able to create different musical patterns seamlessly.

DEMO

Major parts of Masonry Framework

1. Brick: A single, reusable block representing a musical or programming concept.
2. Brick Stack: A sequence of connected bricks that collectively perform a more complex function.
3. Palette: A collection of available bricks that users can drag into the workspace.
4. Workspace: The area where users arrange and manipulate bricks to create and visualize their music and code.

What have I and my mentor been working on ?

1. Design Document

a. PRD

b. Architecture Diagram

c. Tech Spec

2. Setting up the codebase locally

and understanding it, having design discussions with Sugarlabs community

Why is this helpful?

1. Catch Errors Early: Finding and fixing problems before coding starts, saving time and effort.
2. Better Design Choices: Making smart decisions about how the software will work and what technologies to use.
3. Clear Planning: Having a detailed plan that makes it easier to manage the project and coordinate the community.

What Next?

Start Coding !

Thank you !