Example: Simple Messenger

This repository demonstrates some essential concept of the UIX framework such as pointers and Web components using the example of a simple messenger.

The repository includes persistent data storage and implements front-end rendering.

Installation

1. Install the UIX command line tool following the Getting Started guide in our documentation.

2. Clone this repository to your local machine:

   $ git clone https://github.com/unyt-org/example-simple-messenger.git

3. Run the project local

   $ uix --port 8000

4. Navigate to your favourite web browser and open http://localhost:8000 to see everything in action.

Structure

This diagram outlines the UIX default project structure. We split our code base in back-end, front-end, and commons folder.

.
└── example-simple-messenger/
    ├── backend/
    │   ├── .dx                 // Config file for deployment
    │   └── entrypoint.tsx      // Back-end entrypoint
    ├── common/
    │   └── components/
    │       ├── ChatPage.scss   // Chat style declaration
    │       ├── ChatPage.tsx    // Chat component
    │       ├── Overview.scss   // Overview style declaration
    │       └── Overview.tsx    // Overview component
    ├── frontend/
    │   ├── entrypoint.css      // Front-end style declaration
    │   └── entrypoint.tsx      // Front-end entrypoint
    ├── app.dx                  // Endpoint config file
    └── deno.json               // Deno config file

Features

• Multiple chat rooms
• Synchronized messages

Preview

Explanation

Concept of Pointers

In UIX, Pointers are a fundamental concept for managing shared data across different parts of your application. Pointers allow different components or endpoints to access and modify the same data. In the context of our chat application, a Pointer could represent a single message.

Pointers are synchronized over the Supranet, based on our powerful DATEX networking protocol that ensures real-time updates and consistency across endpoints. When one user sends a message, the changes are propagated to the recipient through the Supranet, keeping the data in sync.

Persistent Storage of Pointer Data

To provide a seamless experience, our messenger app also demonstrates how to persistently store Pointer data. This means that even if the application is restarted, the chat histories are up-to-date.

---

_{© unyt 2024 • unyt.org}