Worked more on the cert page

Created the nested edit cert page. This took a long time

I then programmed some basic clam / unclaim functions

Worked on the support tickets page, just a simple static display

Worked more on the cert queue and also added a theme toggle lik always from shadcn

Completed the cert Stats page

Worked on the cert stats page. it was a headache to get the cards right

I created the admin home page with some basic elements simple.

Modelled some of the sidebar also changed some colors

Then i created the admin layout with a sidebar and a main section

Since i moved my code to next.js, i decided to do everything from scratch so i created the home page

I moved all my code to next js

Worked on the cert queue page

Created the first sample prototype

Devlog 19

README

Added stuff to my readme like the features, tech stack and stuff like that. I also, for the first ever time gave instructions to run it locally.

Devlog 18

Final touches

Dark mode

I added up the dark mode and spiced it up with some adjustments

Delete and rename for teams and files

I then added 4 more mutations each for renaming and deleting a file and team

Fixed all files in sidebar

Sidebar now shows all files of the current team

File name

File name also shows up in required places

Devlog 17

Dark mode

i then used next-themes and added a dark mode this was simple but the main part was the home page. I spent so much time on this linear mesh pattern im exhausted

Devlog 16

Whiteboard + diagrams editor

Okay, this was the toughest part. I was too lazy to code the whiteboard all by myself. So i found this really cool tool called ‘excalidraw’ which is pretty useful! All this was fine i implemented it and all but, the main problem was the saving part. I struggled to create a saving function, but on top of that, when i finally coded the function, it started to only save the raw elements not any orientation or any image It was all messed up. So i had to do some other troublesome code and stuff to get it right and finally, it worked the whiteboard is now complete!

Devlog 15

Split screen feature

I then created a featue to display only the document editor or only the canvas or both i did this using some types and conditional statements.

Devlog 14

Document functionality

I could not use editor.js because it had way too many restrictions and i had to manually install its sub components like ‘heading 1’, ‘list’ and all those stuff. So i switched back to good old blocknote.js from corenote and i reused almost the whole of it. It turns out well!

Devlog 13

Workspace layout + editor.js

So i then created the workspace layout with the text editor on the left and the canvas editor on the right i started working on the text editor and decided to try out something new so i used the editor.js framework to make some simple stuff.

Devlog 12

Files table

I created another api function in he db to get all files present and then i used a simple table to display the name, creation time, created by and a small dropdown for extra options. Btw, i used moment for the creation time formatting.

Devlog 11

Dashboard page p-2

So i then went back to designing the dashboard page. I created a header section with a search bar, invite button and the user button. None of them are functional yet, just simple ui.

Devlog 10

File database storing

Okay, then i linked up the value of the file input and created a table in convex, (again), and every time i create a file i made it store the data in the ‘files’ table and also made it show a toast message.

Devlog 9

Create file method

So, after that used the dialog component from shadcn to display a small dialog asking the user to enter a file name. Then i took the input and displayed it in the console. Just basic, i will have to create a whole new table for files and then store the filename there

Devlog 8

Sidebar finished

Then I finished up the sidebar by adding a bottom section to it just simple ui, no functionality yet, i also added the all files button on the sidebar along with a new file button. all this couldnt be possible without tailwind v4.

W TAILWIND CSS

Devlog 7

Dashboard page

After that i finally worked on the dashboard page, and the first ting i worked on was the sidebar. This was both easy and tough at some points because, i struggled a little bit with shadcn’s popover component the thing was just always jerking into position. So i kept on trying to find ways tto make that stop and nicely animate into position. I worked quite a lot on that. My code now may not be that efficient or anything its just ykw ‘code’. Then i also used the convex data and displayed the user profile and teams in the sidebar.

Devlog 6

Teams creation

So i finally linked the backend of the teams table to the create team page. And i also installed toast from sonner and i made it toast a message when creating a team. Once the team is created, it redirects me to the dashboard.

Devlog 5

Teams table

Then i started implementing the teams logic basically like organizations. I created the data functions and also made some nice ui for the create team page

Devlog 4

Convex data settings

