Flow Tree

Finding flow in work is fantastic. However, your flow might be interrupted by either

  • 👋 getting stuck and be in need of someone's help
  • ⌛ self having to involve in the work of others to assist

Flow Tree is a Monday application that focuses on the execution part of a system development project. When the work diverges from the expected task, it often lives beside the main task board. With this board view, solving tricky tasks become more joyful and a project manager gets an overview of what is going on.

Inspiration

As a full-stack developer, I bump into all kinds of problems where my progress would benefit from help from someone. The problem can not always be solved immediately, which sometimes means that I have to switch to another task in the meantime. This might work for a while but is problematic when developers end up with too many parallel tasks, which can feel stressful and potentially postpone the date of delivery.

My idea is that if each developer could enter ongoing tasks and statuses, the team should be able to get an overview regarding who needs assistance and suggest a time slot.

At the same point, it can become overwhelming for someone that turns out to be a key person that many others are waiting for. Thus the need to visualize and alert on workload for help and notify the project manager about someone being far too needed. By visualizing the needs, it will be clear who has to pause her own work to help others.

Note: To be able to create practical examples, I focused on Software Development, however, I think this solution in other areas as well.

Here's my initial sketch made in Figma (images free to use from the Content Reel extension) prototype

What it does

Key features:
✅ Tree visualization
✅ Workspace template
✅ Interact with Items: write updates, assign people to help
✅ Customize warning level

Key values:
🧘 Stress/Workload relief
💡 Visuals to lighten up work

Screenshot from final board view prototype

🐱‍💻 How I built it

The submission consists of two Monday App Features:

  • a Board View with the Flow Tree visualization and actions
  • a Workspace Template to give app users a quickstart with an example board.

The Board View was created from the React.js template and the monday.com SDK monday-sdk-js. From the SDK, I mainly used the monday.api and monday.listen capabilities to get/mutate user data with the GraphQL API.

🎨 To achieve a styling that agrees with Monday:

🔨 Third party and useful tools:

  • For visualization, I used the VISX node package. (MIT license)
  • Monday Developer documentation as well as the API Playground and NGROK while developing.

To set up to create and validate a Workspace template, I created a Workspace feature in the app and connected it to a board to which I could add the Flow Tree board view itself, as well as the needed column types and mock data in the Main Table. Then I created another workspace based on my template to preview the result.

Setup to create and validate a Workspace template

I also tested to create an integration with Gmail in the context of Flow Tree:

gmail integration

⛰️ Challenges I ran into

It was my first time both using Monday.com and also building Monday Apps, thus the need to first learn the basics. I was struggling a bit to come up with a good development setup when it comes to debugging. The NKROK preview has no developer tools like a console, which I have in my localhost but there I don't get settings or context. Also, I am not sure what is the best way to fetch the current board that will work for all project setups for users as the app goes live. A technical issue I ran into was when I tried to implement mutations for item updates but I often got a parse error on the (GraphQL) which I didn't manage to get working.

🌟 Accomplishments that I'm proud of

I'm proud that I managed to create an App that agreed with my prototype pretty well, that I was able to map item data and settings to the graph elements. I'm glad that I extended my efforts to dive into the recommendations for Monday apps like styling and creating a workspace template for a more complete user experience.

💡 What I learned

I learned how to think about web applications (and React in particular) as modules possible to integrate with another system. Also, this was my first time using GraphQL and I learned a lot. It was also valuable to experience a practical example of using the port tunneling with NKROK.

🏹 What's next for Flow Tree - Monday App

  • Adding more features. I had many ideas that I would implement with more time! For example, GitHub integration with the task is closely related to code commits or issues, and Teams integration to escalate items that need urgent attention.
  • Adding more actions. I would like to add more actions to the board view. Like changing the order of the graph nodes, sort on people with most workload or need for help.
  • Combine with other apps and integrations. Many great Monday apps exist that deal with the task of managing big projects, scoped all the way from planning to done, and others have come up with a way to let items be dependent on each other. Flow Tree focuses on items that are currently in progress and it would be fun to see it integrated as a part of a large project.

Add to monday.com

Built With

Share this project:

Updates