Features

Core features

Main Features include authentication, archive notes, restore notes, infinite child notes along with a notion-style editor.

Additionally, users can also publish their notes, add or edit cover image of their notes, all of this with real-time updates.

Stack

Primary stack

Main technologies are Next.js 14 with TypeScript, Tailwind CSS for styling, and Shadcn UI, Clerk for authentication.

For real-time updates I used a backend service called Convex. For the editor I used BlockNote, an open-source React rich text editor with support for block-based editing and EdgeStore for uploading images.

Problems

Development roadbloacks

This application is basically a minimalistic Notion clone. One issue I encountered was with the document restoration feature. After restoring an archived document, I was unable to fetch it because I had forgotten to return the document in the query.

Implementing the expandable sidebar was quite complex. I had to account for both desktop and mobile views, as well as accommodate space for child documents. To achieve this, I used multiple refs for collapsing, expanding, and resizing the sidebar.

Integrating the Block Note Editor was another major hurdle. I frequently referred to the documentation to tailor it to my needs. Initially, the editor overflowed out of the screen, so I had to explicitly copy the editor styles and customize them accordingly.

Lessons

Key takeaways

For the first time, I delved into Recursive React Components. By implementing a functional component that calls itself, I achieved the creation of infinite children documents, each linked to a parent document via its ID.

Fetching data on the client-side, performing mutations, and enabling real-time editing. Additionally, I explored the use of refs for DOM interactivity and leveraged Zustand for global state management, specifically to track the open and closed states of modals.

This project helped me understand modern web dev practices and improve my problem-solving skills.