Elixir and Phoenix screencasts

Backpex is a customizable admin panel for Phoenix LiveView applications. In this episode, we’ll learn how to add Backpex to an application and create custom fields and filters.

In this episode, we’ll learn how to implement a drag-and-drop feature that uses Phoenix LiveView. When elements are dragged between lists we’ll update their properties to match the new list.

In this episode, we’ll create a custom notification for when a widget is sold out, allowing us to collect users’ email addresses for restock alerts.

Make your flash messages shine with Flashy. In this episode we’ll update the default flash notifications, to use the Flashy package.

In episode 190, we look at how to configure Petal Components with Phoenix 1.7.

We’ll let people play our game as much as they want! In this episode, we’ll refine the game’s flow and user experience by leveraging Phoenix LiveView to start a new game for users.

Similar to our last episode, here we’ll dynamically update the backgrounds of the keycaps on our game keyboard using JavaScript Hooks.

In this episode, we’ll improve the guess feedback for our game with JavaScript hooks. We’ll focus on updating the background of a guess, to indicate the status of the guess.

In this episode, we’ll update the guess feedback in our game by implementing custom JavaScript hooks and animations.

In this episode we’ll update our game and add feedback for player guesses. We’ll update our LiveView to handle various guess outcomes. We’ll use flash messages to display the results of each guess.

In this episode we update our game, allowing players to submit their guesses. We’ll build functionality to check if the guess is a valid word, comparing it against the game’s solution, and then updating the game’s state accordingly.

In this episode, we update our game to allow players to remove letters from their guesses. This involves updating our KeycapComponent to send events to our LiveView.

In this episode we’ll build the functionality that allows a player to add letters to their guess. We’ll update our LiveView to handle events from the keyboard and use them to update the game grid.

In this episode we’ll start implementing our game logic. We’ll manage player guesses using Schemaless Ecto Changesets. Together we’ll walk through creating a module to handle guess validation and a module to encapsulate game logic.

In this episode we’ll create a keyboard component for our game. Using LiveView LiveComponents, we’ll add a dynamic keyboard to the application, and style it with Tailwind CSS and DaisyUI.

In this episode we’ll build a grid for our game. To do that we’ll create a couple different LiveView components to use for the cells, rows, and grid.

This episode details setting up a Wordle-like game in Phoenix LiveView, covering creating two different database tables, populating them with 5-letter words using the WordList and NimbleCSV packages, and configuring routes and LiveView components.

In this episode we begin creating our game by generating a new Phoenix LiveView application. Then we’ll set up the database, customize layouts with HEEx and Tailwind CSS, and update the router.

Styler is a package that finds issues in your Elixir code and automatically fixes them. In this episode, we’ll explore how it works by adding it to an existing Elixir application.

In this episode, we’ll learn how to use Credo to help us catch inconsistencies and improve our code.

In this episode we’ll explore a way to get lower level control of asynchronous operations in Phoenix LiveView with start_async.

In this episode we’ll fetch data asynchronously using Phoenix LiveView’s assign_async function.

Hammer makes it easy to add rate-limiting to your Elixir Phoenix application.

In this episode we’ll use Plug to restrict access to our JSON API unless the request includes a valid API key.

In this episode we’ll learn how to use Phoenix 1.7 to build a JSON API.

If you’re using components in your application, PhoenixStorybook provides an easy way to add a storybook-like UI for them. In this episode, we’ll learn how to add PhoenixStorybook to an application.

In this episode, we’ll build on what we did in part 1 and create a form that filters our albums using Flop.

Sortable tables with pagination are simple with Flop. In this episode, we’ll use Flop’s components to add pagination and sortable tables to an application.

In this episode, we’re building an application to fetch timezones based on latitude and longitude coordinates using the TzWorld package. Along the way, we’ll use schemaless Ecto changesets in a Phoenix LiveView.

In this episode we explore how to use PostgreSQL range types with Ecto using the EctoRange package.

In this episode we’ll use the HtmlSanitizeEx package to help protect an Elixir application that uses Phoenix against malicious code execution.

Elixir protocols provide a powerful mechanism for polymorphism and code reuse. In this episode, we’ll get an introduction on how to use them.

In this episode we’ll learn how to publish a package to Hex, the package manager for the Erlang ecosystem.

