Project Story

Inspiration

The inspiration for this project came from the need to visually represent a person's life stages in a structured and intuitive way. Whether for personal reflection, career planning, or academic use, having a clear visual breakdown of life stages can help people understand their journey better. We wanted to explore different types of tree structures to find the best way to display this data.

What we Learned

Throughout this project, we gained a valuable insight into:

Using frontend and backend frameworks to build powerful web applications
Collaborating using version control through Github
Working as a team to fix issues / debug

How We Built It

To build the visualizations, we used:

Typescript as the main programming language.
ReactFlow for graph-based structures.
NextJS for the whole application
Supabase for authentication and database

The process involved defining the life stages as nodes and their transitions as edges. Each visualization required careful structuring to ensure clarity and effectiveness.

Challenges Faced

Some of the key challenges we encountered:

** App Design:** Designing and configuring the application for usability and tailored to the modern audience of social media
Choosing the Best Layout: Different tree structures have their own advantages and disadvantages. Finding the best format required experimentation.
Scaling & Readability: Ensuring that the graph remains readable, especially when adding more detailed life events.
Technical Issues with ReactFlow: The initial approach to ReactFlow visualization with the nodes had mismatched flow values, which required debugging and adjustments to get the correct proportions.

Conclusion

This project was a valuable experience in data visualization and structuring life events in an intuitive way. Each visualization style offers unique perspectives, and the choice of representation depends on the specific use case. In the future, we may explore interactive visualizations using D3.js or a web-based solution to make these graphs more dynamic and customizable.