SharedNotebook

Drawing Canvas Improvements
hi!
in this devlog, i added an eraser, a special pen (filling pen), and an undo button to the shared notebook drawing tools.
you can now erase mistakes, or use the special pen to fill.for this purpose, i just added a local array to track my stroke ids for the undo button and encoded the new tools directly into the stroke color strings (like sending “ERASER” or appending “_FILL” to the hex) so we didnt even have to change the supabase database schema.
Also, playing around with the special pen(filling pen) is so fun, check it out, i found it way more cool than bucket feature in paint, thats why i build like this

Image Upload Feature
hi!
in this devlog, i added an image upload feature to the shared notebook. you can now select a picture and it drops exactly in the center of your screen.
.for this purpose, just added a native compressImage helper using the browser canvas api to resize big photos to 1024px and compress them into 80% jpegs before sending them. then it uploads the tiny jpeg to the supabase notebook images storage bucket and drops it in using the handlePlaceMedia function.
the tricky part was the coordinate math and upload delays, images were getting placed outside the current page view because it calculated the position after the upload finished and accidentally double counted window.scrolly in the math
.fixed it by capturing the exact startx and starty center coordinates before the upload begins so it fits where you were looking even if you scroll away.
next feature: idk honestly, im too tired cuz of this image upload feature :)

Lock Feature
hi!
in this devlog, i added a lock feature to the shared notebook. you can now hover over any text, sticker, or gif and click the lock button that appears, this locks it so no one can delete it, or edit it. when something is locked, hover again and click lock button to unlock it.
it was easy, just added a locked boolean column to both writings and media_items in supabase. on the frontend, when locked, the delete button is hidden, drag is blocked, and editing is disabled. the lock/unlock just does a simple update to flip that boolean.
the tricky part was realtime sync, the lock state wasn’t broadcasting to other users at all.. fixed it by running ALTER TABLE writings REPLICA IDENTITY FULL
next feature: image upload integration maybe

Multiple Notebooks Feature
hi!
in this devlog, i made the shared notebook supports multiple notebooks, there’s a dropdown in the toolbar where you can switch between them, create new ones of your own..e.g someone can make a notebook just for cat pics, another for music recs, whatever.
for this purpose, i added a notebooks table in supabase and put a notebook_id column through writings, media_items, and drawing_strokes.
i also set up RLS policies, anyone can read and create notebooks. I didnt made feature of deleting someone’s notebook because its just evil
Next feature can be of locking one’s text so no one can delete it or image upload integration!

HI!!
i was trying to make my website responsive :”) and i broke the editing feature in it, then i spend some time debugging it and used the prev working one then!!
i have tried many times to make it responsive but it just dont Work, so im leaving it as it is
ALso i check other features and make sure everything is working correctly!
Also updated the readme
Note: please use it on laptops or tablets TT
i have attached the video explaining all the features!!!

hi, so in this devlog, i implemented the lofi music in my notebook, this music will be synced for everyone! You can choose to pause or play it!
When user first enter the notebook, it will not play , it will only play if user decided to play it in the lofi tab!
i did it by using direct MP3 streaming via the HTML element pulling from nightride.fm.,
i only implemented 4 of the playlists in it!

Hi!!!
so in this devlog, i implemented the Reactions feature that makes reaction emojies floats for some seconds then disappear just like how it is in Google Meet
for this purpose, i used useReactions hook which uses Supabase Broadcast. It was easy to implement!!
next feature would be Lofi music integration maybe! or I might just improve the existing code a bit and reship it and then move on!!!

HI!!
so in this devlog, i built a feature that shows who is currently typing right now . i built it using the Supabase realtime presence thing, and the channel lifecycle bug was the toughest part thats why it took me 50 mins TT

every user joins a shared presence channel and calls channel.track() to broadcast their current state (name + whether they’re typing). When anyones state changes, the sync event fires for all other users and they update their UI accordingly. thats how i made it work in the end :”)

HI!
so in this devlog i made a name feature, when you open the notebook for the first time, a little modal pops up asking for your name. then whenever you write a textbox, your name shows up underneath it on hover so everyone knows who wrote what :)
i did this by saving the name to localStorage so you only get asked once, and passing it as an author_name column on every insert to supabase. then in the WritingNode component i just render a small label that fades in on hover. honestly nothing crazy going on under the hood :”)
it was easy work using supabase, i just had to add one column and one label, the modal was like 20 lines.
Also, u see a toast message , [this person] has joined or left the notebook!

HI!!!
So in this devlog i implemented the realtime feature, before this users had to reload the notebook to see other people updates.
but now it works by subscribing to postgres_changes on each table.
and also before i tried implementing this feature but it didn’t work because i had realtime enabled in the supabase dashboard but never actually wrote the .on(“postgres_changes”, …) subscription in the code for writings and media_items.
yes i almost gave up for this but then i said why not try it out one more time :”) Before it didnt work cuz i was not integrating it in my code well, i also overlook this feature back then, but its so cool to have it

Also, it took me almost 30 min to implement this, but since flavortown was down, so i worked on other feature
which is user will enter his name in the start, and my db will save this name and show it alongside with his writings!!!

