Listing tutorials

Published 21 Feb

Create a Calendar in Phoenix LiveView

calendarliveviewphoenix

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

Go to tutorial

Published 15 Feb

Create ghost loading cards in Phoenix LiveView

ectoliveviewphoenix

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

Go to tutorial

Published 14 Feb

Improving LiveView UX with Phoenix Channels - Tagging part 3

channelsformsliveviewphoenixtagging

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

Go to tutorial

Published 13 Feb

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

formsliveviewphoenixtaggingtailwindtypeahead

In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..

Go to tutorial

Published 11 Feb

Add Tags with Ecto has_many, through in Phoenix - Tagging part 1

belongs_toectohas_manyphoenix

I want to add tags to products. And as usual there are a situation where a product can have many tags and a tag can belong to many products. Howeve..

Go to tutorial

Published 10 Feb

Add an use a JSONB field in Phoenix and Ecto

ectojsonbphoenixpostgresql

PostgreSQL has native support for objects stored as JSON as actually binary JSON (or JSONB). With JSONB format, you can add index do the column for ..

Go to tutorial

Published 05 Feb

Nested model forms with Phoenix LiveView

formsliveviewphoenix

I my last article, I set up a relationship between products and variants. But what I didn't go through was to setup a form where you can manage the ..

Go to tutorial

Published 03 Feb

Setup a has_many / belongs_to in Phoenix

belongs_toectohas_manyphoenix

Something I do in EVERY project is to setup some sort of relation between resources. And even though Phoenix comes with generators for migrations an..

Go to tutorial

Published 01 Feb

Create a Bootstrap Like Modal with Tailwind and Alpine.js

alpinejsbootstrapmodaltailwind

In certain scenarios, it doesnt really make sense to use LiveView. That can be toggling dropdowns, tabs, accordions and opening modals. There is a g..

Go to tutorial

Published 29 Jan

Send events from JS to a LiveView component

csrfjavascriptliveviewphoenix

Let say you app uses a javascript library that needs to interact with your app. For example a LiveView component. That is possible with the built in..

Go to tutorial