Ecto provides primitive types that handle most cases, however, you’ll occasionally work with data that doesn’t fit with the existing types. For these instances, Ecto provides the Ecto.Type behaviour.

In this episode, we’ll utilize dynamic function calls to build a web-based application that helps people learn Elixir.

LiveView streams make it easy to manage collections of data on the client without keeping resources on the server. In this episode, we’ll rewrite an existing LiveView to use streams.

In this episode we’ll add the Trix rich text editor to an existing Phoenix application.

In this episode we’ll add a dynamic selection field to LiveView using LiveSelect.

In this episode we’ll use Swoosh Gallery to create email previews for our Swoosh mailers.

In this episode we’ll use Swoosh and Phoenix Swoosh to send emails.

There’s a new way to write routes in Phoenix 1.7. In this episode, we’ll re-write some routes using verified routes.

Phoenix 1.7 is packed with many great new features. In this episode upgrade an existing application from Phoenix 1.6 to use 1.7.

Here we’ll add cursor-based pagination to a Phoenix powered API with the Paginator package.

In this episode we’ll use PlugCanonicalHost to redirect all requests from a non-canonical host to the canonical one.

In this episode, we’ll explore how to use multiple layouts in a Phoenix LiveView application.

Paraxial.io is a bot defense service designed for Elixir and Phoenix. In this episode, we’ll learn how to use Paraxial.io to defend against bot attacks.

In this episode, we’ll update our Phoenix LiveView authentication to choose which LiveViews we want to require authentication to access.

Adding authentication to an app that uses LiveView is a little different than a plain old Phoenix app. In this episode, we’ll look at LiveView auth using the on_mount and live_session functions.

Our application has albums associated with genres in a many-to-many association. In this episode, we’ll create a way to filter our albums by their associated genre.

Petal Components make it easy to build beautiful Elixir applications with Tailwind CSS. In this episode, we’ll learn how to use Petal Components in a Phoenix application.

In this episode we’ll take a look at how to use Ecto’s many-to-many associations.

Infinite Scroll is a great way to let users explore content and it’s easy to setup with LiveView. In this episode we’ll update an existing LiveView to use Infinite Scroll.

Need to paginate a lot of data in a LiveView application? In this episode, we’ll do just that and update an existing LiveView to handle pagination.

In this episode we’ll use Exzeitable to quickly add a datatable to an application with full text search, pagination, and automatic refresh

Gigalixir makes it easy to deploy Elixir application. In this episode we’ll use Gigalixir to deploy a Phoenix 1.6 app.

In this episode, we’ll use ChromicPDF to help us generate PDF downloads from our application.

Ready to upgrade your app to Phoenix 1.6? In this episode, we’ll use Chris McCord’s upgrade instructions to upgrade a Phoenix app to version 1.6.

ExMachina makes it easy to create test data for Elixir applications. In this episode we’ll update our existing tests to use ExMachina.

Writing tests can get messy. ExUnit.Callbacks are a great way to keep your test code clean and setup the data your tests need.

In this episode we’ll use Ecto.Enum to help us keep atom values for a field in an Ecto Schema.

In this episode, we’ll get a quick introduction on how to use Phoenix LiveView Uploads. We’ll read the contents of an uploaded CSV file, save it to the database, and then make it viewable from the app.

Surface is a server-side rendering component library built on top of Phoenix LiveView. In this episode, we’ll see how to use Surface to create both stateless and stateful components.

Clustering your Elixir application will help provide redundancy and give it higher availability. In this episode, we’ll learn how to cluster an Elixir application on Gigalixir using libcluster.

Here we have an existing database we need to encrypt. In this episode we’ll learn how to encrypt it with Cloak.

Cloak makes it easy to encrypt data in Elixir applications. Here we’ll use Cloak to encrypt some Ecto database fields.

Love Phoenix LiveView, but haven’t learned about LiveComponents? Then check out this intro. We’ll start by building a Stateless component and refactor it to Stateful component.

In this episode we’re integrating Twilio into a Phoenix LiveView application. When we’re finished users will be able to share their favorite album via text message.

Here we’ll learn how we can use UUIDs as the primary key with Ecto Schemas.

In this episode we’ll add an export button that allow users to download a CSV of album data.

In this episode we’ll update our shopping cart to allow users to add multiple product variations to their shopping cart.

