mandala

Personalize notes for you and your team members (for Compass by Atlassian).

Comment 1

Inspiration🔥

  • While exploring compass, we found that we can keep notes for each component using Jira and checkOps for teams. It must be accessible globally on the page and should be personal. Hence, a personal note-maker for you and your team😊which is super easy to use to meet your daily needs.
  • mandala word originates from the ancient Sanskrit language of Hinduism and Buddhism, mandala means circle. Traditionally, a mandala is a geometric design or pattern that represents the cosmos or deities in various heavenly worlds.
  • For design, we strictly followed the Atlassian design system. We followed the Atlassian color palate and provided dimensions strictly for every element. We used mandala art as the background as we wanted to make it elegant and a joy to use. We took the forge UI kit and atlas kit for inspiration

What it does🤔

Personal note-making application for the team members.

It includes features such as adding or deleting notes with a single click, a drag and drop feature so any note which has a higher priority can be rearranged at any time, buttons to distinguish between important notes and regular notes, and an auto-save feature to store locally so you don't have to worry about data leaks and privacy invasion.

How we built it💖

  1. We used react as the core and generated a compass-global-page using forge.
  2. Designed the UI in Figma and used Inkscape to make graphics and images. We used the beautiful-dnd react library to implement the drag & drop feature.
  3. We used the browser's local storage to store data and SASS for styling UI. We used an atlas kit to follow the Atlassian design system. As it is a custom UI, we followed the Atlassian design system.

-> We developed the saving system such that even when the input field loses focus, the function gets triggered and it auto-captures and sets the data for the user.

Challenges we ran into🧠

  1. We didn't want to use an external library but we wanted to make it ourselves which was pretty much the aim though out while making this app. But when we were implementing the drag & drop feature the function we wrote broke the app, so we decided against our will to use the external react library beautiful-dnd to implement drag & drop. This library not only fixed our problem but made the code and output look good.
  2. We wanted users not to worry about their data so we wanted to make autosaving system. As planned we wanted to use the data to get saved as you write but due to this caret i.e cursor jumped at the front of the input box. So we decided not to trigger the save function until and unless the user loses focus from the input box. The idea was better as it was optimal and the function was only called once to save data when the user loses focus. We also ensured user by data saving indicator at the bottom right corner of each slab.

Accomplishments that we're proud of🥹

  • Successfully implemented the Drag & Drop feature and the auto-save feature.
  • Developed a super user-friendly app.

What we learned🏫

  1. We discovered a lot about the Atlassian style system.
  2. We became familiar with the compass and forge development environment.
  3. We became familiar with Atlassian app architecture.
  4. We learned about the Atlas kit and Forge UI kit.

What's next for mandala🔮

  • We are looking to add a priority sorting feature soon.
  • We are also looking forward to adding more functionalities which include but are not limited to markdown support along with provisions to set remainder when required.
  • The upcoming release will also include slab resizing and customization and recycle bin functionality for deleted notes.
  • Support for Compass and other application integrations.
  • Audio notes with auto transcription functionality.
Share this project:

Updates