{"id":21244426,"url":"https://github.com/unyt-org/example-shared-list","last_synced_at":"2025-06-19T22:08:36.745Z","repository":{"id":195054018,"uuid":"691161699","full_name":"unyt-org/example-shared-list","owner":"unyt-org","description":"A shared list based on UIX and DATEX","archived":false,"fork":false,"pushed_at":"2025-04-08T12:41:04.000Z","size":2505,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T23:54:31.183Z","etag":null,"topics":["datex","shopping-list","synchronization","typescript","uix","uix-example","unyt"],"latest_commit_sha":null,"homepage":"https://shared-list.example.unyt.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unyt-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["unyt-org"],"patreon":"unyt","custom":["https://unyt.org/donate"]}},"created_at":"2023-09-13T16:11:00.000Z","updated_at":"2025-04-08T12:41:08.000Z","dependencies_parsed_at":"2023-09-16T10:27:36.955Z","dependency_job_id":"f99e8ac3-606c-4e85-9a5a-7c05182011be","html_url":"https://github.com/unyt-org/example-shared-list","commit_stats":null,"previous_names":["unyt-org/example-shared-list"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/unyt-org/example-shared-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unyt-org%2Fexample-shared-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unyt-org%2Fexample-shared-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unyt-org%2Fexample-shared-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unyt-org%2Fexample-shared-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unyt-org","download_url":"https://codeload.github.com/unyt-org/example-shared-list/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unyt-org%2Fexample-shared-list/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260838649,"owners_count":23070609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datex","shopping-list","synchronization","typescript","uix","uix-example","unyt"],"created_at":"2024-11-21T01:25:17.455Z","updated_at":"2025-06-19T22:08:31.731Z","avatar_url":"https://github.com/unyt-org.png","language":"TypeScript","funding_links":["https://github.com/sponsors/unyt-org","https://patreon.com/unyt","https://unyt.org/donate"],"categories":[],"sub_categories":[],"readme":"# Example: Shared Shopping List\n\nThis repository demonstrates some essential concept of the\n[UIX](https://uix.unyt.org) framework such as\n[pointers](https://unyt.org/glossary#pointer),\n[SSR](https://unyt.org/glossary#ssr) and\n[Web components](https://unyt.org/glossary#web-components) using the example of\na **shared shopping list**.\n\nThe repository includes persistent data storage and implements both\n[front-end](https://unyt.org/glossary#front-end) and\n[back-end](https://unyt.org/glossary#back-end) rendering with\n[hydration](https://unyt.org/glossary#hydration).\n\n## Installation\n\n1. Install the **UIX command line tool** following the\n   [Getting Started](https://docs.unyt.org/manual/uix/getting-started#the-uix-command-line-tool)\n   guide in our documentation.\n\n2. Clone this repository to your local machine:\n\n   ```bash\n   $ git clone https://github.com/unyt-org/example-shared-list.git\n   $ cd example-shared-list\n   ```\n3. Run the project local\n   ```bash\n   $ uix --port 8000\n   ```\n4. Navigate to your favourite web browser and open http://localhost:8000 to see\n   everything in action.\n\n## Structure\n\nThis diagram outlines the project structure. We split our code base\nin a [backend](https://unyt.org/glossary#back-end),\n[frontend](https://unyt.org/glossary#front-end), and common folder.\n\n```\n.\n└── example-shared-list/\n    ├── backend/\n    │   ├── .dx                 // Config file for deployment\n    │   ├── lists.eternal.ts    // Persistent lists storage\n    │   ├── lists.ts            // List manager + types\n    │   └── entrypoint.tsx      // Back-end entrypoint\n    ├── common/\n    │   ├── List.scss           // List component styles\n    │   ├── List.tsx            // List component\n    │   ├── Overview.scss       // Overview component styles\n    │   └── Overview.tsx        // Overview component\n    ├── frontend/\n    │   └── entrypoint.tsx      // Front-end entrypoint\n    ├── app.dx                  // Endpoint config file\n    └── deno.json               // Deno config file\n```\n\n## Features\n\n- Support for multiple synced lists\n- Items can be checked/unchecked\n- Items contain name, amount and unit\n- Items can be added and removed\n- Unchecked items can be auto-removed\n\n## Preview\n\n\u003cimg src=\".github/screenshot.png\" width=\"400\"\u003e\n\n## Explanation\n\n### Concept of Pointers\n\nIn [UIX](https://uix.unyt.org), [Pointers](https://unyt.org/glossary#pointer)\nare a fundamental concept for managing shared data across different parts of\nyour application. Pointers allow different components or\n[endpoints](https://unyt.org/glossary#endpoint) to access and modify the same\ndata. In the context of our shared shopping list, a Pointer could represent the\nlist of items to buy.\n\nPointers are synchronized over the\n[Supranet](https://unyt.org/glossary#supranet), based on our powerful\n[DATEX](https://datex.unyt.org) networking protocol that ensures real-time\nupdates and consistency across endpoints. When one user adds or removes an item\nfrom the shopping list, the changes are propagated to all connected endpoints\nthrough the Supranet, keeping the data in sync.\n\n### Persistent Storage of Pointer Data\n\nTo provide a seamless experience, our shared shopping list app also demonstrates\nhow to persistently store Pointer data. This means that even if the application\nis restarted, the shopping list will be up-to-date.\n\n### Front-End Rendering and Hydration\n\nUIX supports both front-end and back-end rendering with hydration. Front-end\nrendering allows us to create a dynamic and interactive user interface on the\nclient side. When a user interacts with the shopping list (e.g., adds or removes\nitems), the changes are reflected in real-time.\n\nHydration is the process of converting the initial HTML content sent from the\nserver into a fully interactive UI on the client side. This ensures that the app\nis ready for user interactions as soon as it loads.\n\n---\n\n\u003csub\u003e\u0026copy; unyt 2024 • [unyt.org](https://unyt.org)\u003c/sub\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funyt-org%2Fexample-shared-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funyt-org%2Fexample-shared-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funyt-org%2Fexample-shared-list/lists"}