The Pragmatic Studio

LiveView Course Update #1: Filtering and Function Components

February 16, 2023

We’re back with an update about our Phoenix LiveView course! 🔥

Here’s what’s new this week…

Filtering

How would you build a LiveView that filters data stored in an Ecto repo based on dynamically-changing filter criteria? The user ticks a box or changes an option and boom! the page updates with results.

We show you exactly how to build it, and you can easily adapt this project to suit your own filtering needs. We finally put something in the database, and we tossed in a hot performance tip!

Function Components

Components, components, components! Once you know how to make them, you’ll find lots of opportunities to restructure LiveViews into reusable, easy-to-maintain components. We make a function component with declarative assigns and slots, and also extract a few function components from an existing LiveView to improve the overall design.

Using Tailwind CSS with Phoenix 1.7

Some of you have asked how we set up Tailwind CSS in the Phoenix 1.7 application in the course. We heard ya. 👍

Check out our Using Tailwind CSS in Phoenix 1.7 tutorial for all the details. We also added a link to this tutorial in the course notes, for future reference.

How do I get the new course modules?

If you purchased the previous Pro version of the course, go to your account dashboard and click the big green “REDEEM” button to get the new Pro course for free. Or, if you’ve already done that, just head over to the course and you’ll find the new modules ready for you!

Don’t yet own the Pro course? What are you waiting for? You can do amazing things with LiveView! And there’s still time to get the Pro course at the early access price:

We hope you’re enjoying the course so far! 😃