Okay, this was tiresome i tried so hard to get the data to work. My idea was simple. When i open the dashboard page, the site had to just check if the user was in the database, if not it had to add the user. But guess what, convex doesnt like to make life easy for me. It threw bugs like no table provided and stuff like that, soo… yeah finally i somehow made it work

Devlog 3

Convex

I then setup convex for the db stuff just as i did with all of my projects till now. This was simple i just had to follow the convex docs and everything was done. I also needed to create only 1 file

Devlog 2

Authentication

I created the authentication setup using a new framework ‘kinde’ i started using this instead of clerk because this contained support for the new next.js versions too so i did not have to do much work to get the authentication setup

Devlog 1

Home page

Navbar

I created the navbar with some simple ideas. Just basic html for this. And im also exploring new methods of doing stuff in next.js

Hero

I wrote a hero section with the basic abilities of the web app. This took the most of my time

Devlog 19

Changes

Kbd updated component

I created a new component with some nice ui to display keyboard shortcuts. I also did many other updates and minor changes in the other components and stuff

Devlog 18

Changes

Final touches

I updated some stuff in the home page and all updated the link component a little bit, published v1.1.1 to npm cli package

Readme

Wrote a lot of stuff in my readme and gave details on how to use and things like that

Devlog 17

Changelog

New accordion component

This was the toughest so i needed the help of ol’ google for this component. Its a small title which expands into content when you click on it. A pretty simple component. not that bad

Devlog 16

Changes

New ‘switch’ component

I then created a toggle switch component it was a little tough bet then, once i used react’s useState function, it all came to work!

Devlog 15

Changelog

New component

So i created another component called ‘card’ Its a simple card that can show information. It also supports an action in the header like a button or link or anything!

Card docs

With this new docs system i just had to write a little bit of docs as i simplified the process

Devlog 14

Changes

Better docs system

After all of this i decided that it took too much time for me to create docs and almost everything was the same only the properties table and the code block was different so i created a new .ts file with all the data and made 1 single file to display all of them

Devlog 13

Changes

Input component!

So after the callout i decided to make my own text input component as i was so bored of the dumb default html input component. It looked disgusting. I struggled a little bit while styling it as i was also adding a small tweak and was allowing users to also show a lucide icon in the side.

Input docs

Then, as i was making the component i also went ahead and wrote the docs for it!

Devlog 12

Changes

New component: callout

I created a new component called ‘callout’. Just a small info box kind of thingy and added some color variants to it so you can choose between red, blue, green and yellow colors

Callout docs

Meanwhile i also followed my standard procedure and created the documentation for the callout component

Devlog 11

Changes

Components page and documentation page

I added some links to the components page and the documentation page leading to the specific component docs

Badge component!!

Then i created a whole new component called a ‘badge’ it kinda looks cool tbh

Devlog 10

Changes

More documentation

Created the documentation for the link and code block components

Codeblock ui

Made the window like ui be optional i.e, dispay the 3 dots on the top left corner optionally

Devlog 9

Changes

Reimagined codeblock

So i took inspiration from the code in my homepage and used the similar code to get a codeblock like that.

Button docs done!

Then i made a nice layout on the button docs page and it looks professional now!

Devlog 8:

Changes:

Documentation optimization

I tried my best to optimize the documentation structure but no matter what i did it was sooo tough and i had to go with the normal way. I now have to create a separate file for each component with its own docs.

Codeblock component

So when i was writing down docs for my button component i decided to display my own codeblock component with a copy button and function

Bugs and issues with the cli package

Meanwhile whn i was writing the code for the documentation for the button i realized that i needed to publish my cli code to npm! So i did that but the commands were not working. I debuggged and debugged until i found out that the error was that it was looking for a wrong file name. I fixed that and my code is officially now on npm heres the command for a button
npx modui-uikit@latest add button
same for the link and codeblock!

Ui fixes in the documentation page

I fixed some overflow stuff and all tailwind issues in the page

Devlog 7:

Changes

Documentation layout

I created a separate layout for the documentation page with the sidebar so that it appears on all /documentation/xyz pages. This was a lil crazy because even though i knew how it was supposed to work, some dumb css issue came up so i had to experiment through the fixes

Docs page

I made a page.tsx for the docs to appear and it was difficult because i wanted it to me automatic and i did not need to create pages and pages of documentation myself. So i did some trial and error on the page and tried to integrate the data from my components json file

