So i just worked a bit more. Th app is now bug free and it looks cool. I did not expect the app to be so easy. I added a button to manually download the file and also choose where to save it

I tried my best to add a themes to he site but it failed like crazy. First, i regret using hardcoded colors for the elements. That way, i cant change them when i tried to, they looked ugly, disgusting so i had to take it out here is how it looked. So i removed it

So just added some tweaks like adding a small plus button to create shortcuts on the homepage and some other stuff.

New Feature: Viewport modes!

What I did meanwhile…

Soo I was trying to figure out how to add various canvas modes so that the user can draw on a single page or an infinite canvas. This was very hard. I tried various methods of doing that, for example, i tried clamping the camera and all that, but none of them worked. So i had to come up with my own intuitive method. What i did was, i added another type to the canvas types file and declared the 2 modes. Then I added some conditional checks if the mode is infinite and blah bah blah and finally it somehow worked. So here’s a preview

So i just improvised the logic and added some small tweaks here and there to give a nice look to the sketch. It was surprisingly easy I just had to add some constants with grey and some stuff to get it. Here’s the final output

Created some basic code with research and tested it out. It seems wayy simpler than i though it would be because i found some code already which i could use with minimal changes

I just added some basic imports and found out that i could use a new package called customtkinter for the modern ui. I added it and designed some elements

So i just fixed some issues like the player entering invalid keys and restarting and some tweaks, and also created the .exe file for the console

Finished the code! It now works

Added the board in the terminal. Not too cool experimented the logic a bit.

So a long time since i coded in python my skills are a bit rusty, just set up the main file… Wrote some board logic, very minimal.

Okay so i completely wrapped up the ui of this trash component. And guess what I also added a restore button to restore documents. And for extra safety i wrapped up the permanently delete document in a alert dialog from shadcn ui. I created my own component for the confirmation so that i could reuse it in other events too

So i spent a whole lot of time trying to write functions for deleting the document and restoring it. Took some trial and error. I need to work a bit more on that. Dont really have some pics for it so i have no choice but to show the code sry.

So just fixed the bug of redirecting when trying to expand and also created a small logic to do when note is expanded. And i added the feature of creating multiple nested notes so you can create a note inside a note and so on (pls just dont spam those) and also created a hook for deleting a note. So here it is

So just worked a bit more and added some functions i could use for the future features. Now it actually displays the document like an actual item rather than a text. It looks fine, not bad, next have to fix the issue of redirecting to the page when clicking the expand button

Did a little styling and created a item component and made it reusable so that i could use the same thing for all. Added a dummy search and settings buttons in the user settings sidebar, and also made the new page functional.

I created a small function using convex as my database so that i can create a document every time i click on the create note button on my page. Also added a toast message using sonner.

Created a user settings item in the sidebar with a dropdown menu from shadcn.

So this was a bit simple. I added a small function of closing and opening the sidebar. It was easy, i just had to change some css properties.

Updates:

In this update, I added the function of resizing the sidebar. I also made it mobile responsive.

Changelog

• sidebar resizing

Created the documents/ dashboard page and added a basic navbar with a small effect for resizing on hover.

Added a sign in/ sign-up feature, and again, i did this with Clerk, and it would have finished wayy faster, but it always showed me a warning of development mode which I hated. I tried all kinds of things but even the official method of doing that did not wwork out. It looked soo ugly seeing the banner. So i pent another hour figuring out the dumb logic

This was a lot of work. I made the navbar and tried to implement a dark-mode light-mode feature. I thought it was goin to be very hard but to my surprise there was already a component for that in shadcn. So I went forward and implemented that but there was one huge problem. The default component used the default tailwind classes, which was some sort of white for light and black for dark. Whereas in my case i was using a type of light red on my background and other elements. So i had to sit and look for good combos for light and dark mode colors and heres the final view! It looks awesome

Set up the next.js application and also got some images, logos and added it to the app. Created the home page section. Not really tough.

Bugfix:

• Just found a small bug in the board. The editor was able to edit other people’s text and notes. So i had to add more guards to the respective components and got it.

Updates:

So i decided to spice things up a bit and do some cool stuff so i added organization roles. Let me give a brief description of each role.

Roles:

• Admin: Special privileges. They can do everything. Create boards, draw on canvas, delete and edit other users drawings etc.
• Editor: Slightly lesser privileges. Cannot create boards, but can draw on canvas. Cannot edit or delete other users drawings
• Viewer: Seriously cannot do anything other than see the drawings and elements of other people.

How i did this:

