Readnest — Solo Reading (Offline) + Social Groups (Online)

Role: UX & Front-End · Growing Back-End • Stack: HTML, CSS, JS · Supabase (Auth, Postgres, Realtime, Storage) · PWA

Readnest sketch: reader + notes and groups — Two modes: Solo (offline personal library) and Connect (groups, shared comments).

Problem

Ebooks are convenient, but reading apps are often barebones or bloated with features. Social reading (book clubs, recommendations) usually happens outside the app, making it hard to share thoughts while reading. I wanted a better way to read digitally, annotate, and discuss books with friends. Something where we could react as we read, not just meet after as different schedules and paces made it hard. Inspired by Wattpad/Webnovel,Readnest lets us read on our own time, leave inline comments, and see each other’s opinions on what we just read—plus a solo offline mode for annotating ebooks anywhere.

Core Features

Offline Mode (Personal Library)

Upload EPUB/PDF locally on phone or laptop (no account required for Solo).
Highlight passages and add comments/notes.
Progress and notes saved offline (IndexedDB).
Export annotated books as .epubx (EPUB + notes + voice-note refs).
Import .epubx later to restore notes or share with friends.

Online Mode (Social Groups)

Create/join via invite code.
Two group types:
- Book Club: one shared book at a time with inline shared comments and archive.
- Recommendation Group: members upload books; each book gets its own chat/comments.
Realtime:
- Inline shared comments tied to text selections.
- Group chat (global + per-book), presence (“who’s online”).
- Emoji reactions; voice notes (planned).

Offline-first

Works without signup

Inline

Comments on exact text

Import/Export

Portable .epubx

UX Highlights

Leave comments & reactions per paragraph; show them only when others reach that spot (spoiler-safe).
Create a small club via invite code; track each member’s progress.
Solo mode: annotate offline and sync when online.
Keep the UI calm and focused on reading (minimal chrome, readable type, gentle colors).
Two-pane reader: left = text with highlights; right = notes/comments.
Inline anchors: selecting text reveals “Add note / react” toolbar.
Solo → Connect: read offline first, then sync/export to a group when online.
Gentle nudges: progress rings + “continue where you left off”.

Architecture

Layer	Tech	Notes
Reader	HTML/CSS/JS	epub.js for EPUB, PDF.js for PDF (client render)
Offline storage	IndexedDB	idb-keyval/localForage for notes, progress, local files
Sync / Online	Supabase	Auth, Postgres, Realtime (comments/reactions), Storage (covers, optional files)
Packaging	Zip + JSON	`.epubx`: original EPUB + `notes.json` (+ `voices/` later)
Hosting	Netlify + PWA	Service worker for offline app shell

Data Model (simplified)

Table	Main fields
`users`	auth users
`books`	id, owner_id, title, author, cover_url, is_public
`book_files`	book_id, storage_path, type (epub\|pdf)
`highlights`	id, book_id, user_id, start_offset, end_offset, color
`notes`	id, book_id, user_id, highlight_id, body, created_at
`groups`	id, owner_id, type (club\|reco), name, invite_code
`group_members`	group_id, user_id, role
`group_books`	group_id, book_id, added_by, status (active\|archived)
`inline_comments`	id, group_id, book_id, user_id, anchor_range, text
`reactions`	comment_id, user_id, emoji
`presence`	realtime channel only (no table)

Security & Privacy

Row Level Security for all user-generated tables; comments limited to group members.
Local-only Solo mode: nothing leaves device until the user imports/syncs.
Copyright: users should only upload DRM-free ebooks or personal notes.

Roadmap

MVP — Solo (offline-first): load EPUB/PDF, highlights/notes in IndexedDB, progress resume, export/import .epubx.
v2 — Connect (online groups): Auth, create/join group, shared inline comments on the same book, presence, reactions.
v3 — Extras: voice notes, recommendation groups with per-book chat, richer exports, EPUB/PDF parsing improvements.

Key Screens

Inline comments — Inline shared comments

Groups view — Groups (Book Club / Recommendations)

Future Improvements

Voice notes attached to selections (stored in Storage, transcribed for search).
“Read-together” live text mode (soft sync to paragraph anchors).
Better EPUB/PDF parsing for complex layouts and images.
Mobile gestures (long-press highlight, swipe between comments).

Links

Live Demo GitHub Repo Download CV

Built by Antonella Akromah · a@gmail.com