Flow | Devpost

Creating a roadmap
Final Styling
Logo

Inspiration

We, as students and ambitious innovators, find ourselves in projects or lost in an idea; however, we can fail to capture the idea using the tools we have. We saw a necessity to: • Understanding the varying branches/paths of an idea • Easily visually displaying the way these ideas are grouped together • Having the room to capture the extent of ideas

Through these problems, we developed a tool that seamlessly merges the solutions and forms a coherent product for use.

Additionally, we recognized that these problems are shared beyond merely Computer Science majors. We saw the impact this would have on every single person. To create a project, to work with other people, to simply have ideas—Flow accomplishes makes it easier. • Authors can develop their world-building with Flow • Coders can visualize their program with Flow • Companies and groups can formulate workflow maps with Flow

In the design of Flow, we recognized the non-discriminant use of such a tool and found it is a tool that belongs in the likes of Google Suite or Microsoft Office. As a result, the inspiration of simplicity yet effectiveness was found.

What it does

A founding idea behind Flow is universal applicability.

With Flow, users may create idea cards. Each card is a single thought or topic. The user is also able to make connections with arrows. The user connects thought to thought, topic to thought, and topic to topic. This allows users to create paths from topic to topic to topic. Perhaps an author would use this to display the Romance plotline in their novel. A game developer could show a path of progression. An organization could show its work pipeline in a specific branch. Through creating these paths, a user will often create a web of ideas and paths (given how projects are oftentimes complex). We recognized this and implemented grouping features. Users may group ideas by colors. They may give that group a label. They may organize their web to a more simple nature.

Examples of use cases of flow: • In a novel, while there may be a romance plot path, the user may want to color code different sections based on chronology, or maybe the involvement of specific characters. • In a program, while paths may recognize specific Java files, color grouping may be used to display variables used between them.

In the end, the user may create a complex web of ideas and paths that are neatly organized by color. Then, in the sidebar, we added an easier way of displaying groups—showing all the groups that exist, and when clicking on a group, the group is emphasized on the web. This allows the user to take a step back and understand their groups and projects as a whole.

Additionally, we provide various features to enrich user experience: • Stylization • Header menu for simple settings • Moving ideas around (and having the arrows follow) • Grouping Ideas through color-coding

How we built it

We built Flow with the idea that in the Google and Office suite, there was no good way to map out ideas. There were ways to do it, but no ways that were specifically for mapping out ideas. This is where Flow comes in. It was built on raw HTML, CSS, and JS to make a website that allows you to more easily map out ideas, draw connections between them, and group ideas together.

Challenges we ran into

Many problems with getting arrows drawn properly, time constraints, and not getting sidetracked, also biting off more than we could chew.

Accomplishes we are proud of

How far we got in this project, how well it turned out, and how clean we were able to keep the code, even with the time constraints. Splitting our tasks into two groups was incredibly efficient as we were all able to focus on certain parts of the project without interruptions or having to deal with too many merge conflicts.

What we learned

Utilizing Figma to visualize and plan frontend designs, new methods to do frontend design, how a simple idea can become incredibly complex, and of course: Team work! Organization! Time Management!

What's next for Flow? Keep an eye out for:

Stylization (and grouping) of arrows, further Stylization, further menu functionality, improved user interface, and fixed glitches/bugs. Our whole framework and functionality is there, yet we strive to make our application a prominent tool for both the average user or professional chart makers.