Sticky Notes – Websocket Example

A lightweight real-time sticky notes app built with React, and Spring Boot.
Users can create, update, move, and delete notes, and all changes instantly sync across connected clients.

🚀 Features

• ✅ Create Notes – Instantly add a new note to the board.
• ✏️ Edit Notes – Update text in real-time, synced across all users.
• 🗑️ Delete Notes – Remove notes and broadcast deletions to everyone.
• 🎯 Drag & Move Notes – Each note can be repositioned on the board.
• ⚡ Live Collaboration – All actions propagate via Spring WebSocket in real time.
• 💾 In-Memory DB – Uses H2 Database for simplicity and auto reset on restart.

🛠️ Tech Stack

• Frontend: React + TypeScript + Vite
• Backend: Spring Boot (Java)
• Database: H2 (in-memory)

⚙️ Setup

🖥 Backend (Spring Boot)

# Navigate to backend folder
cd server

# Build and run
./mvnw spring-boot:run

The backend starts at http://localhost:8080

You can access the H2 console at 👉 http://localhost:8080/h2-console

💻 Frontend (React + Vite)

# Navigate to frontend folder
cd client

# Install dependencies
bun install

# Run the app
bun dev

Frontend will run at http://localhost:5173

🖼️ Result