LiveViewExampleUsage

This is my attempt to learn LiveView by building a web app component.

Quick Start

• Elixir version 1.12.2; OTP version 23.3.2
• Install dependencies with mix deps.get
• Create and migrate your database with mix ecto.setup
• Install Node.js dependencies with npm install inside the assets directory
• Start Phoenix endpoint with mix phx.server or app inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Setup

Requirements

• Elixir 1.12.2
• Phoenix 1.15.9
• Nodejs 12.13.0

Pagination (Infinite Scroll)

We used photos from Unsplash website via Unsplash API. We need to setup from here.

1. Create Unsplash application in order to use Unsplash API
2. Add this to config/dev.exs:

config :live_view_example_usage, :unsplash_credentials,
  client_id: <CLIENT_ID>,
  client_secret: <CLIENT_SECRET>

3. Run iex- S mix phx.server

Chat

Example Usage

• Pagination (Infinite Scroll)
• Chat
• OTP Login (WIP)

Live Demo (No pun intended)

I deployed the demo to fly.io. The deployment process is surprisingly easy.

Demo

Observer

Resources

• Phoenix Framework
• ElixirConf 2020 - Patrick Thompson - Liven up your LiveViews (even further) with AlpineJS
• Adding Tailwind CSS to Phoenix 1.4 and 1.5
• Communicating between LiveViews on the same page
• Building a Distributed Turn-Based Game System in Elixir
• Deploying Elixir application in fly.io
• Connecting Observer in Production

Credits

• Happy\ Bunch\ -\ Astronaut.png image is from blush.design check it out! they have awesome illustrations!

TODO

• Upgrade to Phoenix 1.6