Atlas

Inspiration

I wanted to create a user-friendly platform that makes map collaboration fun and seamless, breaking down barriers of distance and time. I also had never built a real-time collaborative app so this was a fun challenge and learning opportunity.

What it does

Atlas allows multiple users to interactively add markers, draw routes, and input text on a map in real-time, facilitating collaborative planning and mapping activities. Users can explore map together, make it more interactive, dynamic and informative.

How we built it

Atlas was developed using React(Vite) for a responsive user interface, integrated with the Google Maps API for map, and uses Ably for robust real-time infrastructure. It used Ably Spaces SDK for cursor synchronization and Ably real-time pub/sub channels for synchronizing map elements.

Challenges we ran into

Crafting custom overlays within the Google Maps API proved to be a complex task, as I navigated through its extensive features to create a seamless user experience. Additionally, ensuring intuitive user interactions and real-time updates across all features presented significant technical hurdles.

Accomplishments that we're proud of

Successfully creating a real-time, collaborative mapping tool that is intuitive and user-friendly, especially considering the technical complexities involved. This is also my first time building a real-time collaborative app and that was really fun.

What we learned

I deepened my understanding of real-time data synchronization, honed my skills in React and Vite, and learned how to effectively integrate and utilize external APIs like Google Maps and Ably. Working with Ably was an amazing experience! It’s astonishing how it seamlessly integrates, making it easy to add real-time collaborative features to any app. This project has been a great learning opportunity, and I’m eager to explore more of these functionalities in my future projects.

What's next for Atlas

Atlas is currently in the alpha version, I am working hard to create a persistent version of Atlas where activities are saved to a database, alongside many other improvements to enhance user experience and functionality. Component Locking with Ably(so that only a user can edit an element at a time), more personalization, and bug fixes are the things I am working on right now. If you are excited about the idea, hit me up I would love to hear from you. Roadmap:

• Fix bugs(images, text) and improve user experience.
• Authentication and persistent maps
• Component Locking(allowing only user to edit a element at a time to avoid conflict)
• More customization

Built With

• ably
• ably-react
• ably-spaces
• google-maps
• react
• tailwindcss