In this episode we’ll see to use Torch to generate admin pages that look great.

Now that we’re using Phx.Gen.Auth to handle authentication, let’s get our email notifications working. We’ll update our app to use the Swoosh package to send the user notification emails generated with Phx.Gen.Auth.

There are many ways to add authentication Phoenix apps. Here we’ll explore the new Phx.Gen.Auth package and how easily it can be used to add authentication to Phoenix apps.

Let’s see how we can introspect Ecto Schemas using the __schema__ function. With it, we’ll be able to dynamically see what fields and associations a given schema has.

Now that we have a Plug.Router application working in development, let’s deploy it. We’ll deploy our app to Heroku.

Plug is a great option for smaller sites that don’t need a database and have limited routes. Here we’ll use Plug.Router to build a simple website that uses EEx to precompile our temples.

In this episode we’ll build on simple authentication by giving users the ability to reset their passwords.

It’s easy to add file uploads to your application with Waffle. Here we’ll learn how to use Waffle to help us upload images for a blog application to Amazon S3.

Make your code more readable by using the @impl attribute to mark what functions are implentations of callbacks.

In this episode, we’ll send events from a Phoenix LiveView JS Hook and broadcast them using Phoenix PubSub to update all subscribed clients in realtime.

Phoenix LiveView provides JS Hooks as a way to integrate LiveView with JavaScript. In this episode, we’ll create a new Phoenix LiveView project and see how we can use a hook to integrate it with a color-picker library.

In this episode we’ll update the default URL structure of a resource in a Phoenix 1.5 application to use SEO friendly slugs.

Gigalixir is a Platform as a Service built for Elixir. In this revised episode we’ll see how easy it is to deploy an application to Gigalixir.

Often when testing Phoenix controllers you’ll need to initialize the session with data. In this episode we’ll learn how to do just that using the Plug.Test module.

Oban is a job processing library that uses Postgres. In this episode we’ll add Oban to an existing Elixir project and use it to move some work to the background.

In this episode we’ll pick up where we left off in #108 and refactor our application to create a process for each user shopping cart. To do this we’ll use DynamicSupervisor and Elixir’s Registry.

In part 2 of this series we’ll add to our existing shopping cart by allowing users to remove items from their existing carts.

There are many ready-made ecommerce solutions, but sometimes you need to write your own. In this episode we’ll start building custom shopping cart functionality into an existing application with OTP.

In this episode we’ll get an introduction to Elixir structs. Great for anyone just getting started with Elixir.

By default, Phoenix doesn’t precompile templates in nested directories. In this episode we’ll see how we can update Phoenix to let us use templates in nested directories.

In this episode we’ll take an existing Elixir Phoenix application and build an Atom feed for it. To build the feed we’ll use the Atomex package.

In this episode we’ll explore one way of mocking external HTTP requests when testing using ExVCR. ExVCR records the actual HTTP request and response and replays it whenever that test runs.

In the final part of this series we’ll use Phoenix Channels to improve the UI so that our coin tracker page updates automatically when a new cryptocurrency price is found.

In part 3 we’ll create a schema for our coin data so that we don’t lose data when we restart our app.

In this episode we’ll build a chat application that has multiple chat rooms. The rooms will be created dynamically from the URL and will use Phoenix Channels to provide realtime functionality.

In part 2 we’ll update our application to allow users to add cryptocurrencies from the UI. Once added, we’ll display the cryptocurrency and update pricing every minute using a GenServer.

In part one of this series we’ll lay the foundation for our application. First we’ll see how we can fetch cryptocurrency prices. Then we’ll create a GenServer to store the prices and add it to our supervision tree.

In this episode we’ll take an existing contact form and see how Ecto changesets can be used to perform schemaless form validations and display errors.

In this episode we’ll build a contact form for an existing Elixir Phoenix application. When a user submits the form, an email will be sent using the Bamboo library.

In part 4 of our Phoenix LiveView series we’ll use Phoenix Presence to track how many users are currently signed in to our application.

Often different layouts need to be rendered for different parts of a web application. In this episode we look at a few ways of doing this in Elixir.

In this episode we’ll explore Ecto.Multi in order to compose database transactions in Elixir.

Testing is an essential part of software development. In this episode we’ll get an introduction to testing in Elixir using the ExUnit test framework.

