Shark Notes

Release Notes

May 31, 2026

Shark Notes is a self-hosted collaborative notes application built to demonstrate modern React development, realtime updates, persistence, and cloud deployment.
1

Shared notes app

8

UML guide types

Live

WebSocket sync

Product Capabilities

  • Collaborative notes with create, edit, delete, select, and search flows.
  • Server-backed persistence so notes survive refreshes and are shared across users.
  • Intentional editing flow: no note is open by default, and editing starts after selection.
  • Responsive interface with an Apple Notes-inspired layout and shark-themed visual identity.

Realtime Behavior

  • WebSocket update notifications keep connected browsers in sync after note changes.
  • The server remains the source of truth through the /api/notes route.
  • Clients refetch note data after realtime events to avoid stale local state.

Learning Content

  • Dashboard summarizes note count, word count, UML guides, and recent activity.
  • UML reference notes cover class, sequence, use case, activity, state machine, component, deployment, and object diagrams.
  • Each UML guide includes explanatory text and a supporting visual.
  • A shark image gallery demonstrates static asset handling and responsive media layout.

Project Delivery

  • Hosted on AWS EC2 as a deployed, browser-accessible portfolio project.
  • Organized as a production-ready application with a documented release history.
  • Designed to show full-stack implementation, realtime behavior, persistence, and responsive UI work.

Technology Stack

Nx workspace with pnpmTanStack Start and TanStack RouterReact 19 and TypeScriptVite and Nitro production buildssql.js SQLite-backed note storagews WebSocket live updatesAWS EC2 self-hosted deployment