Listing Tutorials

Published 02 Sep - 2020

Table sorting with Ecto and LiveView

A very common or even mandatory feature in e-commerce stores is the ability to sort a list of products by attributes. This is easy enough and a good..

Published 31 Aug - 2020

Fuzzy find with Ecto in Phoenix LiveView

Fuzzy find is both a simple and a complex thing. Even though though it's simple to implement, its hard to get right from a UX perspective. Luckily, ..

Published 07 Aug - 2020

Phoenix Presence with Phoenix LiveView

A lot of apps have some sort of notification on if users are online or not. Phoenix makes it easy to build that with the built in Phoenix Presence. ..

Published 11 Jul - 2020 - Updated 22 May - 2021

Create a reusable modal with LiveView Component

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..

Published 19 Mar - 2020 - Updated 01 May - 2020

Updating LiveView Spring 2020 ed

Due to the hard work of the Phoenix LiveView team, there has been a lot of work done. However, there have been some breaking changes. For example ..

Published 09 Mar - 2020 - Updated 01 May - 2020

Setup a supervised background task in Phoenix

There are times when you need to spawn a background process for a longer running task. And especially if you are interacting with an external system..

Published 03 Mar - 2020 - Updated 01 May - 2020

Share LiveView state between tabs

Each LiveView on each tab spawns a separate state. That might or might not be the desired behaviour. In this tutorial, I am going to share state bet..

Published 21 Feb - 2020 - Updated 01 May - 2020

Create a Calendar in Phoenix LiveView

In this tutorial I am creating a simple calendar in Phoenix LiveView. The calendar should be able to switch month, highlight current day and select ..

Published 15 Feb - 2020 - Updated 01 May - 2020

Create ghost loading cards in Phoenix LiveView

Unless you already didn't know, when a LieView component is mounted on a page, it runs the mount/2 function twice. One when the page is rendered fro..

Published 14 Feb - 2020 - Updated 01 May - 2020

Improving LiveView UX with Phoenix Channels - Tagging part 3

In the previous tutorial I set up the tagging interface. It had however a small issue. If I added a tag, it didnt really refocus on the input so I n..