Notes — An Immersive 3D Note-Taking Experience

Overview

Notes is a full-stack note-taking application designed to transform traditional digital note-taking into a more immersive and interactive experience.

Instead of relying on a conventional dashboard, the application introduces a persistent 3D bedroom workspace where users can interact with everyday objects to access their notes, organize pages, manage deleted content, and customize their environment.

At the center of the experience is a notebook powered by BlockNote, providing a rich-text editing environment with hierarchical pages, mathematical equations, advanced search, split-view editing, and automatic synchronization.

The project combines interactive 3D interfaces with reliable data persistence, authentication, and recovery mechanisms to create a workspace that is both visually engaging and practical for everyday use.

The Idea

Most note-taking applications follow a familiar interface built around sidebars, folders, and document editors.

I wanted to explore a different approach: What if a digital notebook felt like an actual personal workspace?

This idea became the foundation of Notes.

The application presents a virtual bedroom containing a desk, laptop, notebook, lamp, page board, and other interactive objects. Each object contributes to the workspace experience, allowing users to navigate the application through a physical environment rather than a traditional dashboard alone.

However, the goal was not simply to create an attractive interface. The application also needed to support reliable editing, secure storage, and a smooth experience across different screen sizes.

Key Features

1. Immersive 3D Workspace

The application features a persistent, interactive 3D bedroom built with Three.js.

Users can explore the environment from a first-person perspective and interact with objects to access different features.

Key interactions include:

The workspace uses responsive camera positioning, optimized rendering, and reduced-motion support to accommodate different devices and accessibility preferences.

2. Rich-Text Note Editor

The note editor is powered by BlockNote and supports structured content creation.

Users can create and organize notes using:

The editor also includes Find and Replace functionality, keyboard shortcuts, and automatic saving.

3. Split-View Editing

Notes supports a split-view editing experience that allows users to work with two notes simultaneously.

Users can open different notes in separate panels, resize the workspace, and switch focus without losing their editing position.

Both panels maintain independent scrolling, navigation, and editing states.

When the same note is opened in both panels, changes are synchronized immediately within the application.

This feature is particularly useful for comparing information, reviewing documentation, and working with related notes.

4. Secure Authentication and Personal Workspaces

Authentication is implemented using Supabase Auth with email and password support.

The authentication system includes:

Each authenticated user receives an isolated workspace.

Protected operations validate the authenticated session and workspace membership, ensuring users can access only their authorized data.

5. Automatic Saving and Draft Recovery

One of the most important engineering challenges was protecting user content from unexpected interruptions.

The application implements a persistence system combining server-side autosave with device-level draft recovery.

The system includes:

When a network request fails, users can continue editing an already loaded document while their changes are preserved locally, subject to browser storage availability.

Once connectivity returns, the application attempts to synchronize pending changes without requiring a page reload.

6. Hierarchical Note Organization

Users can organize notes into nested page structures, making it easier to manage complex collections of information.

The navigation system supports:

Structural changes are validated and persisted using atomic operations to protect the consistency of the notebook hierarchy.

7. Private Image Storage

The application integrates Supabase Storage for image uploads.

Images are stored in a private bucket and accessed through authenticated server endpoints.

The upload system validates file types, file sizes, user sessions, and workspace permissions before accepting content.

This approach keeps private images protected without exposing privileged storage credentials or public object URLs.

Technical Architecture

The application uses a full-stack architecture built around Next.js, TypeScript, Prisma, PostgreSQL, and Supabase.

Frontend

Next.js and React provide the application interface, routing, and server-rendered initial workspace data.

Three.js powers the interactive 3D environment, while BlockNote provides the structured rich-text editing experience.

Tailwind CSS and shadcn/ui support reusable interface components and the application's clay-inspired visual design.

Backend and Database

Server-side operations handle authentication checks, workspace authorization, note persistence, image uploads, and synchronization.

Prisma manages access to the PostgreSQL database, with note metadata and structured editor content stored separately.

Database transactions and revision checks help prevent stale updates from overwriting newer changes.

Local Persistence

IndexedDB stores device-level drafts to reduce the risk of losing unsynchronized changes.

The application uses scoped draft journals and recovery mechanisms to handle interrupted requests, browser refreshes, and synchronization conflicts.

Security

The application uses server-side authentication and workspace membership validation to protect user data.

Private storage access, origin validation, and authorized database operations are important parts of the security architecture.

Engineering Challenges

Building a Functional Interface Inside a 3D Environment

Integrating an interactive notebook into a 3D scene required coordinating camera movement, object interactions, and HTML-based editing surfaces.

The challenge was to preserve the visual experience without compromising text editing, navigation, or accessibility.

The implementation uses camera presets, projected HTML interfaces, responsive layouts, and rendering optimizations to keep the workspace usable.

Preventing Data Loss During Synchronization

Reliable note persistence required more than sending updates to a database.

Network interruptions, simultaneous edits, stale responses, and browser refreshes can all introduce synchronization problems.

To address these challenges, the application uses revision checks, serialized save requests, IndexedDB draft journals, automatic retries, and conflict recovery.

Managing Multiple Editor Views

Split-view editing introduced additional complexity because multiple editor instances may reference the same document.

The implementation separates shared document state from individual editor views, allowing synchronized content while preserving independent navigation and undo behavior.

Balancing Visual Quality and Performance

A persistent 3D scene can introduce unnecessary rendering costs, especially on mobile devices.

The application reduces rendering activity when idle, adjusts visual quality for smaller devices, loads selected features on demand, and provides fallback interfaces when WebGL is unavailable.

What I Learned

Building Notes involved working across several areas of software engineering, including frontend architecture, interactive 3D interfaces, database design, authentication, and client-server synchronization.

The project reinforced the importance of treating data reliability as a core product requirement rather than an additional feature.

It also demonstrated how complex visual interfaces can coexist with practical application functionality when interaction design, state management, and performance are considered together.

Future Improvements

Several improvements remain possible as the application evolves:

These improvements would extend the existing architecture while making the application more scalable and accessible.

Conclusion

Notes is an exploration of how immersive interfaces and reliable software engineering can come together in a productivity application.

Beyond its interactive 3D workspace, the project focuses on secure authentication, structured content management, reliable synchronization, and thoughtful editing experiences.

It represents an approach to building software that combines visual creativity with practical functionality, maintainable architecture, and attention to data integrity.