Since i was using clerk for the authentication, it allowed to add user roles. I had to map the user roles to live blocks and disable abilities one by one for all the roles.

Commit

• basic user roles and functionality

Main changes:

• I programmed 2 main things. First, i changed the pan to a middle mouse + drag and second, i added a zoom wit the scroll wheel.

Changelog

• updates camera, zoom and panning

Some good work:

• So i added some basic utilities like shift + click to add to selection and ctrl + d for duplicate.
• I also changed some visuals on the home page.

Changelog

• some basic visuals
• some tools like duplicate, shift + click for multi select

Changes

• I just found a bug in the system where when i was trying to draw a line over another line, it selected the line instead of drawing over it.
• So i went over and added another guard to the line and pencil components and fixed it.

Commit

• fixed bug of selecting when trying to draw

What i did meanwhile…..

• So i got a suggestion to make a separate tool for inserting math becuse some of the text was automatically replaced into math symbols.
• Soo…. i went on and created a new tool for that.

Changelog

• Added a separate tool to render math

Changes:

• So in this version i added the ability to type in math formulas for problems.
• It could be used by teachers or anybody who needs to add math text/ formulas.

Commit

• Added math rendering support with KaTeX and Mathlive integration

This was a lot of work:

• I updated the main text component because there were many users complaining about it. Heres what i changed:
• Made the textbox increase width while typing, and wrap to the next line after a fixed width. This is cool because earlier, you had to resize it urselves.

Made some changes on the homepage and added a typewriter effect using a library. It was easy

Worked on the website part of the project, created a simple website, just to download the extension. It matches the theme of the extension. Will be posting this on scrapbook too

Worked on some UX changes, first I changed the color preview to only appear on the palette section, because it was interfering with the selected color text. And i also changed some logic to show color in the selected color text when it was hovered on, and also generate matches.

Just did a lot of work. Firs i decided to make the lazy preview for people who wanted to see the preview without logging in, (i made the feature based on user requests), and i fixed some issues with the line tool and the pencil tool. Plus i kept on coming across an issue while drawing, it used to try to select and drag the user avatar, stopping the drawing. So i went over and fixed it. And i also added a dotted pattern to the board. Looks sleek.

I just finished creating the line tool. This was hard. First i tried a prototype to render the line as a component but then it did not allow me to draw straight lines, only slant lines. So i changed the thing to add a change to the pencil component itself to allow drawing a straight line. And it works! I also added a clean canvas option!

Created a stroke weight option to reduce the stroke size or decrease it in the selection tools. ow the shapes can be thick or thin.

Created a fill toggle. Now you can created outlined shapes too! This was an easy task.

This was awesome. I created a whole new tool for a triangle. It works well. And it loooks cool!!!

Updated some minor changes and added readme.

Okay. This was real saddening and crazy. So this morning, when i was trying to deploy the website, i had to shift all external components into production and in the process, i accidentally deleted the clear authentication project, and on top of that the action was irreversible and crazy. So I spent some time and remade the clerk app and finally now, it has been deployed!!!

Okay… This was hard work I completely programmed the drawing functionality and meanwhile i also fixed many bugs which did not work as expected. Now they all are fine and you can draw things too! And yeah the thickness is pressure sensitive

Created the unauthenticated page, for people who are not logged in. I added some animations and also displayed the features.

Created the sticky Note object. It all looks good! Almost done with all the stuff. Only things left to do are the pencil and a page for non-logged in users

Created the text component. Had to cycle through a good set of fonts and pick the best one. Also finished the part of able to be changing the font size and color.

Created the ellipse object. I only had to add another case for the element, and some extra params.

I loved this! Now we can select multiple items somewhat like a selection net or you can say a rectangular selection tool. This was not that hard i did not have to write any new code for the selection part, only modified the way it works. But i also added tweaks in the existing code. I got many errors in this part.

Created the bring to front and send to back actions. They work well now.

This was some good progress. Now you can change the colors of your rectangle and even delete it! Its coming together just a few more things to wrap things up.

Created a small popup/toolbar appear whenever an object is selected. This will be used for changing the color or deleting the object.

Okay, this was some progress. Now the user can move the rectangles around the canvas and also I fixed a small but, which now enables you to deselect the object too!

So in this devlog, i changed quite a few things. First of all, there was a huge issue. I was allowed to look at the board even thought i was not authorized. That was a horrifying issue. So i had to research and do many different changes in my code to get it right. And second, I allowed the user to change the size of the rectangle to make it resizable.

Coded a little bit of extras like having a selection layer, and a different color

