🌏 Project URLβ†—
https://8b9029f3-8aff-41f0-91b2-a80e9f2e9e52-00-2qs0wrtkxh7ql.worf.replit.dev/
🐈 Githubβ†—
https://github.com/ekkezia/your-docs
πŸ‘€ Overview

A real-time document editing platform inspired by Google Docs. It aims to create a shared, but 'handicapped' space for digital users, where different user will see different parts of the current document being typed.

πŸ“š Tech Stack
React.js
WebSocket
πŸ–οΈ Description
your-docs

Typing alone...

User must rely on the output from other users to fully see what they are typing. This is because some characters in the text input are almost invisible, allowing users to only partially read the words clearly. Each user is assigned different invisible character indexes. This feature is designed to encourage users to check one another’s interface in order to complete each word, similar to solving a puzzle.


πŸ’‘ Conceptual Framework

Inspired by the lipogram, a literary form that deliberately omits certain letters, this project introduces dynamic, user-dependent omissions. Unlike a fixed lipogram, the missing characters vary according to:

  • The order of user connections to the web socket.
  • The total number of connected users at a given time.

This creates a collaborative reading experience:

  • If User A types β€œI love you,” characters may appear in barely-visible grey.
  • When User B joins, some letters (e.g., first, third, fifth indexes) appear highlighted in blue.
  • Switching back to User A’s tab highlights complementary indexes.

The interface encourages users to interact, share perspectives, and combine their partial views to reconstruct the full message β€” a digital embodiment of collaborative understanding.

duet-docs

Typing as a duo



βš™οΈ Technical Implementation

- Real-time Synchronization: Built using WebSockets, allowing multiple users to receive updates instantaneously.

- Character-level Visibility:

  • Each user is assigned a unique set of visible character indexes.
  • Styling applies opacity or color to differentiate invisible vs. visible characters dynamically.

  • State Management:
    • React (or similar) tracks character positions, visibility states, and active user sessions.
    • Updates propagate via the socket, ensuring each user sees a complementary view of the text.

  • Collaborative Puzzle Logic:
    • Visibility mapping is algorithmically generated based on connection order and user count.
    • Each keystroke updates all connected clients, making partial legibility a shared responsibility.


Bonus Feature

You can change the title, but backwards!

title-your-docs

Typing the title... but backwards



The project reflects on how we perceive and interpret others’ thoughts. Even when working closely with someone, we rarely see their full perspective; our understanding is always mediated by our own narrative.

Your Docs externalizes this experience digitally: the text is never fully visible to a single user, emphasizing dependence, trust, and co-creation. Users must negotiate with one another to piece together meaning β€” much like navigating real-world relationships where understanding is always partial, contingent, and shared.

πŸ“ Notes

Bugs:

◽️ When other users came in, it messes with the textarea input.

◽️ migrate to self deployment with node.js

▫️ Need to migrate the deployment somewhere else because Glitch is no longer around now.

Elizabeth Kezia Widjaja Β© 2026 πŸ™‚