This is a submission for the DEV Weekend Challenge: Community
The Community
There is a group chat I open before I open anything else in the morning.
It is called Broadening Sensibilities — a book club that began in Pakistan and, somewhere along the way, quietly crossed a border into India. It is made up almost entirely of women. We have argued about Dostoevsky and shared granola recipes in the same breath. We have held each other through heartbreaks and career pivots and the particular exhaustion of being a woman who thinks too much. We have done all of this over WhatsApp threads and voice notes and the occasional chaotic Zoom call where everyone talks at once and nobody minds.
What we did not have was a place that was ours. A place that understood that we were not just chatting — we were reading together, thinking together, building something together. In a year when the news between our two countries has been loud and unkind, we have been quietly, defiantly, on the same page.
I built Folio for them.
What I Built
Folio is a real-time collaborative reading platform for book clubs. Members join a private club, read the same PDF together in-browser, and leave their marks on it — highlights, quotes, questions, private whispers — right on the page, exactly where the feeling hit.
They can see each other reading in real time. They can discuss in a Discord-style forum without ever leaving the book. And when the book is done, an AI generates a personalised capsule — a keepsake of everything the club thought, felt, and argued about together.
It is not a chat app with a reading list attached. It is the first time reading together has actually felt like reading together.
Features
📖 In-Browser PDF Reader
The admin uploads a PDF — the club's book for the month. It renders instantly in the browser using PDF.js with a full text layer, meaning the text is real, selectable, and annotatable. No downloads. No switching apps. You open Folio and the book is already there.
✍️ Collaborative Annotation System
Select any passage and a tooltip appears with five choices: Highlight, Quote, Question, Note, or Whisper. The first four are shared with the entire club — they appear in the annotation panel in real time as other members add them. The fifth — Whisper — is private. Only you can see it. It is for the thoughts you are not ready to share yet, the half-formed feelings you want to sit with before they become a discussion.
👥 Live Reading Presence
A floating rail on the left side of the reader shows you who else is reading right now, and where. A green pulsing ring around an avatar means they are on the exact same page as you. Numbers like "+3p" or "−7p" show you who is ahead and who is behind. At the bottom, a progress strip maps every member's position across the full length of the book. It is a small thing that changes everything — suddenly you are not reading alone at midnight. Someone else is there.
🔥 Annotation Heatmap
A vertical strip on the right edge of the reader glows amber and red where annotations cluster. The hotter the page, the more the club had feelings about it. Click any segment to jump there. Before the meeting, this is how you know where the real conversation will be.
💬 Discord-Style Forum
Five default channels — #general, #chapter-notes, #hot-takes, #spoilers, #next-book — with real-time messaging, emoji reactions, reply threading, and grouped messages. Admins can add channels. Everything updates live via Supabase Realtime subscriptions.
✨ AI Discussion Guide
Before the monthly meeting, any member can generate a discussion guide. Claude reads every annotation the club has made, every hot take posted in the forum, and every question left on the pages — and synthesises them into a guide built around your club's actual conversations. It surfaces disagreements you did not know you had. It quotes members by name. It builds a meeting agenda with time splits. It is not a generic list of questions from the internet. It is a mirror held up to your club's collective mind.
🕸️ Character Relationship Graph
An interactive D3 force-directed graph maps the characters in the book — who they are, how they relate to each other, and which ones your club has been talking about most. Nodes glow when a character is central to your annotations. Click a node to filter the annotation panel to only the passages mentioning them. Drag, zoom, and pan freely.
📊 AI Pace Coach
The admin sets a meeting date. Folio calculates each member's reading pace, compares it to what they need to finish in time, and generates a gentle, warm nudge — the kind a friend would send, not an algorithm. The overview shows who is furthest ahead, who needs a push, and how many days are left. Accountability without shame.
🤫 Whisper Mode
A private annotation layer woven into the main reading experience. Your whispers appear on the page in a softer, muted colour only you can see. When you are ready to share, one click makes them public. It exists because sometimes you need to think before you speak — and that is true in literature as in life.
📜 End-of-Book Capsule
When the admin marks a book complete, Claude generates a personalised newspaper-style recap of the club's entire experience with it — each member's most memorable annotation, the most debated passage, the collective verdict, a list of stats (total annotations, most active page, most-used reaction). It is exportable as a PDF. It is the thing you keep.
📚 Library & Book Nominations
A democratic voting system for the next book — nominate with a title, author, and reason, upvote your favourites. Completed books live in the archive with their capsules intact, readable forever.
Demo
Link to the project - https://folio-azure-zeta.vercel.app/
Creds to join a preset bookclub -
ps, the password and the name of the book club are case-sensitive, so look out for that.
Demo video -
Code
Folio
A collaborative book club web app. Read PDFs together, annotate, discuss in real-time, and get AI-powered insights.
Quick Start
# Install dependencies
npm install
# Copy environment file and fill in your credentials
cp .env.example .env
# Start development server
npm run dev
Environment Variables
Create a .env file with:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_ANTHROPIC_API_KEY=your-anthropic-api-key
Supabase Setup
- Create a new Supabase project
- Run
schema.sqlin the SQL Editor - Create a storage bucket named
pdfs(private) - Enable Realtime on
annotations,messages, andmemberstables
Features
- PDF Reader: Upload and read PDFs together with text selection
- Annotations: Highlight, quote, question, note, and whisper (private)
- Reading Presence: See who's reading nearby pages in real-time
- Heatmap: Visualize annotation density across pages
- Forum: Real-time chat with channels, replies, and reactions
- Library: Nominate and vote on next books, view reading history
-
AI Insights
- Discussion Guide: AI-generated conversation starters…
How I Built It
The honest answer is: I built it the way you build anything for people you love. Quickly, imperfectly, and with complete conviction that it needed to exist.
The Stack
| Layer | Technology |
|---|---|
| Frontend | React 18 + Vite |
| Styling | Pure CSS — no component library, fully custom |
| PDF Rendering | PDF.js (v3.11.174) with text layer for real selection |
| Database | Supabase (PostgreSQL + Realtime subscriptions) |
| File Storage | Supabase Storage (PDF uploads) |
| AI | Anthropic Claude (claude-sonnet-4-20250514) |
| Data Visualisation | D3.js (force-directed character graph) |
| Hosting | Vercel |
The Hard Parts
The annotation system was the first thing I built and the hardest thing to get right. PDFs render onto an HTML <canvas> element, which is just a bitmap — the text in it is not real text, it is pixels. You cannot select pixels. The solution is PDF.js's text layer: a transparent <div> that sits pixel-perfectly over the canvas, populated with invisible but real DOM text nodes that match the PDF's layout exactly. When you drag to select, you are selecting real text. When you let go, the tooltip appears. It sounds simple. It took longer than I will admit.
The presence system was the most rewarding to build. Every ten seconds, each member's current page is written to Supabase. Every eight seconds, every other member's position is read back. The floating avatars, the pulsing rings, the proximity labels — all of it emerges from two small database writes happening on a loop. It is the feature that makes people go quiet when they see it working.
The AI integration is the part I am most proud of. It would have been easy to bolt Claude on as a chatbot in the corner. Instead, every AI feature in Folio is built around the club's own data. The discussion guide quotes your members. The pace coach knows your meeting date. The capsule knows who annotated the most and which page broke everyone's heart. Claude is not a feature. It is the club's memory.
The Design
I wanted Folio to feel like the inside of a very good independent bookshop — warm, considered, a little old-fashioned in the best way. Cream backgrounds. Forest green accents. Playfair Display for headings. EB Garamond for body text. No border-radius anywhere — everything is structured, editorial, intentional. No gradients, no glassmorphism, no purple. Just paper and ink and the feeling that something worth reading lives here.
Why This, Why Now
Book clubs are one of the oldest forms of intentional community we have. Women have been gathering around books for centuries — not just to read, but to think out loud in a space that was theirs. Folio is built on the belief that that impulse is not old-fashioned. It is essential. It just needed the technology to catch up.
Broadening Sensibilities showed me what was possible. A group of women in two countries that the news would have us believe cannot coexist — reading the same books, feeling the same things, finding each other on the same page. Literally.
That is the community I built this for. That is the problem I wanted to solve. That is the thing I hope Folio holds.
The centre of every poem is this: I have loved you. I have had to deal with that.
— Salma Deera, Letters from Medea
P.S, the comments are open for feedback
Top comments (2)
If anyone wants to join my here is the password and group,
GROUP: DEV READERS
PASSWORD: DEV4EVER
Also, great work! I love this idea!
You’ve built something genuinely useful here. Having the debates tied directly to the text makes a lot of sense. Really proud of the work you've put into this!
A solid concept especially for study groups and book clubs.