Ever got one of those 3am lightbulb moments?
A friend and I used to read books back then, but we were in different parts of the world, in different timezones. We never actually got to read together at the same time—it was always reading till a set point and catching up later.
So one night, I thought: What if I built a tool where both of us could read and talk about it at the same time?
I did my research at 3am and set out to build it first thing in the morning. From 6am, working straight through until 2am the next day, I created a working functional web app. This was my first real introduction to Node.js, and I had to learn it on the fly to implement a synchronized PDF reader with real-time chat.
Years later, I revisited and improved the project—and here it is.
This web application allows multiple users to:
- Read PDFs together in real-time - synchronized page navigation across all connected clients
- Chat while reading - discuss the content as you go through it together
- Stay synchronized - when one person turns a page, everyone sees the same page
Perfect for book clubs, study groups, remote reading sessions, or just reading with friends across the world.
- 📖 Real-time PDF viewing with synchronized page turning
- 💬 Integrated chat system for discussions
- 🔄 WebSocket-based synchronization
- 🎨 Clean, modern interface
- 📱 Responsive design
- � Progressive Web App (PWA) - Install on your device and use like a native app
- �🚀 Lightweight and fast
- Backend: Node.js + Express
- WebSockets: ws library for real-time communication
- PDF Rendering: PDF.js
- Frontend: Vanilla JavaScript, HTML5, CSS3
Try the app here: Click to view Live App
(Note: It may take a minute to wake up as it is hosted on a free tier)
If you want to run this code on your own machine:
-
Clone the repository
git clone https://github.com/your-username/Shared-Reading-Tool-Render.git cd Shared-Reading-Tool-Render -
Install dependencies
npm install
-
Start the server
npm start
-
Open in browser
http://localhost:8080
- Open the Live Demo link.
- Install as an app (optional): On mobile, tap "Add to Home Screen" or on desktop, look for the install icon in the address bar.
- Share the URL with a friend (or open it in a second tab).
- Upload a PDF file.
- All connected users will see the same PDF instantly!
- Use the chat panel to discuss while you read.
This app works as a Progressive Web App (PWA), which means you can install it on your device:
-
On Mobile (iOS/Android):
- Open the app in Safari (iOS) or Chrome (Android)
- Tap the share button and select "Add to Home Screen"
- The app will open fullscreen without the browser's URL bar!
-
On Desktop:
- Look for the install icon (⊕) in your browser's address bar
- Click it to install the app on your computer
- Launch it like any other app!
The application uses WebSockets to create a persistent connection between all connected clients. When any action occurs (page turn, chat message, PDF upload), it's broadcast to all other connected users, keeping everyone in sync.
Client 1 ──────┐
├──→ WebSocket Server ──→ Broadcasts to all clients
Client 2 ──────┤
│
Client 3 ──────┘
Shared-Reading-Tool-Render/
├── server.js # Node.js server with WebSocket support
├── package.json # Project dependencies
├── public/
│ ├── index.html # Main application interface
│ ├── app.js # Client-side JavaScript
│ ├── pdf.mjs # PDF.js library
│ └── pdf.worker.mjs # PDF.js web worker
The server runs on port 8080 by default. You can change this by setting the PORT environment variable:
PORT=3000 npm start- User authentication and rooms
- Persistent chat history
- Annotations and highlights
- Support for multiple document formats
- Video/voice chat integration
- Progress tracking and bookmarks
ISC
Built from a 3am idea to a functional reality in 20 hours. Sometimes the best projects come from simple problems that need solving. ✨