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

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.

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.