ERASE DRAWING IMPLEMENTATION
Hi!!
So in this devlog, i worked on drawing feature :”)
ANd IT WAS SO HARD TO MAKE!!!
first i tried making a eraser how we have this in the Paint, but then i read that for this my pic need to be saved as a flat image in supabase so it can erase it accordingly. but i was saving the strokes individually so that wasn’t going to work, then i switched to the cross symbols on the strokes, just like my textboxes,so when user clicks on these cross symbols, the stroke gets deleted. its not as easy as it seems :) dealing w strokes is very tough because the strokes are just arrays of points on a canvas, there’s no DOM element to attach a button to. so i had to do hit-testing on every mousemove i check if the cursor is close enough to any line segment in any stroke, and if yes, show a ✕ button floating at the midpoint. BUT THEN the invisible div i put over the page to detect the hover was blocking all the drag and drop for text nodes and stickers :”)) so i had to scrap that and instead attach the mousemove listener directly to the page element so it wouldn’t block anything underneath.
and i dont know why everything i do breaks the drag n drop functionality, ugh i hate it!!! so got it working also by debugging it
(apparently its cuz of drag events bubble up through the DOM, so any event listener(mousedown/mousemove) before the drag handler gets it will silently KILL the event)

ADDED DRAWING FEATURE
HIII!!!
SO in this devlog, i added a pen drawing feature to the shared notebook :”). SO, you can now switch between Text and Draw mode using a toggle in the toolbar. when you’re in draw mode, you can pick your pen color from 12 presets and choose from 3 pen sizes (small, medium, chunky). then just draw !
for this,i also made a new table in supabase named as strokes!
the TOUGH part was getting the drawing coordinates right across multi-page layouts since the canvas had to match the full scrollHeight of the page, not just the viewport.
(ngl this coordinate calculation always frustrates me TT)

HI!!!
IN this devlog, i again checked all the functionalities and found out that toolbar is just static at the header so i make it sticked to the top regardless of the page position!!!
I just had to add one thing in its css
position: sticky
so, it was easy work, but i found out how dumb i am, i was only testing my website using the first page only TT and didnt thought about adding gifs or stickers in later pages

Note: i added video of the project explaining all the functionalities!!! watch it to find out all the functionalities TT ( but they are so obvious to the users, i dont think so u guys need to hear me yap)

HI!!!
so in this devlog, i debugged the drag n drop feature. I found out that drag and drop isnt working deep down in the page because i was calculating the Y position of updated position wrongly :”)
Spent Hour figuring out whats causing the issue :”) , apart from this, i cleaned my code and tested all the functionalities.
Also, I will decide on new features based on reviews or voting. so suggest me more features please TT

DEBUGGED EDITING FEATURE
HIII!!!
SO in this devlog, I debugged the editing feature :”) SO, clicking a node to edit it would also trigger the global page click handler at the same time, so i stopped that with e.stopPropagation(). ALSO, contentEditable was also not working where the cursor kept jumping to position 0 instead of the end,then i set a Range to fix that. also if someone clicked away without typing anything it would save an empty string, so i just delete the row instead if its blank. none of it was super hard but debugging all of it at once was a little( NOT LITTLE) pain :”)) I ALMOST GAVE UP AND WAS THINKING OF JUST REMOVING THE EDITING FEATURE :”)

GIFS and STICKER INTEGRATION
HIII!!!
SO in this devlog, i integrated the gifs and emojies. For it i also made a table in SUPABASE for stickers and gifs so they updated in real time.
I add a list of emojies in the code(hardcoded) and you can also search it accordingly. I dont use any apis for the emojies and implemented it all in code.
Also, i used api of giphy for gifs, user can now add gifs into the Page. and can also search them. I also added options for gifs user can use to search! like sakura, kawaii and cats(cuz i love cats)
Adding api made life alot easier TT and also giphy apis are free to use, you can also use that to integrate gifs in your project!!!
Also, user can also resize the gifs or stickers!

MORE THEMES + EMOJI PLACEMENT DEVLOG
HII!!!
In this update i did a bunch of theme improvements.
second thing. before there were like 2-4 emojis per theme placed at 6 hardcoded positions (corners and sides). now every theme has 10-12 emojis and they get randomly scattered across 10 positions. I also changed the website background to use the same background/overlay register page was using.
I will keep adding more themes later!!! Sakura is still my fav one tho!!!
Next Update: Writing freely with given pen OR integration of gifs or emojies!!!

THEME INTEGRATION DEVLOG
HII!!!
in this devlog i added japanese-themed page background named SAKURA AND made the add page button.
the theme were the MOST fun part. theme has three layers,
a body background (the color behind the page),
a page style (the actual notebook paper look),
little emoji in the corners.
the theme also sync in realtime across all users through the page_settings table in supabase. so if someone changes the theme everyone sees it instantly.
I will update more themes later on!!!
also spent way too long on fixing the text going outside the page from the right side. TT
Also, added the change font button!!!

HII!!!
in this devlog, i made editing existing text work. It wasn’t working and it took forever to figure out why. turns out there were actually two separate problems happening at the same time which made it extra confusing to debug.
first problem was the RLS policies. the writings table only had SELECT and INSERT policies, which meant update and delete calls were being blocked by Supabase. fixed it by adding two policies in the Supabase dashboard: anyone can update and anyone can delete, both with using (true).
second problem was way more _____. the click handler wasn’t reaching the writing nodes at all. tried React’s onClick, tried onMouseDown, tried native event listeners, nothing worked. eventually added console logs and figured out that e.target.closest(“.writing-node”) was returning null because clicks were landing on the inner text div, not the wrapper. fixed it by switching to e.target.closest(“[data-id]”) which catches clicks anywhere inside the node, and moved everything into a single global document.addEventListener to avoid React’s errors TT

HI!!!
so i built a shared notebook app where multiple people can write on the same page at the same time. it has a notebook with lines and a red margin and a pen. you click anywhere on the canvas and write there.
the first version used a basic input that saved on Enter. I know its annoying because you write alot of thing and forgot to hit enter and all your text is gone
so in next update i will make it so that without hitting enter, it will save your work, and also let user to edit and delete current writings.
Also there’s a color picker and font selector in the toolbar. pretty happy with how it turned out