Bloccord

Important for submission

Teammates: Prabh and Justice (2 members)

No term 1s

Please go to our github linkedin below which has a read me explaing how to launch our website locally or just click our link to see hosted version. Heads up the read me is in a readme branch.

What it does

Our app allows users to build Discord app commands using blocks. Once a user is finished creating all their commands, they can simply click Download, import the files into their Discord.ts project, and they're done. Users can also preview their code before downloading in case they find any mistakes.

How we built it

We used React Flow for the visual canvas and TypeScript for type safety. Our node system uses OOP every node type extends an abstract BaseNode class that enforces a generateCode() contract. A Factory pattern converts the visual nodes into class instances, and a Singleton CodeGenerator manages an inmemory file system using ts-morph(ts-morph to programmatically generate TypeScript files). This means adding a new node type requires zero changes to the code generation just create the class and register it in the factory. All this makes it super easy to create more nodes.

Challenges we ran into

The bot code could not be downloaded before being zipped. This was fixed by saving all the project files into memory and zipping them up from there.
Discord only allows one interaction.reply() per command, so chaining multiple ActionNodes would crash the bot. We solved this by having CodeGenerator detect the first action vs subsequent actions and generate reply vs followUp accordingly.
We also struggled with closing braces inside of conditions. ConditionNode generates an opening curly brace in the if statement, but we had to figure out where to close it. We decided CodeGenerator owns the structure, so it simply references the left and right nodes of it.
For nodes to stay abstract, each different kind of node takes a different class.
We initially had too much coupling in our code, so we started coding more abstract and making sure nothing depended on each other allowing us to easily create more features. This is when we started properly using OOP principles.

Accomplishments that we're proud of

We made a fully functioning system to translate blocks into usable TypeScript code while following OOP principles. Neither of us were very familiar with React, and we managed to pull off a system that is both functional and aesthetically pleasing. The system came out exactly as planned, and has very few limitations. The system is also modular, which makes it incredibly easy to add more features later down the road.

What we learned

We learned polymorphism isn't just a textbook concept it's why our CodeGenerator can call generateCode() on any node without knowing its type. The Factory pattern taught us that decoupling object creation from usage means our codebase scales without rewrites.

What's next for Bloccord

We want to add more kinds of blocks to the user interface, such as message listeners, emoji reactions, loops, variables, and more. We would also like to make the bot runnable from the web browser to make setup even easier for the end-user. It would also be great if we could make the bot exportable to more than just TypeScript, such as Python or Java.