A collaborative canvas where multiple people can write, place stickers, drop GIFs, and decorate a shared page together. Everyone sees changes instantly. Just open it and start writing without any account.

You get a blank page. Click anywhere on it to type something. Hit Enter and your text stays there. You can drag it around, resize it, change the font or color before you write. Other people connected at the same time see everything you do as it happens.

Beyond text, you can drop emoji stickers and GIFs onto the page from the toolbar. Those are draggable and resizable too. There are also a bunch of page themes, different backgrounds, colors, and decorative styles and switching the theme changes it for everyone in the room.

The page can be extended vertically if you run out of space using add page feature.

• React (Vite)
• Supabase — Postgres database with realtime subscriptions and presence tracking
• Giphy API — for GIF search
• Google Fonts — handwriting fonts loaded via CSS import

git clone your-repo-url>gt;

cd shared-notebook
npm installl

Create a free project at supabase.com. Then run the following SQL in your Supabase SQL editor to create the required tables.

-- Text entries

create table writings (
  id uuid  primary key default gen_random_uuid(),
  content  text,
  position_x float,
  position_y float,
  font_color or text default '#1a1a2e',
  font_style  text default '''Caveat'', cursive',
  font_size  int default 20,
  created_at  timestamptz default now()
);



-- Stickers and GIFs

create table media_items (
  id uuid  primary key default gen_random_uuid(),
  media_type  text,
  content  text,
  position_x float,
  position_y float,
  size float default lt 120,
  created_at  timestamptz default now()
);



-- Global page settings (theme, height)

create table page_settings (
  id  text primary key,
  theme_id  text default 'sakura',
  extra_height  int default 0,
  changed_by  text,
  updated_at  timestamptz default now()
);;

Enable realtime on all three tables in your Supabase dashboard under Database > Replication.on.

Create a .env file in the project root:

VITE_GIPHY=your_giphy_api_key_here
VITE_ANON=your_anon_key_here
VITE_URL=your_project_url_here
e

Get a free Giphy API key at developers.giphy.com.

### 4. Run it

```bash
npm run dev
dev

Writing click anywhere on the page and start typing. Press Enter to place the text. Press Escape to cancel. After placing, click a piece of text to edit it, or drag it to move it. Hover over it to see the delete button and resize handle.

Ink color click the colored circle in the toolbar to pick a color before writing. There are preset colors and a full color picker.

Font the font dropdown in the toolbar changes the handwriting style applied to new text.

Stickers and GIFs click "Stickers & GIFs" in the toolbar, pick something, and it appears on the page. Drag it where you want it, resize it by dragging the handle in the bottom-right corner.ner.

Page theme "Change Page" opens a theme selector with Japanese-inspired styles. Changing the theme updates it for everyone currently on the page.

Add Page extends the canvas downward by 600px. Useful when you run out of room. This also syncs to all users.

The page is fully public ,anyone with the URL can read and write. If you want to restrict access, you will need to add Supabase Row Level Security policies or an auth layer.

There is no version history or undo. Deleted content is gone.

src/
  App.jsx        — everything: components, logic, styles, Supabase calls
public/
  index.html
.env             — VITE_GIPHY key
key