BetterNotes

## Overview

BetterNotes is a modern, minimalist note-taking application built for speed, simplicity, and reliability. It provides a clean, distraction-free writing environment coupled with a powerful backend architecture to ensure your thoughts are saved securely and instantly synchronized across all your devices.

## Key Features

• Rich Text Editor: A robust and seamless writing experience with full text formatting capabilities, allowing for expressive note-taking without complex markdown syntax.
• Real-time Sync: Leverages Supabase Realtime to ensure notes are synchronized across devices instantaneously, preventing data loss and enabling fluid device switching.
• Secure Authentication: Implements a frictionless login experience using Better Auth paired with Google OAuth, prioritizing security and user convenience.
• Minimalist UI: Designed with Tailwind CSS and shadcn/ui to create a highly readable, accessible, and clutter-free interface that puts content first.
• Cloud Storage: Reliable, persistent data storage utilizing Supabase PostgreSQL for robust relational data management.

## Technical Implementation

### Architecture

BetterNotes is constructed on top of Next.js 15, taking full advantage of the App Router and Server Components to deliver exceptional performance and SEO capabilities. The application uses TypeScript end-to-end, ensuring type safety from the database schema all the way to the React UI components.

### Data and Sync Layer

The backend is powered by Supabase. Data mutations are handled securely, and the application subscribes to PostgreSQL changes via WebSockets (Supabase Realtime). This architecture ensures that if a note is edited on a mobile device, the changes reflect immediately on an open desktop browser session.

### Authentication

Better Auth handles the authentication surface, deeply integrating with the Next.js App Router. This modern auth solution provides a lightweight, highly customizable alternative to older auth providers, seamlessly managing session tokens and user data.

## Design Decisions

Speed Over Complexity: I purposefully designed BetterNotes to feel as fast and responsive as a local text file, while possessing the hidden power of an enterprise-grade cloud backup system. Complex organizational structures were eschewed in favor of immediate access to the writing canvas.

Adoption of Next.js 15: This project served as an exploration of the latest features in the React ecosystem, specifically testing the stability and performance of Next.js 15's rendering optimizations and caching behaviors.

## Challenges

Cloud Sync: Implementing conflict-free real-time synchronization required careful handling of optimistic UI updates and WebSocket event listeners to ensure a seamless experience even on unstable network connections.

Rich Text Editing: Integrating a robust rich text editor that serializes safely to the database and hydrates properly on the client without hydration mismatches or XSS vulnerabilities proved technically demanding.

Authentication Flow: Building a secure, edge-compatible authentication flow that smoothly handles redirects, session expirations, and secure cookie management across subdomains.