The toughest thing i did : Preview

So the toughest thing i made was the preview component that shows the preview of my component. I tried many wasy to keep it optimized like i tried to keep one single component and do some stuff, but it did not work because each component needed their own parameters so i had to do it the recursive way by creating a component and rendering the individual components conditionally

Devlog 6

Changes

Sidebar population

So i wrote a script in my scripts folder that runs each time i run my project that reads the file names of the files in my /components folder and writers them down in a json file. Then in the sidebar, i wrore some lines to map and show all elements found in the json file!

Devlog 5

Changes:

Components page

I worked on the components page with a cool window like container to showcase the components i currently only have 2 components, but i need to find an efficient way to showcase the components because i cant manually keep adding them

Devlog 4

Changes:

Navbar setting:

i made the navbar as a separate component and then used that in the main layout so it is visible in all pages. This was done for easy work for me as i dont need to copy and paste the navbar code in all pages

Sidebar:

I worked a little bit on the /documentation page where i added a small sidebar with the components listed.

Devlog 3

Changelog

Link component

So i was working on the homepage when i realized that i had to actually link the buttons to some page so i as usual wanted to create my own component for that called It was surprising that i could actually get it right and i used it! The component works!

Devlog 2

Changes:

I worked a lot on the home page to showcase my components and…. I used me own button component in the homepage! It looks new and minimal I really liked it a lot it took a long time because im really good at that aesthetic ui stuff so yeah but it looks super cool.

I started by creating a simple button component with some variants, i just made it like that button from shadcn. But that is not the focus. The main aim of this project for me was to make a cli command that installs the component. So i used commander, chalk and fs-extra with the help of powerful google to come up with some script that creates a file with some code.

Made some minor ui changes in the selection tools now this is ready to be shipped!

I did a little more work but the local site started throwing so many errors so i had to sit and fix em one by one its still the same old site though

Did some backed improvements. Lil tough with the packages and liveblocks

Oof im tired of doin this every time i try to add a new feature some dumb technical bug pops up. This time its seems that there was some ‘syntax error in package.json’ but there was nothing. I even double checked it with a json linter but next was stubborn and did not run the site. I tried again and again and finally after remaking the package.json it worked poof. Its wasting my time instead of allowing me to make new things

This was simple but time taking I had to it and map all tools to keys on the keyboard and then write them all down in an array and make a dialog display for all of them I knew how to do this but it was just a time taking process.

Worked on some minor changes like colors and updated the canvas settings dialog to include the color theme as well

This was crazy. I found a crazy bug in the site that everytime i deleted an organization, it lead me to the home page and did not allow me to sign back in. It was really tough to figure out what was the problem i tried changing my proxy, middleware and others but they did not work. So i kept this aside for some time and just thought about the problem. And i actually found out the problem but not its cause i googled about clerk for a while and I found the 1 setting which had caused all of this ‘membership required’ this option was checked which caused the site to lead the user to choose organization page leading to so many errors

I retried making a dark mode and this time it actually worked I had to make some minor changes here and there to match the theme but the replacement of hardcoded colors was a huge headache. But it turned out well

Made some UX improvements:

• Added more blur and rounded corners to all the bars
• Fixed the all boards button on the info bar
• Added a Text label to he role display
• Changed the reset zoom button to show the zoom percentage
• Fixed rounded corners for all buttons

So i decided to make yet another useful feature EXPORT AS PNG This was rlly tough I tried different ways but i only found 1 of the comfortable html-to-canvas this was also difficult because I accidentally linked the wrong item to export. SO here it is

I added an eraser feature. This was verryyyyy easy. I just had to se which layer the user was hovering over and delete that layer!

I fixed a small issue in the custom color picker. Nothing big, just small issues

