Jake Lazaroff shares his experience of creating Waypoint, a local-first web application designed for trip planning, after finding existing tools inadequate for his needs during a six-month travel sabbatical. The planning process was challenging, leading him to develop a solution that allows for quick data entry, easy comparisons, and the integration of unstructured data alongside structured data. Waypoint features a dual-panel interface with a text editor on one side and a map on the other, enabling users to jot down notes about potential destinations and visualize routes simultaneously. This design addresses the shortcomings of other tools, such as Apple Notes and Google Maps, which either lack flexibility in data entry or complicate the visualization of locations. The app allows users to create route lists easily, with the ability to toggle between driving directions and straight-line routes, enhancing the planning experience. The underlying technology of Waypoint is built using SvelteKit, with custom components from the Shoelace library and a rich text editor powered by ProseMirror. The app utilizes Stadia Maps for location services and employs Yjs, a CRDT library, for local data storage. This local-first approach means that data is stored on the client rather than a centralized server, allowing for instantaneous editing and offline functionality. The app also supports real-time collaboration through Y-Sweet, a WebSocket sync backend that facilitates document sharing and synchronization between users. Lazaroff discusses the principles of local-first software, emphasizing that the client should maintain the canonical copy of the data. He evaluates Waypoint against several criteria proposed by Ink & Switch, concluding that it meets most of the ideals of local-first software, with a few exceptions regarding security and privacy. Through this project, Lazaroff learned that building a local-first app is feasible with existing tools, and the integration of various libraries can create a seamless user experience. He highlights the ease of adding offline support and the overall developer experience as significant advantages of this architecture. The article concludes with an invitation to explore the code behind Waypoint on GitHub, encouraging others to engage with the local-first ecosystem.
Wednesday, October 2, 2024Jake Lazaroff shares his experience of creating Waypoint, a local-first web application designed for trip planning, after feeling dissatisfied with existing tools during his travel sabbatical. The planning process for six months of travel proved to be overwhelming, prompting him to develop a solution that better suited his needs. Waypoint is inspired by the trip planning app Embark, created by Ink & Switch, which offers dynamic documents for organizing travel plans. However, since Embark was not publicly available, Lazaroff decided to build his own tool. He emphasizes that Waypoint is not production-ready and was created specifically for his personal use, highlighting its rough edges and lack of features like authentication. The motivation behind Waypoint stemmed from the shortcomings of other tools he tried. Apple Notes felt too basic, while Notion and Google Maps were cumbersome. Wanderlog was overly structured, making it difficult to explore and research. Lazaroff identified three key areas where Waypoint improves upon existing tools: quick data entry, easy comparisons, and the importance of unstructured data alongside structured data. The app features a dual-panel interface with a text editor on one side and a map on the other, allowing users to jot down notes and visualize locations simultaneously. Waypoint's design facilitates quick data entry, enabling users to type location names with an autocomplete feature. Unlike traditional mapping tools, which can be slow and cumbersome for organizing locations, Waypoint allows users to create route lists easily, with the map updating in real-time as they edit. The app also includes a focus mode that highlights the current paragraph, helping users concentrate on specific tasks while maintaining a clear view of their trip. Under the hood, Waypoint is built using SvelteKit, with custom components from the Shoelace library and a rich text editor powered by ProseMirror. The mapping and location search functionalities utilize Stadia Maps and MapLibre GL JS. A key feature of Waypoint is its use of Yjs, a CRDT (Conflict-free Replicated Data Type) library that allows for local data storage and real-time collaboration without relying on a centralized server. This local-first approach ensures that users can work offline and retain ownership of their data. Waypoint also incorporates Y-Sweet, a WebSocket sync backend that facilitates real-time collaboration. This setup allows multiple users to work on the same document simultaneously, with changes syncing seamlessly. Each document is identified by a UUID, enabling easy sharing and access across different devices. Lazaroff addresses the question of what constitutes a local-first application, asserting that if the client holds the canonical copy of the data, it qualifies as local-first. He evaluates Waypoint against several criteria proposed by Ink & Switch, concluding that it meets most of them, with a few exceptions regarding security and privacy. Reflecting on his experience, Lazaroff finds that building a local-first app is feasible with existing tools, and the integration of various libraries made the process smoother than expected. He notes that while text editors are particularly well-suited for local-first applications, challenges remain in integrating frameworks like Svelte with CRDTs. Despite some complexities, he appreciates the simplicity and reliability of the local-first architecture, which allows for offline functionality and straightforward data management. In conclusion, Lazaroff expresses his enjoyment in developing Waypoint and invites others to explore the code on GitHub, sharing his journey into the local-first ecosystem and the lessons learned along the way.