← PROJECTS CEBAN MARIUS / PROJECTS / BLOCCO
10 — PWA Development

Blocco.

A mobile-first PWA note-taking app — reminders with quick capture, rich idea cards with markdown support, checklists with item-level progress, drag-to-reorder via long press, color labels, search, and a 30-day trash recovery system. Zero frameworks, fully offline.

Role
Designer & Developer
Year
2025
Stack
HTML · CSS · Vanilla JS · Service Worker · Web App Manifest · localStorage
Status
LIVE
Live Site

Blocco is a personal notebook designed to be added to the iOS/Android home screen and used like a native app. The interface has four tabs: Prom (reminders), Idee (ideas), Liste (checklists), and Cestino (trash). The quick capture bar at the top of the Prom tab lets you add a reminder in one tap and Enter — no modal, no sheet, no friction. Ideas and checklists use a floating [+] FAB that opens a bottom sheet modal.

All three note types share a common card shell: color label border (6 colors), pin-to-top, edit, and soft delete that moves the item to the Cestino tab instead of destroying it immediately. Items in the trash display an expiration countdown and can be individually restored, permanently deleted, or bulk-cleared. The trash is also automatically purged on boot for items older than 30 days.

· · · ◆ · · ·

iOS Notes and Google Keep require accounts and cloud sync. Blocco stores everything in localStorage — opening it loads instantly with all data intact, offline from the first visit. The PWA install prompt makes it indistinguishable from a native app once on the home screen.

The monospace aesthetic was a deliberate choice. IBM Plex Mono gives the app a minimal, terminal-like feel that signals precision and intentionality. The bracket-based action buttons — [pin], [edit], [del] — reinforce this language. It is a notebook that feels like it was built for people who care about how things look.

Four Note Types & Color Labels

Prom are circular-check reminders: tapping the circle slides the card out with a CSS translate animation and removes it from the array — completed, not deleted. Idee are free-form notes with an optional title and markdown rendering (**bold**, _italic_). Liste are checklists with a live done/total counter and an inline "add item" input row at the bottom. All types support 6 color label dots (red, orange, yellow, green, blue, purple) that render as a 2.5px left border on the card. Tapping any note body opens a full-screen reading overlay.

Note types
Promemoria completato
Idea progetto
Nuova feature per l'app — _da valutare_
Lista spesa 2/4
Latte
Pane

Drag-to-Reorder via Long Press

Long-pressing any card for 420ms creates a ghost clone (slightly scaled and rotated) that follows the finger. The original card fades to 18% opacity. Moving the ghost over another card marks it with a dashed outline. Releasing commits the reorder by splicing the source item out of its position and inserting it at the target index. The elementFromPoint trick — hiding the ghost for one frame before hit-testing — is the key to finding the drop target without an additional overlay element. Touch events only; desktop mouse drag is not implemented.

Drag to reorder
Fare la lavatrice
Fare la lavatrice
Comprare il latte
Chiamare il medico
hold 420ms · drag · release

What shipped

A complete PWA note-taking app: 4 sections (Prom, Idee, Liste, Cestino), quick capture bar for instant reminders, rich cards with optional title, markdown bold/italic, 6 color labels, pin-to-top, edit modal, drag-to-reorder with ghost preview, focus/reading overlay, global search with live filtering across all three content sections, statistics header showing item counts, trash with 30-day TTL, restore and permanent-delete actions, bulk trash clear, backup export/import as JSON, dark/light mode toggle, customizable user name, and Twemoji for consistent emoji rendering across devices.

What I learned

Building touch drag-and-drop without a library is deceptively nuanced. The 420ms long-press threshold had to be precisely tuned: too short and normal scrolls trigger ghost creation; too long and it feels sluggish. The 9-pixel movement threshold that cancels the timer before it fires was the solution — it distinguishes "user is scrolling" from "user is holding still". The reading focus overlay — a tap on the note text that expands it to near-full screen — was a late addition that changed how the app feels entirely: it transformed Blocco from a list-management tool into something closer to a real notebook.

Cestino
[ elementi conservati 30 giorni ]
[prom] · 3m fa · scade tra 29g
Fare la spesa
3 mar [ripristina] [elimina]
[idea] · 2g fa · scade tra 28g
Progetto nuovo con React
22 mar [ripristina] [elimina]
[svuota cestino]
NEXT PROJECT
Donkey Joe →