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

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

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

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.

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.