Often you’ll have sensitive information that you don’t want to show up logs. In this episode we’ll see how to configure Phoenix to specify what parameters you want filtered in your logs.

In this episode we’ll explore one way to use Phoenix to create a nested form that saves an associated record in our database.

In part 3 of our series we’ll broadcast album changes to all clients using Phoenix.PubSub and Phoenix LiveView.

In part 2 we’ll use Phoenix LiveView event bindings to dynamically render a form and save changes to the database. Our form will be validated using a changesets coming from LiveView.

In part 1 we get started by installing Phoenix LiveView and setting it up to work with an existing Elixir Phoenix application. Then we’ll update a page to render data using LiveView.

Now that we have our application generating API keys, we need to validate incoming API requests. In part 2 of this series, we’ll create a plug that validates the API key used.

There are many different ways to authorize API requests. In part 1 of this series we will setup an Elixir application to generate an API key we can use to authorize API requests with.

In this episode we’ll learn how to paginate JSON API results according to the JSON:API specification using the JaSerializer package.

In this episode we’ll update an existing JSON API to follow the JSON:API specification. To help us, we’ll use the the JaSerializer package.

This episode is a great introduction for anyone wanting to build a JSON API with Phoenix. We’ll build a simple read-only API for an existing Elixir application.

Here we’ll see how structs can be used to format data. We’ll start with an introduction to structs and then explore different ways to map external data to a struct, including using the ExConstructor package.

In this episode we’ll use proactive caching with Cachex. Proactive caching can help ensure there is never a cache miss since data is loaded when the application starts.

Here we look at how to use Cachex to create a cache in an Elixir application. We’ll start by seeing how to interact with Cachex and then we’ll implement a simple cache in our application.

Phoenix contexts are modules that group associated functionality. To see how they work, we’ll build a simple blog with comments. This is a great episode for anyone new to Phoenix or wanting to see how contexts work.

In this episode we’ll explore another way to validate API params. We’ll update our existing example to use the Params package, which reduces much of the boilerplate of defining Ecto schemas and changesets.

In this episode we’ll see how we can validate API parameters . We’ll take a simple search API and use schemaless Ecto changesets to validate the request parameters.

In this episode we’ll look at how we can upgrade a Phoenix application to use the new Phoenix 1.4 release.

In this episode we’re getting started with Erlang Term Storage or ETS. We’ll learn the basics of storing data with ETS, then we’ll expand on that to see how ETS can be used in a Phoenix application.

HTTP Basic Authentication is a simple way to add authenticate users in an application. In this episode we’ll see how to add basic auth to an Elixir application.

In this episode we’ll get an introduction to Elixir Streams. We’ll see why they’re called “lazy enumerables” and how they can be composed to perform more complex transformations.

In this episode we’ll checkout Thesis, which is a lightweight CMS for Elixir. We’ll see how we can use Thesis to easily edit content, add images, and add new pages of content.

In this episode we’ll see how we can easily use Phoenix Channels to broadcast events from the server in order to update the client in realtime.

In this episode we’ll learn how to consume a webhook. Our application will take the data from a Stripe webhook and use it update the corresponding user.

In this episode we’ll be using Gigalixir to deploy an Elixir application. Gigalixir is a Platform as a Service that let’s you easily take advantage of all that Elixir has to offer like hot upgrades, distributed clustering, and a production observer.

You’ll use Mix tasks all the time when using Elixir, from creating a new Elixir project to seeding the database. In this episode we’ll learn how to create a custom Mix task.

The pipe operator is one of the great features that makes it fun to write Elixir code. In this episode we’ll see how to use it to chain operations together in a way that’s easy to read.

In this episode we’ll look at one way to install Elixir. We’ll be using the asdf version manager, which lets us manage multiple versions of programming languages like Elixir, Erlang, Node and more.

Curious about the editor and different packages we use on ElixirCasts? In this episode we’ll look at the Atom editor and the different Elixir-related packages that we use.

In this episode we’ll be exploring one of the key features of Elixir: tasks. Tasks make it easy to run Elixir code concurrently. In this episode we’ll look at some common ways Task is used.

In this episode we’ll be exploring one method to simplify Phoenix controllers using action_fallback. action_fallback allows you to specify a plug to handle errors in your controller.

