Phoenix demo reference

The Phoenix demo source is on GitHub. fly launch will provide a Dockerfile and a fly.toml config file.

How the pieces are put together:

• The original web-dictaphone app is spread throughout your application:
  • assets/js/dictaphone.js contains the JavaScript.
  • assets/css/dictaphone.css contains the stylesheets.
  • priv/static/favicon.ico contains your image
  • lib/dictaphone_web/live/dictaphone.html.heex contains the HTML
• lib/dictaphone_web/live/dictaphone.ex and lib/dictaphone_web/controllers/audio_controller.ex contain the server implementation.
• Ecto.Adapters.Postgres is used to access PostgreSQL. Access to the database is through the DATABASE_URL secret.
• ExAws.S3 is used to access Tigris. The following secrets are used to establish the connection: AWS_ACCESS_KEY_ID, AWS_ENDPOINT_URL_S3, AWS_REGION, AWS_SECRET_ACCESS_KEY, and BUCKET_NAME.
• Phoenix.LiveView module is used for WebSocket support.
• Phoenix.PubSub.Redis is used to access Redis. The REDIS_URL secret is used to access the database.

Key points of logic:

• lib/dictaphone_web/live/dictaphone.html.heex contains the home page.
• assets/js/dictaphone.js has been modified to:
  • upload clips using the Fetch API
  • use Click Events for delete
  • use Client Hooks for rename actions the WebSocket code, and delegates to Next.js to render the rest.
• lib/dictaphone_web/live/dictaphone.ex contains the interface to Redis. It is split out from the server to avoid circular dependencies.
• app/audio/[name]/route.js contains the logic to respond to events from both browser clients, and redis pubsub.
• lib/dictaphone_web/controllers/audio_controller.ex contains the server access to GET and PUT audio clips.
• When the WHISPER_URL secret is set, PUT requests will cause the audio clips to be passed to the Whisper server, and responses will be used to update the PostgreSQL database. The code for this is in lib/dictaphone_web/controllers/audio_controller.ex.