Noted 📓
Live Site: https://noted-notebook.netlify.app/

Description

Noted is a Notion-style online editor that allows users to create, edit, and organize rich content pages. It's powered by Supabase as the backend (for auth, storage, and database), and built with React.js, TypeScript, and Vite on the frontend, deployed on Netlify. Users can sign in passwordlessly, edit blocks, reorder content via drag-and-drop, and customize pages with emojis, cover images, and resizable images w/ captions. The app includes comprehensive unit and integration testing with over 95% line coverage using Vitest and React Testing Library

How to Use:

Enter your email address to sign in passwordlessly

Check your email inbox for an email from Supabase Auth titled Join Noted 📓

Follow the instructions on the home page to learn how the app works

Add different content blocks (nodes), including:

• Text blocks
• Headings (H1-H3)
• Ordered and unordered lists
• Images with captions
• Links to other pages

Rearrange content with drag and drop by dragging any block to reposition it within the page using smooth, intuitive drag-and-drop interactions

Customize page visuals:

• Add a cover image to any page
• Reposition the cover image vertically
• Resize images on desktop and laptop screens
• Change the page's emoji

Navigate between pages by linking to other pages within Noted to create a connected workspace

Features

Passwordless authentication using Supabase's magic link auth system

Pages consist of draggable content "nodes" using @dnd-kit

Multiple node types accessible by typing '/' to bring up the command panel + search for node type or use arrow keys to move between the options

Supports image + caption uploads by using Supabase's S3 buckets

Row-Level Security (RLS) on Supabase DB

Unit + integration tests with 95%+ line coverage

Persistant storage using Supabase for the DB and S3 image bucket

Image resizing on desktop + laptop screens using re-resizable

Cover images on each page with vertical repositioning

Pick an emoji for each page using emoji-picker

Easily delete pages that you no longer need

Replace or delete images with buttons visible on hover

Tokens removed during sign-out, so re-authentication is required

Responsive layout using Flexbox

Form Validation & Error Messages

Custom site favicon

Mobile-friendly

Technical challenges I overcame:

• Designing a Notion-style block architecture where each node type has its own rendering, state, and drag behaviour
• Persisting complex editor state (node order, content, image metadata, captions, and resize/repositioning dimensions) in Supabase
• Building repositionable cover images while preventing layout breakage or white space overflow
• Writing extensive unit and integration tests for a highly interactive UI, achieving over 95% line coverage
• Mocking external dependencies (Supabase, drag events, image repositioning, emoji picker) for reliable tests
• Ensuring keyboard usability in an interactive editor environment

Possible Future Improvements:

• Unsplash API integration to allow users to choose from stock photos for cover images
• Page descriptions and/or tags
• Rich text formatting (bold, italic, inline code, etc)
• Collaborative real-time editing
• Version history and undo/redo support
• Public page sharing + read-only views
• Import/export pages
• Dark mode