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