Building the ULTIMATE Excalidraw Catalogue App

austin@pip-install-python.com

F(hits) + Value(1)


Hey everyone, and welcome back to the development journey of our Excalidraw-powered Catalogue App! If you're following along, you know we're passionate about creating intuitive and powerful tools. This week, we've hit a significant milestone that I'm thrilled to share with you – the integration of being able to Save Notebooks to your user profile.

This isn't just another item ticked off the to-do list; it's a leap towards making a catalogue app full on notebooks, acquiring useful insight in and sharing knowledge.

Watch the Full Devlog on YouTube!

For a visual walkthrough, detailed explanations, and to see the new features in action, check out the latest devlog video:


Why Dynamic Freeform Notes in a Catalogue App?

Our core vision for the Excalidraw Catalogue App expansion in Geo🗺️Index is to provide a seamless way to not just store visual information (like Excalidraw sketches, diagrams, or mood boards) but to also enrich it with context, allow others to build on top of it and use the format of an excalidraw notebook as training data to improve excalidraw ai outputs. Static images are great, but what if you could attach free-flowing thoughts, to-do lists, or detailed explanations directly to your catalogue items, even better what if you could instruct an ai to do the research and let it design and built out the Excalidraw environment for you?

That's exactly what this new plugin/feature aims to achieve. It's about:

  • Enhanced Organization: Go beyond simple tags. Link detailed notes, research snippets, or brainstorming sessions directly to your visual assets.
  • Fluid Ideation: Capture thoughts as they come, without being constrained by rigid forms by incorporating the custom `dash-excalidraw` component into the design.
  • Contextual Information: Keep all relevant information in one place. No more switching between your visual catalogue and a separate notes app.

What You'll See in This Week's Devlog (and in this post!):

In the accompanying video, I dive into several key aspects of this development:

  1. Application Stack Update: A brief overview of the current technologies powering the app and any recent changes or additions.
  2. Deep Dive into the Dynamic Notes Feature: A detailed walkthrough of how the freeform note app/plugin works. We explore its UI, functionality, and how it integrates with the over arching catalogue management app I created.
  3. Excalidraw Integration Magic: Showcasing how these notes leverage the power and flexibility, save images to our sister application and provide a clean format to retrieve highly complex notebooks.
  4. Showcase the analytics Management System: Each notebook has stats, number of bookmarks, number of views, rating system. Together this will be used to showcase the best notes and as a way to integrate future features like a leader board for the best note takers.

The Tech Powering the Progress:

For those interested in the technical nitty-gritty, this project continues to be a fantastic exploration of modern web technologies. Here’s a snapshot of the key components that made this week's progress possible:

  • Frontend & Core Visualization:
    • Dash Plotly: For building the interactive web application interface.
    • Excalidraw: The star of the show! We're using it for both the cataloguing and the new dynamic notes. A huge shoutout to the new Open Source Dash Excalidraw 
  • Backend & API:
    • Python with the robust Django framework.
    • Django Filer: For handling file management and uploads seamlessly.
    • Django Ninja API: To build fast and efficient APIs connecting the frontend to our backend logic.
    • Django Counter: Used for tracking usage or specific metrics, associated with stats of notebooks.
  • Authentication & Infrastructure:
    • Clerk: Ensuring secure and easy user authentication.
    • Docker: For containerizing the application, making development and deployment smoother.
    • Docker-Swarm: For containerizing the application, making development and deployment smoother.
    • Grafana: Used to debug the containers that make up the application stack and see the terminal logs of the live application
  • AI & Future Potential:
    • Google Gemini: We're exploring and have started integrating Google Gemini for potential AI-powered features down the line, perhaps for note summarization, tagging suggestions, or even generating visual ideas. More on this in future devlogs!

Explore and Get Involved!

This stack is expanding much further than just an awesome Notebook, we have sister applications that are being built up along side. Hosting 4 actively managed fullstack applications.

Your feedback and ideas are invaluable!

  • 💬 Join our new Discord Community:  https://discord.gg/e5s5uHWUHH
  • 📺 Subscribe on YouTube: Don't miss future devlogs and tutorials!
  • 👇 Leave a comment below: What do you think of the new dynamic notes feature? What would you like to see next?

Looking Ahead:

This dynamic notes feature is a significant step, but it's just one part of the larger vision for the ULTIMATE Excalidraw Catalogue App. In the coming weeks and months, we'll be focusing on:

- Improved UI for mobile 

- Complete the rating system integration

- Improve User Settings Management

- Maybe Excalidraw embedding or Direct notebook share link? 

- More map focused development, some features built on top of the progress made within dash-excalidraw catalogue. (Notice Boards / Events)

Thanks for following along, and stay tuned for more updates!