MindMapper

• 

  Homepage

• 

  Mindmapping page with three js canvas component

• 

  output of 3D mindmap

Inspiration

The inspiration from this project came from the betterhelp journaling system which I sometimes use, I wanted to create some sort of visualisation tool for visualising thoughts.

What it does

MindMapper3D tales text input from the KendoReact Editor and renders it in 3D, the user can then take a snapshot (a jpg of the 3D canvas) with the words on so that they can reflect on the meaning of commonly occurring words that popped up in their journal, helping them to think about connections between different words.

How we built it

We built this using React, kendoreact UI components and three.js / React Three Fiber

Challenges we ran into

At first the project was more ambitious and included user profiles, a calendar system for journal entries, as well as 2D mindmapping functionality and saving journal entries back to a backend. However as a team of two with limited experience on the backend, we decided to scale down the remit for the prototype. We did get logging in and signing up working, but we were running into challenges with getting the backend fully functional so decided to scale it down.

Accomplishments that we're proud of

Implementing three js in an interesting way

What we learned

We learned more about developing prototypes in a team, as well as more about utilising kendo react ui components and using React Three Fiber

What's next for MindMapper

To build on the prototype and build it closer to the original vision.

Built With

• javascript
• kendoreact
• react
• three.js