Sooo, this was a huge progress. Now, you can actually draw stuff on the canvas. Only a rectangle for now, but this was difficult. The main part where I struggled was the part where I had to get the co-ordinates of the mouse-pointer and stuff. Here’s a demo.

This was extremely difficult. I had to somehow map an svg element to my mouse-pointer. I used a tutorial for this and i got it right! This looks awesome! I just took an icon and made it change the position to the mouse-pointer’s position, but it took a lot of lines

Coded a lot of stuff useful for the drawing features in the files, and also added the feature of selecting items in the toolbar.

Coded the backed work for the toolbar actions and for the front end, added the icons with labels.

Added a small tweak of getting some border colors for each participant in the room, and created a toolbutton component from scratch and imported it.

Created the participants component. I displays the user’s avatar

Fully created and finished the room info component. It looks goood.

Created a part of the board info. This was fun and easy.

Worked on the room authentication part of this project. This was a stressful task and i had to use live blocks and clerk both together to get this right. I struggled in a few parts of the unauthorized sections. Here’s a clip.

Built the loading screen for the canvases.

I just finished setting up liveblocks, but I encountered a problem because the docs on liveblocks were not updated. So i had to research and get the right thing to work, now it works the same as before but i have added liveblocks in the backend so yeah…. Here’s a pic of the liveblocks board. Everytime a board is created, a new item is added to the list in this page.

This was some solid work, after a few days of break, i finally came back to work on this now, and i have started designing the canvas layout so when you click on a board, it leads to this board mage with the layout.

Fixed some css issues on the main website. The heights of the boxes on the features page were fixed

Made the instructions and coded the ending part. had some errors with the crx

Soooo This was a huge devlog but not much. I had to do this because The weather was not working at all 0%. I tried all ways like using an api, geolocation, and others, but they never worked. So now i came up with this plan and now it supports typing in cities yourselves. It looks cool now!

Changed the css of this and added some shadows and borders. Made the colors lighter. It has a more modern look now!

Oof this was some cool work. I shifted the math algorithm from using HSL values to use RGB values for the matching colors. Now it generates better matches for the color. Its awesome. Some final touches and I will be able to ship this extension!

Yeah, just prototyped a way of generating matching colors. Doesn’t work well. Like it shows up random colors and since I am using a mathematical algorithm for this, it generates negative values so it doesn’t work 100% of the times tried…

Added many tiny features such as live preview. Once a color is hovered on, the background changes to that color. And live stats: shows how may colors are there in the current palette. And a delete palette button, and a cool animation for the copy feature!

Added a cool feature suggested by one of you guys! Feature enabling you to create your many no. of palettes. Still work in progress, but seems nice for now.

Made some visual changes and fixed some errors in the javascript code. Not a big task, and also added an icon to the extension. This extension is almost done. I would love to hear a few ideas that i could add to this extension. Please comment if you have any ideas.

Changed the colors of the popup to match the colors of my banner. I prefer this over the dark colors.

This was a crazy tiring task. I got fed up of bugs, that I rewrote the whole code, and revamped the whole css. Now it looks more sleek and modern. This was a hard task and also implemented the delete color feature.

Just styled the box and added the functionality of the color showing up on the palette after picking it. Also added a small tooltip on hover. Really looks cool now. Next task is to be able to delete a color from the palette.

Oof this was hard. I had to code the eyedropper part of this so that the user can pick a color. And, the popup looked disgusting, so I had to do some basic styling. here’s a small preview

Created the basic manifest and html of the popup. This was easy. But now I am pretty scared that this project will take a little too less of time. So yeah, heres a small screenshot. Doesn’t look too good. did not even touch the css.

Created the search query functionality. This was fun and the last part for the website features. Now ready to start with the actual whiteboard code.

Fixed a small issue of the favorite relation with the board not getting disconnected when the board is deleted.

Created the favoriting functionality. This was a little hard because i had to create another backend table solely for this. I had to redo the same things i had done before now, because that was how it was needed. It was a little tough but at the end, it works! Here’s a short clip

Okay, so this was a long devlog. I made quite a lot of changes. Here they are:

1. Got back the images for the boards because it looked ugly with the clipboard icon.
   (Difficulty: moderate)
2. Programmed the rename board dialog and its functionality. This was a very difficult part because i
   had to go back to the backend and do a lot of stuff in there.
   (Difficulty: HARD)

Created the delete function. This was easy. Also made the copy link function actually work!

Added this cool actions dropdown in the board card. It looks awesome!!

Added this cool loading screen for slower connections. With the skeleton component.

