useMindMap – DEV Community



Overview of My Submission

useMindMap is a thoughts mapping software backed by Appwrite. It leverages Customers/Groups, Database, Realtime, and Capabilities to supply a primary thoughts mapping service for your self or a workforce.

Stay: https://usemindmap.app

View of a useMindmap flow


  • Join/register, forgot password, and workforce invitations
  • Private and Crew workspaces to your thoughts maps
  • Collaborative thoughts mapping powered by Appwrite Realtime
  • Thoughts mapping performance constructed on high of React Circulate



Constructing useMindmap

Step one was to deploy Appwrite. I’ve used Digital Ocean for a while and I like their single-click app marketplace. This bought me an inexpensive droplet operating Appwrite in about 5min. Utilizing an present area for testing functions I arrange a subdomain for the Appwrite occasion, performed round with the admin console and thought “Hell yeah, that is superior!”

I created a Internet mission, configured setting variables, and did all of the housekeeping obligatory to organize for full-scale improvement. After two days getting acquainted with Appwrite I used to be able to construct.



FRONTEND

I began the frontend with a easy React mission template (webpack, babel, eslint, typescript) and blocked out the web page routes I would wish:

  • Residence (/)
  • Auth ( /sign-in, /sign-up, and so forth)
  • Dashboard (/~, /~/profile, /~/groups, and so forth)
  • Mindmap (/~/maps)

Utilizing inspiration from Chakra UI Pro and Tailwind UI I then created the sign-up/sign-in pages and built-in with the Appwrite SDK to create a consumer and a logged in session.

The Dashboard adopted with the sidebar and content material:

  • Logged in consumer particulars
  • Predominant “exercise” view
  • Profile and Groups view
  • “Workspaces” checklist and consider

View of the user's personal workspace

From some tinkering round with Appwrite’s Database and SDK, I settled on making every workspace a Assortment and every Mindmap a Doc with attributes:

  • title: string
  • description: string
  • nodes: string[]
  • edges: string[]
  • tags: string[]

After a pair weeks fleshing out the UI and getting intimate with the Docs and SDK, I used to be lastly tackling the MIIINDMAAAP (*spooky music*)

When a consumer creates a mindmap for a given workspace, a doc is created within the related assortment and the consumer is launched into the /~/maps/:id path. As soon as contained in the Mindmap view, the React Circulate occasion is used to create nodes, moved them round, save a label, connect edges, and delete them.

React Circulate represents its nodes and edges as objects with attributes like id, place, width, peak, supply, goal, there are numerous many extra properties however these ones are the necessary bits to allow them to be saved/restored and propagated to different related shoppers.

Every one among these occasions triggers a Perform execution with a payload of the brand new worth (a node transfer occasion sends the up to date place, a label replace sends a brand new knowledge object, and so forth).

From this level, it is as much as Appwrite Capabilities to resolve the mutation on the mindmap doc. Onward, to the Backend!



BACKEND

I needed the idea of a gaggle of mindmaps to be one thing the consumer or workforce does not even have to handle. To assist this, utilizing Appwrite Capabilities, each consumer.create or groups.create system occasion creates a brand new assortment solely that consumer/workforce has entry to. In impact, this produces a “scoped workspace” of kinds for the consumer/workforce to name their very own and is fully automated.

(As a facet notice, I additionally use a Perform to generate a gravatar URL for every consumer upon registration)

When a consumer opens a mindmap, the shopper fetches the preliminary state of the doc whereas additionally subscribing to doc modifications with the Realtime endpoint. Realtime modifications obtained by the shopper are then merged to the React Question cache to maintain them in sync (actually, React Question is not even wanted to push Realtime knowledge from the callback response to React Circulate, however it’s simply so rattling straightforward to make use of for dealing with server state that I can not not use it)… shifting on.

With shoppers listening to paperwork for modifications, what’s left is for Appwrite Capabilities to resolve updates to nodes and edges. To do that, I created two Capabilities to deal with nodes and edges, whose obligations are:

  1. Settle for the incoming payload from a HTTP occasion
  2. Pull probably the most up-to-date doc from Database
  3. Insert/merge/take away the modified attribute into/from the unique attribute
  4. Save the brand new doc attributes again to Database
  5. Exit gracefully stage proper, seize a espresso

This all looks as if an oversimplification, and whereas it is fairly easy, I did get inside my very own head for just a few days contemplating all kinds of funky options like CRDTs and customized WebSocket servers with Yjs. I would prefer to thank the invaluable assist supplied by the Appwrite Crew within the Workplace Hours channel on Discord.



Submission Class:

Web2 Wizards



Hyperlink to Code

Proudly open supply on GitHub: https://github.com/benweier/use-mind-map



Extra Sources / Data



Tech Stack

  • Appwrite (duh)
  • React
  • Digital Ocean (1x droplet + 1x static website app)

Key Dependencies:



Future Plans

Clearly this can be a fairly fast’n’soiled thoughts mapper, however I liked the expertise of mixing Appwrite with React Circulate that I plan to take this additional and develop it right into a fully-fledged app.

The mindmap expertise proper now could be primary and tough, and there is not numerous expressive options to make a mindmap your individual. Having choices like colors and shapes for the nodes a minimum of, in addition to making enhancing seamless – like opening the node edit panel above the chosen node, shortcut keys so as to add a pre-linked node, an automated format engine with elkjs – would all go a great distance.

Add a Comment

Your email address will not be published. Required fields are marked *