NoteTaken

Inspiration

Most note-taking apps on the market lock users into their platform with no way to connect to media outside of that app, or at least not in a tightly-integrated way. Further, these apps use proprietary file formats that take control away from the user and make version management difficult if not impossible.

In the spirit of awesome (but proprietary and locked-in) apps like ZoomNotes and Endless Paper, we set out to make a note-taking app with some sort of infinite zoom and plaintext (SVG) file-backing.

What it does

Due to time constraints, not much 😅. We were however able to implement drawing with a simple red-line based on mouse input and the ability to upload and insert images into the canvas. The canvas is effectively infinite with 2D movement and zoom limited only by float precision and the GPU's ability to render everything in the canvas at once (we were unable to implement a chunking system in time).

How we built it

We used Typescript with NodeJS to create a single-page localhost app displayed on an HTML canvas drawn to via WebGPU.

During development, we used VSCode, Neovim, and Vite (for hot-reloading).

Challenges we ran into

Time ⏰ This was our first time participating in a Hackathon so we were only beginning to develop the time management/prioritization skills required for a 36-hour project (we are both used to devoting more time to planning and spreading development over more time). Nevertheless, it was an awesome learning opportunity!

Accomplishments that we're proud of

We're pleased with what we were able to accomplish under the circumstances and we still think it's a fun little demo :)

What we learned

Programming for an entire day is exhausting! Graphics debugging is rarely easy! Drawing lines is more complicated than you would think :P

What's next for NoteTaken

We had several features we were planning to integrate but unfortunately didn't get to: Just for basic feature-parity with even a simple painting app:

Ability to change brush color / size
Ability to select and move strokes

More specific to note-taking:

Ability to insert typed text
Ability to insert PDFs as a series of images
Ability to insert GIFs, Audio, Video

And above all, the intended defining feature of our app:

Ability to link canvases in one of two ways:
- via normal URL links (since each canvas is backed by an SVG on the filesystem, each is a document with a universal resource identifier)
- "windows" which (analogous to iframes) let you "peek" into another document with some viewport defined by the link.