Created this new board button where you can finally create a new board. Like here. Also added a toast notification whenever a board is created.

There was this minute issue of the layout of the board details part, it looked bad, so I was determined to fix it. The borders were not properly aligned with the card. So i rewrote the card and got it right! And also, I added the favorites button

Created this label and gave a cool effect on hover. It shows the name, author and the time created.

Worked a lot on trying to get the overlay correct on the car. So once you hover, there is a cool dark effect.

Changed the look of the board card. Not too stylish, and i tried experimenting with new components but this was the best fit for this card. I am still thinking on how to make the cards look better.

Added the actual representation of the board. Looks fine until now. But planning to remove the images. They don’t look very good for now.

Ohhh this was a very huge progress. I added a toast notification when a board is created, and now, even the data is displayed as a string on the homepage! I’m really excited thats its working

Added the functionality of creating a board. Also the data gets stored in a table. A pretty good task and a huge step towards actually creating the whiteboard

Just coded the API mutation with convex again for the boards, so that every time the user creates a board, it will run the mutation

Created the schema for the boards data using convex. And also updated some images.

Added the empty states for no favorites and no search results. looks cool till now…

Coded the backend for ‘search’ and ‘favorites’ queries.

okay, this was scary. I somehow managed to mess up the task of filtering and the page was compiling and refreshing every 96 milliseconds 😱, and because of this, not even 1 action wan now working. I got scared and tried to find the problem. I searched frantically in all my changed files since the last commit and kept on deleting stuff. I still couldn’t find the problem. Hopeless, I went and reverted all changes since the day before yesterday’s commit. And it worked! It did not compile so fast anymore. So i went on and restored rest of the files, and while I was doing that, I found the CULPRIT. The function i had been using was making the file run almost every 1 second. I went up and searched for an alternative. And finally, this works perfectly until now!!

Yes, this was fun. It was easy to make this new dashboards section. Looks sleek now. And also created a small startup for first time users.

Added this Invite members button to add members to your organization. I kept struggling to get the container to correctly fit the dialog box. And somehow, the sub sections in the dialog di not work, and nothing was clickable. So I had to look up for new solutions, I tried debugging using the console and failed. I had to look up into the docs of the component. Finally the error was the key. I researched on the error and found out that it was the key to the problem. And… I fixed it. 😁

Fully coded and finished up the search-bar to add the search to the url query. It was a difficult task to do, and I spent some time actually reading and cleaning up the code which I had written to get rid of unused stuff. Also added a small tweak to the mobile view of this website. Looks good to me now.

Added the search input component and styled the whole page to make it a little more polished and now it looks cool. Still have to code the search-bar.

Created a small filter for showing boards. I really liked this feature. This looks sleek and simple.

I made the final adjustments to the main sidebar to improve its layout and usability.
After that, I started developing the organizations sidebar by coding its features and styling it so it fits well with the rest of the interface. Looks good to me now!!! Its coming together!!

Built tooltips for each button ‘on-hover’ using the tooltip component from shadCN ui. This was a very interesting process and I liked it!

I moved the organization into a completely new component to make it easier to change. I also change the text to show the icons. I tools much better now. You can also switch between organizations.

Added a list on the sidebar to show all created organizations. A simple task for now…

Added a ‘plus’ button on the sidebar to create an organisation. Used icons from lucid.

Built the basic UI of the page, look UGLY right now, but will work on the css later. 😁

Reorganized the folder structure, and made a dashboard page with a sidebar

Sorry for posting this devlog so late. I ran into a tough issue that I had to solve on my own. I was trying to show a different screen when the user was logged in, but nothing appeared on the page. I checked all my files to find what went wrong. In the end, I found the problem: the provider was set to show content only when the user was logged in. I fixed that, and everything worked again.

Created a loading kind of page, to give it a better look. The loading has the logo of the website.

oooh this leg took a lot of time. Now that i got all the backend right, I tried to actually integrate the log in system. I tried many ways, but they were just not working. So i went and looked up for documentation on the convex docs. After finding it, when I implemented that, I got an error saying that a function was deprecated. So I had to look up more and FINALLY, I got it working. Here’s a video

Fixed some small issues ad added convex and clerk for the backend. Clerk was used for the authentication stuff.

Modified the file structure and added a layout.tsx file with a new navbar, which renders in all pages of users.

Just fixed an error in the users logic. Since the users logic is dynamic, every time I type something as a subpage in the address bar like ‘…/open’ or something, it was not giving a 404 page not found error but giving me the user id page, showing the user id as open. So i spent a little time on trying to fix it. At the end, I just went with the simplest solution. I routed the ‘user’ page inside a ‘users’ folder.

