Inspiration

What it does

Create mindmaps in Microsoft Teams with MindMap. Collect and structure your ideas by using nodes, childs, notes, topology diagrams and more. Share your mindmap in your Microsoft Teams channel and collaborate with your colleagues on your ideas.

ADD NOTES OR A TOPOLOGY DIAGRAM

With MindMap you can easily add notes or a topology diagram to capture details and illustrate your ideas. Use checklists, enumerations, HTML codes and more to describe your thoughts in the mind map. With the topology diagram you can visualize structures in a great way.

SET REFERENCES

Set references and links to create connections between different childs.

SHARE YOUR MINDMAP TO A TEAMS CHANNEL

With the import and export button, you can add your mindmaps to a Teams channel with just a few clicks. Share your mindmap with your colleagues and work on them together. MindMap makes collecting ideas and collaborating on them unbeatably easy.

GET STARTED IN SECONDS

You do not need to handle any installation process – simply click on “Add” and get started.

In short, MindMap offers everything to get started with mindmapping in Microsoft Teams.

How I built it

I started from a template that my company has for developing new Microsoft Teams Apps. Within this template is the basic structure of the frontend and an example for a backend which is prepared for the use in Microsoft Azure. At the first I started to build up the frontend, I imported all needed extensions, frameworks and so on. After the first prototype of the frontend was finished, I started to build my backend for it.

The frontend is for creating the mind map, edit them or interact with it. After the editing of the mind map, the data gets send to the backend where it gets processed and saved in an SQL database. It is also possible to export the stored data through a file so other user or programs can import the mind map.

The whole app is hosted on Microsoft Azure.

Challenges I ran into

Broken NPM Package

For building the mind map structure I used an older NPM Package for React. Unfortunately this package was broken, so I needed to fix some bugs to get it up and running. Because of our deployment routines and other internal automatizations I then needed to pack the fixed package to a new private NPM Package. This was a new experience for me.

Accomplishments that I'm proud of

For me, it is a big accomplishment that I was able to fix bugs in an older NPM package especially in a project that was not written by me. Also, a big accomplishment is that my app now is available for the public and that makes me proud.

What I learned

I learned a lot of new things while developing and publishing this app. For example, I needed to build my first NPM Package what was not so easy for me. And all the things I need to keep an eye on while publishing the app to the teams store impressed me.

What's next for MindMap

In the future we want to wait for the first customer reviews, so that we can decide what the app needs next.

Share this project:

Updates