Example: Shared Shopping List

This repository demonstrates some essential concept of the UIX framework such as pointers, SSR and Web components using the example of a shared shopping list.

The repository includes persistent data storage and implements both front-end and back-end rendering with hydration.

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-shared-list.git
   $ cd example-shared-list

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 project structure. We split our code base in a backend, frontend, and common folder.

.
└── example-shared-list/
    ├── backend/
    │   ├── .dx                 // Config file for deployment
    │   ├── lists.eternal.ts    // Persistent lists storage
    │   ├── lists.ts            // List manager + types
    │   └── entrypoint.tsx      // Back-end entrypoint
    ├── common/
    │   ├── List.scss           // List component styles
    │   ├── List.tsx            // List component
    │   ├── Overview.scss       // Overview component styles
    │   └── Overview.tsx        // Overview component
    ├── frontend/
    │   └── entrypoint.tsx      // Front-end entrypoint
    ├── app.dx                  // Endpoint config file
    └── deno.json               // Deno config file

Features

• Support for multiple synced lists
• Items can be checked/unchecked
• Items contain name, amount and unit
• Items can be added and removed
• Unchecked items can be auto-removed

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 shared shopping list, a Pointer could represent the list of items to buy.

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 adds or removes an item from the shopping list, the changes are propagated to all connected endpoints through the Supranet, keeping the data in sync.

Persistent Storage of Pointer Data

To provide a seamless experience, our shared shopping list app also demonstrates how to persistently store Pointer data. This means that even if the application is restarted, the shopping list will be up-to-date.

Front-End Rendering and Hydration

UIX supports both front-end and back-end rendering with hydration. Front-end rendering allows us to create a dynamic and interactive user interface on the client side. When a user interacts with the shopping list (e.g., adds or removes items), the changes are reflected in real-time.

Hydration is the process of converting the initial HTML content sent from the server into a fully interactive UI on the client side. This ensures that the app is ready for user interactions as soon as it loads.

---

_{© unyt 2024 • unyt.org}