Coded the users logic. This was a little tough because the tutorial I was following had an older version and the version I was using did not support the code block.

Okay. So this is my first time working with next.js and tailwind CSS. Looked up on tutorials and also tries making some example pages. I also set up the project folder. All this was done with the cli tool for next js. This might be quite a long project. I also installed the button component from shadcn UI. and added a style.

Just added the ability to type the country and get the time zone converted. Way easier than a dropdown

Tweaked some features in the website and fixed some minute bugs.

Fixed some errors in the main installation zip file. not many changes

Added a cool looking animation to the homepage and also added a link to install from github

So i tried to deploy to vercel, but somehow, it failed to load the logo and the favicon, it was so frustrating. Therefore, i just moved the logo image form the designated folder into the main folder :)

Just finished coding the download logic and added instructions on how to load the unpacked extension

Super excited today — the extension is almost fully complete! 🎉I just finished building its official website, where I break down all the core features and how it works. Feels great to see everything finally coming together.

Migrated the Notes section to a spacious new home on the sidebar, freeing up the main interface while giving your thoughts more room to breathe. To maximize that reclaimed real estate, the old notes widget has been refactored into a dynamic stopwatch, allowing for seamless task tracking without ever leaving your workflow.

Took a lot of time to get the settings and history both on one side. Also made the javascript code mode dynamic, so that it will be easier to add more apps to the sidebar.

Added the history sidebar to the new-tab page. Struggled with some issues for history permissions, but it turned out well!

Added so many cool themes that look awesome. Sure you’ll like at least one of those!!

Updated the To-Do section into a focused “Today’s Goal” feature.
Kept the implementation lightweight and straightforward.
It’s fully functional and fits the workflow better.

Implemented several new UX improvements (changing favicon, adding the search button beside the search bar) to streamline navigation and overall usability.
Expanded interface polish across key workflows for a smoother experience.
Also completed the notes system, adding full Markdown support for flexible formatting.

Built out the weather section for the new tab page.
Initially tried using browser geolocation, but ran into permission issues with Chrome’s new tab restrictions.
Switched to IP-based location instead, which ended up being simpler and more reliable.

So, I spent some time tracking down a bunch of unexpected bugs — all of them caused by adding a new type of “Add Shortcut” popup.
What seemed like a small UI tweak ended up breaking multiple assumptions in the existing logic.
Had to refactor event handling and clean up some edge cases to make everything play nicely together.
Lesson learned: even minor UX changes can ripple through the system more than expected.

Shipped a big usability upgrade today. Shortcuts are now fully functional end-to-end, and you can finally drag and reorder them however you want. The UI feels way more flexible now, and this sets a solid foundation for future customization and polish.

Spent a good chunk of time squashing bugs this round — a lot of small issues that were piling up, but everything feels much smoother now. I also added a settings bar on the side, which already makes navigating and tweaking things way nicer than before. And the clock is finally functional now, actually updating in real time instead of just sitting there looking pretty. Definitely feels like a solid step forward.

Added themes to the new tab page. looks awesome!

Just updated the UI of the dashboard to look more like a new tab. And also the searchbar works!

Made the simple look of my glow tab page. An awesome new tab extension. Doesn’t have any features and i am going to change the ui but this is the basic

Made the site look cool and clean with a neon cyberpunk theme

Made the simple looking website and its already works pretty well! Noting much, just simple html,css and js

Woohoooooo! MASTERPLAN! I made themes in the website, solving the problem of some people liking the old design, and some people liking the new design.

Just after i finished the footer, i see some people say they like the old design more. Im confused what to do.

Got inspired by a few professional websites, and improved the styling and css of the website.

Fixed some responsiveness issues. Really excited to ship it! v1.0.0 is out! 😃

Made the word and character counter app. Pretty simple.

Fully coded and finished the password generator. (Don’t try it on my vault check website 🤣 ) ,and added the about section.

Coded and styled the password generator page. Functionality is yet to be coded

Adjusted the home page and fixed some errors in the case converter app

Fully coded the decision picker. Took a little bit of time.

Changed the color scheme of all pages. Loos awesome now!!! Also, made the decision picker page.

Coded the Case converted section. This was by far the easiest. 😉

Revamped the styling of the text cleaner page, and coded the unit converter. It was a little easy

Coded the functionality of the text cleaner and styled it a little bit to match to color theme of the website.

Made the Text cleaner page. Did not do the functionality yet. Also, need to change the colors