[52] - GitHub Workflow Builder

Inspiration 💡

Recently in a school project I used Test Driven Development (TDD) to create a web app. The project required setting up a CI/CD for testing, building, code coverage (static analysis), and deploying of a web app centered around two main features.

In this project I used GitHub Actions/Workflows to act as my CI/CD pipeline. This was a very effective and easy to integrate solution. The only downside was that I had to write all of the steps my CI/CD needed to take using YAML. While, YAML isn't difficult in itself, I wanted to visualize this pipeline as I built it. I didn't want to write YAML and visualize it in my mind. I wanted to build my pipeline visually and have the YAML generated for me. This is where GitHub Workflow Builder comes into the equation.

What it does ❓

GitHub Workflow Builder simplifies the process of building a CI/CD pipelines using GitHub Actions/Workflows by giving the user an editable drag and drop node-based graph to visually build this pipeline.

How I built it 🔨

While this project is not fully finished and more APIs and libraries will be used in the future, the three main tools I used to build this are:

React UI framework
TailwindCSS utility-first CSS framework
React Flow node-based editor
Two Reign Energy Drinks 🤯
Relaxing Gaming Time 🎮
Least Amount of Stress and Max Fun 🤗

Challenges I ran into 😞

The biggest challenges I faced with this project were technical and user interface design decisions. I started out using React to build this and was starting to get over ambitious about the technical aspects of the project. I then decided to try to use Svelte instead of React due to my familiarity with Vanilla JavaScript, but then eventually came back to React.

From this point, I struggled with customizing the user interface to match my initial whiteboard design ideas. I spent a lot of time going through and editing the nodes and making things modular to then go back and redo some things. This backtracking was productive in terms of making the UI look nice, but not productive in terms of time, which is important to take into consideration for a hackathon.

Accomplishments that I'm proud of 😄

I am proud that I got a nice clean and functional user interface built, because I have many other project ideas using this same design and node-based graph aspect.

What we learned 🧠

I learned I need to brush up on my React skills some more and learn to manage my time better for future hackathons. Although the previous statement is true, I will note that I willingly gave myself long breaks so I was not stressed in this process. This was more of an enjoyable way to spend my weekend rather than a stressful time crunch. Had I put that added stress, I might have finished more functionality, but my UI and/or I would have suffered the cost.

What's next for GitHub Workflow Builder 💭

Going forward I do plan to fully finish and launch this web app. This is something that I will use for personal projects and I assume there might be one other person in the world that will think the same. Also, I plan to extend this same type of project to other domains.