Markly

• 

  Demo 1

• 

  Demo 2

• 

  Demo 3

• 

  Demo 4

• 

  Demo 5

• 

  Demo 6

• 

  Demo 7

Inspiration

This web app might be confusing for most people, allow me to explain my idea, Image is hard to collaborate on, yes you can paint over it or edit the image using adobe/canva or others. But there are limited number of tools that allows me to interact with the image it self, On other side of the spectrum there is google map which allows you to put marker on a given point to label or point a specific location, I want to allow users to put marker on static image too, which let users build an interactive image.

What it does

Markly is a powerful tool that enables users to upload images and add interactive elements to them. Users can place markers or buttons on the images, which can trigger customizable pop-ups or redirect to external links. This functionality allows users to add additional context, information, or actions to their images, making them more interactive and dynamic. User can then share it by clicking on the preview button and copy the share or embed link

How I built it

I built Markly using various technologies, with a focus on the Ably Realtime platform. Ably provides the necessary infrastructure to enable real-time communication between the users. I utilized Vue.js, a popular JavaScript framework, for the frontend development. Vue.js allowed us to create a user-friendly interface that seamlessly integrates with the Ably Realtime platform. Additionally, I leveraged Supabase, a powerful open-source backend as a service (BaaS), to handle data storage and retrieval. I used Ably spaces to create collaborative environments, utilizing Avatar stack, Live cursors and also used Pub/Sub Channels to sync data across clients.

Challenges I ran into

During the development of Markly, I encountered several challenges. One of the main challenges was integrating the Ably Realtime platform into our application effectively. The live cursor element is a bit tricky because the cursor on different screen size behaves differently, on my specific case since my canvas can be shorter/panned/zoomed it was a lot difficult, In the end I figured I could take the relative position of the cursor in percent relative to my canvas frame since my canvas frame is based on the image uploaded the scale is similar and the live cursor will feel smooth and more accurate. Optimizing the message to use less quotas, by decreasing the amount of messages I sent to other clients by only sending the changes and only when there are more than one user it allows me to decrease my quota usage and allowed me to optimize my application overhead. I couldn't get the lock to work, and it something I wished to get it right.

Accomplishments that I'am proud of

I am proud of successfully created Markly by integrating the Ably Realtime platform into and achieving seamless real-time communication between clients. This accomplishment allows users to experience instant updates and interactions with their images. Additionally, I am proud of creating a user-friendly interface that simplifies the process of adding interactive elements to images, making it accessible to users of all skill levels.

What I learned

During the development of Markly, I gained valuable insights into working with the Ably Realtime platform. I learned how to leverage its features effectively to enable real-time communication and synchronization of data. Additionally, I enhanced our skills in Vue.js development, gaining a deeper understanding of building interactive and responsive user interfaces.

What's next for Markly

For Markly's future, I have exciting plans to further enhance its functionality and expand its capabilities. Some of the areas I aim to focus on include improving the customization options for interactive elements, introducing collaboration features to enable multiple users to work on the same image simultaneously, and integrating with other popular platforms and services to provide a seamless experience for my users. My goal is to continue transforming the way users interact with images and provide them with a powerful and intuitive tool for enhancing their visual content. Also I want to get the Ably spaces lock working.

Github Demo

Built With

• ably-pub/sub
• ably-spaces
• supabase
• vuejs