# Collaborative Editor

## <mark style="color:green;">Description</mark>&#x20;

Inspired by the [Obsidian note-taking app](https://obsidian.md/) and [Gitbook](https://www.gitbook.com/), this project is a React-based text-editing app with a focus on collaboration and mind mapping. A graph-editing tool creates a schematic representation of a note stucture, which can be used as a visual representation of anything graph-like from roadmaps to tutorials, whose topics link from one to node to another.

## <mark style="color:green;">Front-end Features</mark>

### Text-editor

* Standard text-formatting (*font color/size/style, headings, highlight, alignment, etc.*)
* Tables / Cards / Columns /Task-list
* Images
* Code Blocks
* Slash-commands
* Collaboration via [Yjs](https://github.com/yjs/yjs) and webRTC connection bindings

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FTrxH2bJHn2FwpriN6B4i%2Fimage.png?alt=media&#x26;token=a4cfe5af-5898-4be2-8f74-45895c76b14b" alt=""><figcaption></figcaption></figure>

### Multi-media: AI front-end

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FvgzIxcu18FRIebJmZeEL%2Fimage.png?alt=media&#x26;token=7e85a696-cafd-4bc7-9c4e-0bc277750884" alt=""><figcaption><p>via Google Gemini API</p></figcaption></figure>

### Multi-media: Drawing Editor

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2F1jGXrpTLIAR5fVVmF3v5%2Fimage.png?alt=media&#x26;token=56cf8bb9-4a07-47f0-be34-574a21b2890a" alt=""><figcaption></figcaption></figure>

### Multi-media: Graph Editor

<figure><img src="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2F3ULMPuSSAZK0CJClZzf5%2Fimage.png?alt=media&#x26;token=4c11bf8d-d84c-462d-b90f-09f5242a093b" alt=""><figcaption></figcaption></figure>

## <mark style="color:green;">Tech Stack</mark>

### Backend

The server is divided into several[ Cloudflare Workers](https://developers.cloudflare.com/workers/), and depending on the complexity  of the serverless function, contains an [Elysia.js ](https://elysiajs.com/)server framework. Data is saved and fetched from three locations, namely:

* MongoDB - comments and emoji reactions, fetched via REST API
* [Cloudflare KV](https://developers.cloudflare.com/kv/) - user generated files stored as JSON, and user metadata
* [Cloudflare R2](https://developers.cloudflare.com/r2/) - for images

Security is via JSON web tokens stored in the browser cookie. Collaboration via Yjs and webRTC peer-to-peer networking.

### Frontend

Built with React and Remix in single-page application mode. [Jotai ](https://jotai.org/)for state management. [shadcn ](https://ui.shadcn.com/)and Tailwind for theming. Also utilized the following libraries, listed with their respective components:

* [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) - graph visualization
* [Tiptap ](https://tiptap.dev/docs)- text editing
* [Excalidraw ](https://github.com/excalidraw/excalidraw)- drawing component

The Pet Hotel Web App is a comprehensive digital solution designed to streamline operations for pet boarding facilities. It is structured into three core components, tailored to meet the needs of both end-users and administrators with a solid backend foundation for robust data management and application logic.

1. **Client-Facing Website**: This front-end interface is designed for pet owners, offering them a seamless experience in booking accommodations, checking availability, and viewing the status of their pets. It provides intuitive navigation and real-time updates, enhancing customer interaction and satisfaction.
2. **Administrator's Website**: Dedicated solely to facility management, this interface allows administrators to manage bookings, update pet and room information, adjust pricing, and customize service offerings. It includes functionality for reporting and analytics, enabling administrators to make informed decisions based on current business metrics.
3. **Backend**: The backbone of the application, the backend is responsible for handling business logic, database management, and server-side data processing. It ensures data integrity and security, processes transactions, and communicates between the web interfaces and the database.

{% hint style="info" %}
Series 3 of 4 in the Featured Collection.
{% endhint %}

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td><strong>BCC Member's App</strong> (<em>Backend</em>)</td><td></td><td><a href="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FIqDdcm7owu70h8UOEWE4%2Fgirl%20copy%20-%20Copy.jpg?alt=media&#x26;token=f3d40fea-6501-4f2a-a9c1-fb870c34cd2b">girl copy - Copy.jpg</a></td><td><a href="../backend/bcc-members-app">bcc-members-app</a></td></tr><tr><td></td><td><strong>Crisis Simulation Wargame</strong> (<em>Fullstack</em>)</td><td></td><td><a href="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FThTSYY7PHCkSZBGKBWA8%2F124573931_3481037561978003_997671132992425009_n.jpg?alt=media&#x26;token=c49e2988-53a0-4544-bfbb-7296c5b2db8d">124573931_3481037561978003_997671132992425009_n.jpg</a></td><td><a href="../fullstack/crisis-simulation-wargame">crisis-simulation-wargame</a></td></tr><tr><td></td><td><mark style="background-color:green;"><strong>Collaborative Editor</strong></mark></td><td></td><td><a href="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2Frcehd92InKnA293T8ItK%2Fgorl%20-%20Copy.jpg?alt=media&#x26;token=bdb76105-b883-4803-bb32-280329b28656">gorl - Copy.jpg</a></td><td><a href="collaborative-editor">collaborative-editor</a></td></tr><tr><td></td><td><strong>Pet Hotel System</strong> (<em>Full Stack</em>)</td><td></td><td><a href="https://1781060323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG5iv4D9hl5TXTz4i7Nq8%2Fuploads%2FBtmRwnJdObmTZTm0YbCU%2Fpipipipi.jpg?alt=media&#x26;token=29909dee-47f7-4860-8a1a-37f962bddc5f">pipipipi.jpg</a></td><td><a href="../fullstack/pet-hotel-system">pet-hotel-system</a></td></tr></tbody></table>