SharedNotebook banner

SharedNotebook

20 devlogs
32h 25m 35s

Shared Notebook is a collaborative scrapbook where anyone can leave their mark(writings) or drawings. Click anywhere, and type, Use emoji stickers, drawings, GIFs, drag things around, listen to lofi music, change fonts, themes and ink colors. The…

Shared Notebook is a collaborative scrapbook where anyone can leave their mark(writings) or drawings. Click anywhere, and type, Use emoji stickers, drawings, GIFs, drag things around, listen to lofi music, change fonts, themes and ink colors. The changes appear for everyone instantly!

This project uses AI

I used ai for debugging and help me calculate the math stuff used in code ( like relative positions of the screen because i couldnt figured out how to make it work :”) )

Demo Repository

Loading README...

aneezakiran07

Shipped this project!

Hours: 10.05
Cookies: 🍪 145
Multiplier: 14.45 cookies/hr

HI!!

i integrated Multiple Notebooks in this ship!! you can now create separate notebooks for whatever you want, one for cat pics, one for music recs… there’s a lil dropdown in the toolbar to switch between them or make new ones. i didn’t add deleting other people’s notebooks tho.. that just felt evil lol

Then i added a Lock Feature!! hover over any text, sticker or gif and a lock button appears, click it and no one can edit, or delete it anymore. click again to unlock.

After that came Image Upload!! you can now drop pictures into the notebook and they land right in the center of your screen. i built a compressor using the browser canvas api so your big photos get resized and converted to tiny jpegs before uploading, the coordinate math was still a nightmare for me :”) ,

And then a Drawing Improvements!! added an eraser, an undo button, and my personal fav, a Filling Pen!! instead of a normal bucket tool i made it so the fill follows your stroke shape.

use it and leave your writings!! suggest more features if you have any!!!
Thanks alot!
the is probably the most cool project i have made!

aneezakiran07

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

0
aneezakiran07

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 :)

0
aneezakiran07

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

0
aneezakiran07

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!

0
aneezakiran07

Shipped this project!

Hours: 10.31
Cookies: 🍪 267
Multiplier: 25.9 cookies/hr

HI!!
So i build a shared notebook where anyone can write their thoughts, draw stuff, use stickers or gifs and play music. also delete or edit others writings/drawings TT. The changes instantly appears for everyone on the screen. The whole point of it was it being chaotic and fun to mess with!! I hope you guys use it for some time.
The hardest part was calculating the relative positions and making the draw feature work. Because it was hard to figure out how to store the strokes and make it work! Then drag n drop feature was also hardest for me :”)

I am happy how it turned out!!! Suggest me more features if you guys have any!!
If by any chance demo link is down ( watch the video in the latest devlog ) tho im sure it wont be down, but who knows!!!

Make sure to check every feature! and leave ur writings also, ENjoy!!!

aneezakiran07

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!!!

0
aneezakiran07

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!

0
aneezakiran07

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!!!

3

Comments

YourLocalSatyrFlip
YourLocalSatyrFlip about 1 month ago

676767!!

oggythebuilder01
oggythebuilder01 about 1 month ago

6767 76

aneezakiran07
aneezakiran07 about 1 month ago

Why y’all spamming 67 TT

aneezakiran07

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 :”)

Attachment
0
aneezakiran07

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!

0
aneezakiran07

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!!!

0
aneezakiran07

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)

0
aneezakiran07

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)

0
aneezakiran07

Shipped this project!

Hours: 12.07
Cookies: 🍪 306
Multiplier: 25.37 cookies/hr

HI!!
So i build a shared notebook where anyone can write their thoughts, use stickers or gifs. also delete or edit others writings TT. The whole point of it was it being chaotic and fun to mess with!! I hope you guys use it for some time.
The hardest part was calculating the relative positions. Figuring out how to find out what page you are on right now so your gifs/stickers will be added to that page. Then drag n drop feature was also hardest for me :”)

I am happy how it turned out!!! Suggest me more features if you guys have any!!
Also i made this project during my midterms :”) (thats why my grades sucks)

aneezakiran07

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)

0
aneezakiran07

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

0
aneezakiran07

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 :”)

0
aneezakiran07

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!

0
aneezakiran07

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!!!

0
aneezakiran07

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!!!

0
aneezakiran07

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

Attachment
0
aneezakiran07

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

Attachment
0