Listing Tutorials

Published 22 Oct - 2021

Step by step guide to deploy Phoenix 1.6 with LiveView and Tailwind on Render

deployrenderliveview
Sooner or later there comes a time when you want to deploy your Phoenix application. Render is a great PAAS service that offer easy deplyment for a ..

Published 18 Oct - 2021

Building a datatable in Phoenix LiveView

liveviewdatatablesortingpagination
To display a static table on webpage that contains a lot of data is a pretty bad user experience. There are popular javascript libraries that implem..

Published 13 May - 2021

How to create a custom select with Alpine JS and Phoenix LiveView

liveviewformsalpinejs
In this tutorial, I want to go through how to build a custom select field that is used in Tailwind UI. And I will build it with Alpine JS and Phoeni..

Published 04 May - 2021

How to combine Phoenix LiveView with Alpine.js

tailwindphoenixliveviewalpinejs
No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..

Published 26 Dec - 2020 - Updated 01 Oct - 2021

Bootstrap 5 and Phoenix LiveView

modalesbuildphoenix-1.6bootstrapformsliveview
This tutorial is updated for Phoenix 1.6 with Esbuild Even though a large part of the Phoenix community seem to embrace Tailwind, there are still a..

Published 23 Dec - 2020

Getting Started with Phoenix and LiveView

liveviewphoenix
This guide to getting started with Phoenix covers getting up and running with Elixir and Phoenix. This is a direct conversion of the Getting started..

Published 09 Nov - 2020

Add bulk actions in Phoenix LiveView

bulktableliveview
In this tutorial, I have a list of products. One common feature for a table of records is to perform some sort of bulk actions. As an example in thi..

Published 23 Sep - 2020

Setup Stripe with Phoenix LiveView

formspaymentsstripeliveview
In this tutorial, I will go through how I setup Stripe payments with Phoenix and LiveView to make your app prepared for accepting payments. The tuto..

Published 02 Sep - 2020

Table sorting with Ecto and LiveView

sortingliveviewecto
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

ectoliveviewfuzzyseachsearch
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, ..