To demonstrate my full-stack capabilities with a modern, serverless tech stack, I set out to build Otion, a feature-rich, Notion-style document editor. The goal was not just to replicate the UI, but to build a robust, production-ready application from the ground up, tackling complex challenges like real-time data synchronization, nested document architecture, and secure user authentication. This project serves as a comprehensive showcase of my ability to design, architect, and deploy a sophisticated web application.

As the sole architect and developer, I was responsible for the entire lifecycle of Otion. This included technology selection, backend architecture with Convex, building a dynamic frontend with Next.js and React, and final deployment to Vercel. My approach was to prioritize a seamless and highly interactive user experience, mirroring the fluidity and functionality of leading productivity applications.

Real-Time, Collaborative Backend with Convex At the heart of Otion is a real-time database powered by Convex. This was a deliberate architectural choice to enable instantaneous updates across devices, creating a seamless and collaborative editing experience without manual refreshes. The backend supports the core functionality of creating, reading, updating, and archiving documents, including the logic for infinite nesting of pages.

Secure Authentication & User Management To provide a secure, multi-tenant experience, I integrated Clerk for user authentication. This handles the entire user lifecycle, from sign-up and sign-in to session management, ensuring that each user's documents are private and protected. The integration was seamless, providing a professional and secure entry point to the application.

Rich Document Editor & Integrated File Storage The core of the user experience is a rich text editor that allows for stylish, organized note-taking. Beyond text, I built functionality for users to personalize their documents by uploading cover images and icons. This involved integrating file storage for these assets and building a robust trash and recovery system to prevent accidental data loss, adding a layer of professional polish to the user flow.

Dynamic Public Sharing To mimic real-world SaaS functionality and add a layer of utility, I implemented a feature that allows users to publish any document to the web. A single click generates a publicly viewable, read-only version of the note, complete with its styling and cover image, showcasing my ability to handle different states and permissions within the application.

Otion successfully demonstrates my ability to architect and build a complex, full-stack web application from concept to deployment. It serves as tangible proof of:

Mastery of Modern Technologies: Deep proficiency in React, Next.js, TypeScript, Convex, and Clerk.

End-to-End Project Ownership: The ability to manage all aspects of a project's lifecycle, from planning to final launch.

A Strong Focus on User Experience: A commitment to building intuitive, responsive, and polished interfaces, including features like dark mode and a fully responsive design.