In this episode we’ll be adding the ability for users to sign in to a Phoenix web application with Twitter. We’ll use Ueberauth to help us handle the OAuth flow to and from Twitter.

In this episode we’ll use the Number package to help us format numbers for an application. We’ll see how we can convert numbers to different formats like currency, percent, and phone number.

In this episode we’ll explore how we can separate the client API of a GenServer from its server callbacks. This can be a good idea to help break GenServer modules up as they become more complex.

In this episode we’ll look at how we can use a GenServer to schedule some recurring work. We’ll create a GenServer fetches the price of a Bitcoin at a regular interval.

Now that we’ve created our ‘Order History’ pages, we need to make sure only the respective customers are able to view their order history. We’ll use Plug to help us do this.

In this episode we’ll build on the foundation we setup in part 1. We’ll populate our ‘order history’ and ‘receipt’ pages with actual data and make them accessible to our customers.

In this episode we get started building an order history page. We’ll look at how our application is structured, how we can fetch data from an API to build our receipts, and how to structure that data.

In this episode we’ll learn how to identify security issues in Phoenix applications. We’ll be using Sobelow to help us identify different potential vulnerabilities.

In this episode we’ll learn how to parse HTML with the Floki package. Floki makes it easy to search for specific nodes in HTML using CSS selectors.

Assigns allow you to set and access shared data in different contexts within Phoenix. In this episode we’ll explore how to use assigns in the connection, template, and socket.

In this episode we’ll learn how we can use feature flags to toggle different features of an application to different users. To do this we’ll be using the FunWithFlags package in an existing Elixir application.

In this episode we’ll look at how we can use the Phoenix router to define routes for our application. We’ll learn how to define single routes and full RESTful resources in Phoenix.

In this episode we’ll update an existing Elixir application to make it use a Stream throughout. Then we’ll see how we can use Task.async_stream to make concurrent API calls.

In this episode we’ll learn the basics of working with CSV files in Elixir. We’ll parse and existing CSV to get specific data from it. We’ll also learn how to build a new CSV file.

In this episode we’ll learn how to seed our Ecto database with some dummy info for use in a Phoenix application.

In this episode we’ll learn how we can use virtual attributes in Ecto to create fields in a schema that are not persisted to the database.

In this episode we’ll create a new Mix project to interact with an FTP server. We’ll learn how to connect to the server, change directories, download and upload files.

In this episode we’ll look at how we can implement passwordless authentication in a Phoenix application with the Veil package.

Ready to dig into Supervisors? In this episode we’ll get introduced to them by updating an existing supervisor and its corresponding worker to use the Elixir 1.5 syntax.

In this episode we’ll add user authentication to a Phoenix application. We’ll create forms that allow users to sign up and sign in. Then we’ll see how we can require users to authenticate before accessing certain controller actions.

If you’ve needed to upload and transform images in your Phoenix application this episode’s for you. We’ll use Arc to create multiple versions of our files and upload them to Amazon S3.

In this episode we’ll add a simple search form to a Phoenix application. We’ll use Ecto to build our search query, along with PostgreSQL’s ‘ilike’ to make our search case-insensitive.

In this episode we’ll learn how to accept payments using Stripe. We’ll integrate Stripe Checkout into an existing Phoenix application in order to easily accept payment and shipping information.

One of the great features of Phoenix is how easily it allows developers to include realtime functionality in applications. In this episode we’ll use Channels to build a simple chat application in 8 minutes.

In this episode we’ll take what we did in Charts with Chart.js Part 1 and build on it. Let’s take advantage of Phoenix and use Channels to make our chart update in realtime.

In Part 1 of this series we’ll set the foundation by building a simple chart using the chart.js library. Our chart will display a static count of our movie genres.

Gravatar is a great way to easily display avatars. In this episode we’ll create simple helper function that we’ll use to display a user’s Gravatar.

In this episode we take a look at guards and how we can use them in Elixir. We’ll start by using guards with functions to see how they work. Then we’ll extract them into custom guards with defguard.

In this episode we’ll learn about three different control structures in Elixir: if/else, case, and cond. If you’re new to Elixir or just learning programming this is a great episode to start with.

Elixir Agents are used to manage state. In this episode we’ll learn how we can use an Agent to update and retrieve some state of our own.