Added more colors! :yay: And also created a custom color component for you to choose your own color. (this was from react colorful library

I created an awesome feature to zoom in, zoom out reset camera and see zoom % in a top bar. It also allows you to reset camera position if lost

So, this might have not been huge progress, but i definitely squashed * 2 HUGE BUGS *

• The line not aligning with the mouse:
  – This was so hard. I first tried to fix the issue by recorrecting my point to canvas function that returns a specific point on the canvas. That did not work. So i looked into the main line component itself. I checked if there were any typos or mistakes in the positioning. It was all right. After all this i ran out of places to look for the issue. So i got tired and experimented with the streamlining and smoothing to try and get some cool effects and to my surprise, lowering them to 0 fixed the error what a coincidence. So i fixed the error by mistake 😁
• Then comes the Selection tools appearing in a random place when I zoom in or out
  – This was not that hard. I just had to include the svg component’s coordinates in the math function i used to position the selection tools.

So i heavily cleaned up my code for bettr understanding

This was soooooooo tough. I thought adding 4 more shapes wouldnt be that hard but then i wound out its evil nature. I struggled to get the points and calculations right on my own so i had to google out things and second, i added a really nice feature of dragging to draw. That was fun and nice.

I spent some 20mins and reorganized the toolbar because it was becoming too cluttered. So i grouped all shapes into one, text, mat and those stuff as one and the pencil and line as one. This was simple

Created an awesome feature for the whiteboard. IT is really nice and im pretty sure you guys would like it.

Canvas Backgrounds :yay:

this was not too hard i had to change the default bg and map it to the button which tells the canvas its bg. For some of them i had to get images from random websites to get the back ground. It looks cool!

Programmed a lot of bug fixes and major issues. Made it nicer for people to use and I also changed some UI here and there so…. heres it!

I wrote the readme added some cool images and a lot of minimal style changes, and also changed the theme to green because i thought that green was not widely used,

So i created the publish functionality, it works awesome i opened the page in incognito and it did not allow me to edit it because i was on a preview. Awesome, perfect!

So i found a lot of bugs related to deleting documents.

The document was deleted but the site was not redirected away from the deleted document page leading to an error. So i tried to do something and finally, i came up with the solution and figured it out

After that,

I added a publish button and created some functions and gave it a nice popover component to publish it

I just sat and created a 404 page not found screen cuz i did not like the constant errors popping up when i tried to open documents that were already deleted.

I worked a lot on getting an editor component into the document. IT was really difficult even though i used this awesome framework [Block Note](blocknotejs.org) It is awesome it comes with inbuilt options to add h1s, h2s, h3s and so on, it allows you to add image, lists, checkboxes, change colors and so many other awesome features

This was a really hard part. I started with adding to buttons for removing and changing the cover, but somehow the styling did not work. The classnames did not function correctly. I spent like an hour or so trying to get it right, then, when I was testing it out, the progress of uploading did not appear. So i went to the docs and manually copy pasted the component and tried different bugfixes. But finally when i tried to drag and drop an image it did not upload the file i did not know why. SI i again had to see the docs and replace the component and at the end its all working

Added the faq page to the site with content all handwritten by me

So i created the basic website of my ysws Idea hackAI, wit basic html and css. I dont have much of actual programming to do so here it is.

So i worked a bit and added a cover component that displays the cover image. Its really coming togeter now

This was soooo hard. i tried to add the file upload through some new tool called ‘edge store’ it was crazy difficult to implement it. I kept running into errors because it did not work properly. I tried and tried a lot and finally it worked

So i worked a bit and got the icon for the document. Like you can set your own icon and created a small popup for uploading the cover image

So i spent some time and added a new component for the main title using the textarea autosize package from react

So i found some errors in the main page, like when i tried to navigate to a doxument through search, it showed me a 404 page not found error. So i had to look for ways to fix that. Same with deleted projects. Then i worked a bit more on the document page. I left a little space at the top for rendering a banner image, and below that i added two buttons for setting an icon and a banner. They are not functional yet though.

So i just worked on a lot of stuff. First i implemented the document page. So you get redirected to it when you click on it. And next, i added a small feature to rename it. its kind of a button and input fused together… you get it. Then i added a banner it shows when the page is in trash. It looks cool

So i created the settings component it was easy. I just had to reuse the search component and replace it with some settings. I also reused the theme toggle from the homepage and added it to the settings

So i just programmed the whole of the search function including the ui. This was soo hard. I had to try different ways until i finally found the command component from shadcn, but i still had other problems. The documentation did not work out for me so i had to figure ways out to get it right. And finally, it worked! It looks sooo cool ngl.

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.