Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/unyt-org/example-shared-list

A shared list based on UIX and DATEX
https://github.com/unyt-org/example-shared-list

datex shopping-list synchronization typescript uix uix-example unyt

Last synced: 2 months ago
JSON representation

A shared list based on UIX and DATEX

Host: GitHub
URL: https://github.com/unyt-org/example-shared-list
Owner: unyt-org
License: mit
Created: 2023-09-13T16:11:00.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-10-16T18:11:38.000Z (3 months ago)
Last Synced: 2024-10-18T12:17:53.477Z (3 months ago)
Topics: datex, shopping-list, synchronization, typescript, uix, uix-example, unyt
Language: TypeScript
Homepage: https://shared-list.example.unyt.org
Size: 2.38 MB
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Example: Shared Shopping List

This repository demonstrates some essential concept of the
[UIX](https://uix.unyt.org) framework such as
[pointers](https://unyt.org/glossary#pointer),
[SSR](https://unyt.org/glossary#ssr) and
[Web components](https://unyt.org/glossary#web-components) using the example of
a **shared shopping list**.

The repository includes persistent data storage and implements both
[front-end](https://unyt.org/glossary#front-end) and
[back-end](https://unyt.org/glossary#back-end) rendering with
[hydration](https://unyt.org/glossary#hydration).

## Installation

1. Install the **UIX command line tool** following the
[Getting Started](https://docs.unyt.org/manual/uix/getting-started#the-uix-command-line-tool)
guide in our documentation.

2. Clone this repository to your local machine:

```bash
$ git clone https://github.com/unyt-org/example-shared-list.git
$ cd example-shared-list
```
3. Run the project local
```bash
$ 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](https://unyt.org/glossary#back-end),
[frontend](https://unyt.org/glossary#front-end), 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](https://uix.unyt.org), [Pointers](https://unyt.org/glossary#pointer)
are a fundamental concept for managing shared data across different parts of
your application. Pointers allow different components or
[endpoints](https://unyt.org/glossary#endpoint) 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](https://unyt.org/glossary#supranet), based on our powerful
[DATEX](https://datex.unyt.org) 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.

---