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.

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…