This to-do app is a demo of an installable Phoenix Progressive Web App (PWA) that can sync real-time across multiple devices while also being able to work locally offline.
video_demo.mov
A live demo of the app can be found here.
You can run this app locally by following the steps below after cloning the repo.
- Install the Phoenix dependencies.
mix deps.get- Install the Node.js dependencies. The
--prefix assetsis required when running the command from the root directory in order to install the dependencies in theassetsdirectory.
npm install --prefix assets- Create the database.
mix ecto.create- Start the Phoenix server.
mix phx.serverTo deploy this app to Fly.io, run the following commands.
Note: You will need to have an account with Fly and
flyctl installed.
- Remove the
fly.tomlfile. A new one will be created when you runfly launch.
rm fly.toml- Initialize and deploy the project. Fly will automatically detect the app type and set up the necessary configuration. You can tweak the settings or stick with the defaults, but make sure that a Postgres database is included in the configuration settings.
fly launch- Phoenix LiveView, PubSub, and Ecto/PostgreSQL for real-time syncing and data persistence.
- Svelte (via LiveSvelte) for the frontend UI and state management.
- Service Workers, Web Storage, and IndexedDB (via y-indexeddb) for offline support.
- CRDTs (via Yjs) to resolve conflicts between distributed app states.
- Wout De Puysseleir - LiveSvelte - Render Svelte directly into Phoenix LiveView with E2E reactivity.
- Ryan Cooke - Ryan Cooke - E2E Reactivity - using Svelte with Phoenix LiveView
- Daniils Petrovs - SvelteKit: From landing page to offline PWAs
Created by Tony Dang. Please feel free send any questions or feedback to tony@tonydang.blog.