In this episode we look at one of the great features of Ecto - composability. We’ll add a query into an existing filter to see how easy it is to compose queries in Ecto.

In part 6 we experiment with OTP to see how we can make our inventory import more resilient. Then we’ll use the power of concurrency in Elixir to speed up our inventory import.

Now that our interface is working, we turn our attention to making sure our inventory it displays is current. We’ll create a custom Mix Task that we can run to import and update our inventory.

In part 4 we work on some improvements to our interface. We’ll add pagination, use Ecto to ensure we’re only displaying the cars we want to. Then we’ll see how helper functions can be used in our templated.

In part 3 we tackle URLs. We create a new URL structure to go along with our new app. Then we use Plug to create a custom redirect module to handle traffic to the old URL structure.

In part 2 of our series we take our existing data and determine how to structure it inside our Elixir application.

In the first episode of the Moving to Elixir course we create our application with a MySQL database. Then we import our existing database and make sure our application starts.

Pattern matching is one of the fundamental features of Elixir. In this episode we get a simple introduction to it and some of the ways it’s used in Elixir.

Using partial templates are a great way to break up larger, more complex templates. In this episode we see how easy it is to use them with Phoenix.

It’s easy to use Elixir to build static websites and in this episode we’ll do just that. We’ll learn how we can use Plug to build a website that serves up static content.

In this episode we’ll learn how to use the new formatter coming to Elixir 1.6 with an existing project. We’ll also use a few options to customize the formatter.

In this episode we’ll get an intro to module plugs in Elixir. We’ll take an existing function plug and convert it into a module plug - highlighting the difference between the two.

Plug is an essential tool when building web applications in Elixir. In this episode we’ll dive into function plugs by building one and using it in an existing Phoenix application.

ex_debug_toolbar is a great new Elixir project that makes it easier to debug Phoenix applications and see stats about them. In this episode we’ll learn how to use it with an existing Phoenix application.

How can you determine the performance of two pieces of code that have the same output? Benchmarking is the answer and Benchee is a great benchmarking framework for Elixir.

Phoenix 1.3 represents a major shift in how to build and think about Elixir Phoenix applications. In this episode learn how to upgrade an existing Phoenix application to 1.3.

We pick up where we left off in Part 1 of Sending Email with Bamboo. In this episode we add an email template and show how you can use Bamboo to compose multiple emails.

Sending email from an Elixir app is a common problem and Bamboo makes it easy. In this episode we’ll get started by using Bamboo to trigger a simple email from our application.

Creating custom error pages helps give your application a consistent feel - even when something goes wrong. In this episode we’ll customize the 404 and 500 error pages in a Phoenix application.

Jump into the Elixir GenServer module. In this episode we’ll get started using GenServer to create a simple shopping list module that can we can use to add, remove, and view our groceries.

Learn how to create documentation for an Elixir project with ExDoc. We’ll add documentation to an existing Elixir module and include doctests.

If you want to get started using Elixir, but don’t know where to begin - this is a great place to start. We’ll dive into how to create and call named and anonymous functions in Elixir.

The Exq library is a great option if you need a Redis backed job processing library. In this episode we’ll walk through setting up Exq as well as the corresponding ExqUI library.

Many people look to slugs for URLs that are memorable and easy to share. In this episode we’ll see how easy it is to use slugs in a Phoenix application.

Elixir has a great tool for building command line applications called escript. In this episode we create a rock-paper-scissors game and see how to parse arguments from the command line.

In this episode we’ll use Earmark to parse Markdown in an Elixir application. Then we’ll take a look at how we can use it from the command line.

Phoenix is a great framework for building API’s in Elixir. In this episode learn how to create a versioned JSON API.

In this episode we’ll use Scrivener for our pagination. You’ll learn how to use the Scrivener Ecto library to handle our pagination and then work in Scrivener HTML to style our pagination links.

Ready to deploy your Elixir application? In this episode we deploy our simple project to Heroku. You’ll see how easy and fast you can deploy an Elixir application.

In this episode we’ll add comments to our blog. We’ll use the Ecto has_many and belongs_to associations to build a relationship between our posts and comments.

This episode is a simple walkthrough demonstrating how easy it is to get started using Phoenix. In it we’ll get started on a simple blogging application.