Andreas Eriksson [email protected] https://fullstackphoenix.com/ 2026-03-17T11:19:12.933001Z This tutorial demonstrates how to refactor an update event in a Phoenix/Elixir application by importing the latest commit. Viewers learn to streamline event handling logic and improve code maintainability through refactoring techniques. By the end, you'll understand how to apply these changes to your own update event implementations. Andreas Eriksson https://fullstackphoenix.com/videos/dynamic-select-fields 2026-03-15T00:00:00Z Build a complete profile image upload system in Phoenix using LiveView and S3 storage. You'll learn to configure AWS credentials, generate presigned URLs, handle direct-to-S3 uploads, and add polished drag-and-drop UX with JavaScript hooks. By the end, users can securely upload avatars with a professional interface that stores images in S3 while keeping your server clean. Andreas Eriksson https://fullstackphoenix.com/videos/profile-image 2026-03-10T00:00:00Z Learn how to build an MCP (Model Context Protocol) server in Phoenix using Elixir and Hermes to give AI agents direct access to your application data. This tutorial covers implementing tools for listing, retrieving, and updating records, configuring HTTP transport, and testing with Claude and MCP Inspector. Perfect for developers adding AI chatbots or agent workflows to Phoenix apps. Andreas Eriksson https://fullstackphoenix.com/videos/phoenix-mcp-server-ai 2025-10-18T00:00:00Z Learn to build real-time user presence tracking in Phoenix LiveView applications. This tutorial shows how to implement Phoenix Presence to display who's currently viewing specific pages using avatars, perfect for collaborative apps like customer support dashboards where multiple users need visibility. Andreas Eriksson https://fullstackphoenix.com/videos/phoenix-presence-liveview 2025-10-06T00:00:00Z In this video, we're going to tackle something that comes up with virtually every new Phoenix application - customizing how the layouts work. Now, exactly how you want your layouts to look is definitely a matter of personal taste and project requirements. In this example application, I have already generated a LiveView-"crud" and it currently has the original layout. I personally don't like this narrow page and the placement of the Register- and Login-button above the current navbar. So, the goal of the video is to implement our own custom layout for the application part, and have a separate layout for when you register and login. The approach we'll take here will give you the flexibility to have different layouts for different parts of your application, which becomes really useful as your app grows. Andreas Eriksson https://fullstackphoenix.com/videos/organizing-layouts 2025-09-26T00:00:00Z Set up Playwright browser testing in Phoenix LiveView applications. Test authentication flows, form interactions, and complex user journeys with Elixir. Andreas Eriksson https://fullstackphoenix.com/videos/testing-with-playwright 2025-09-08T00:00:00Z Learn how to add images to your Phoenix LiveView AirBnB clone by implementing image schemas, database migrations, and Ecto associations. Perfect for Elixir developers building dynamic web applications. Andreas Eriksson https://fullstackphoenix.com/videos/airbnb-clone-liveview-part-3-images 2025-03-31T00:00:00Z Learn how to build an Airbnb clone with Phoenix LiveView by creating database schemas, implementing constraints, and displaying property listings efficiently with LiveView streams. Perfect for Elixir developers. Andreas Eriksson https://fullstackphoenix.com/videos/airbnb-clone-liveview-part-2 2025-03-12T00:00:00Z Learn how to build an Airbnb clone using Phoenix LiveView. This tutorial covers project setup, LiveView basics, and implementing a responsive property grid - perfect for developers new to Elixir wanting to build modern, real-time web applications. Andreas Eriksson https://fullstackphoenix.com/videos/airbnb-clone-liveview-part-1 2025-02-06T00:00:00Z Learn how to add a secure GraphQL API to your Phoenix application using Absinthe. Step-by-step guide for setting up authentication, CRUD operations, and proper schema organization with code examples. Andreas Eriksson https://fullstackphoenix.com/videos/graphql-with-phoenix-and-absinthe 2025-01-19T00:00:00Z Learn how to implement JWT authentication in Phoenix, allowing users to access both web and API interfaces with the same credentials. This tutorial shows you how to combine Phoenix's built-in authentication with Guardian for token-based API access, complete with code examples and best practices Andreas Eriksson https://fullstackphoenix.com/videos/combine-guardian-with-phx-gen-auth 2025-01-10T00:00:00Z Learn how to track version changes in your Elixir Phoenix projects with PaperTrail. Follow a straightforward approach to record, audit, and revert data for better reliability. At the end of the video you basically have a functioning version system that you can implement into your LiveView application today. Andreas Eriksson https://fullstackphoenix.com/videos/version-history-with-papertrail-ecto-liveview 2025-01-05T00:00:00Z Learn how to create an XML sitemap in your Elixir Phoenix application step by step. This guide covers enabling XML responses, building a dedicated sitemap controller, generating fully qualified URLs, and adding dynamic content like blog posts to help search engines better index your site. Andreas Eriksson https://fullstackphoenix.com/videos/xml-sitemaps-in-phoenix-applications 2024-12-29T00:00:00Z Learn how to import CSV files into Phoenix LiveView with ease. This step-by-step tutorial covers file uploads, CSV parsing, data preview, and database integration, providing a robust solution for managing large datasets without relying on APIs. Andreas Eriksson https://fullstackphoenix.com/videos/csv-import-phoenix-liveview 2024-12-21T00:00:00Z Implement user referral tracking in your Phoenix LiveView application. Discover how to capture traffic sources from URL parameters, store them in sessions, and record them in the user’s profile, all backed by a solid testing strategy. Andreas Eriksson https://fullstackphoenix.com/videos/track-traffic-sources 2024-12-11T00:00:00Z Boost your Phoenix application's security by implementing rate limiting with the Hammer library. This tutorial guides you through securing login attempts against brute-force attacks, creating a custom plug for application-wide rate limiting, handling remote IP addresses accurately, and applying rate limits to API endpoints. Learn how to test your implementation and ensure your app remains responsive under heavy traffic. Andreas Eriksson https://fullstackphoenix.com/videos/rate-limiting-phoenix-hammer 2024-11-21T00:00:00Z Learn how to implement advanced fuzzy search functionality in your Phoenix LiveView application using Ecto. This tutorial demonstrates how to move beyond simple "I-LIKE" queries to handle partial matches and minor misspellings. Follow along as we enable Postgres trigram similarity, build optimized queries, and enhance typeahead search performance. Discover how to split titles into searchable arrays, use similarity thresholds, and even order results for greater accuracy. Perfect for developers looking to improve user search experiences, this step-by-step guide also explores indexing strategies for large datasets and reusing fuzzy search in a live table filter. Whether you're building a brewery directory or any search-intensive application, this screencast will elevate your Elixir skills and ensure your search functionality is top-notch. Andreas Eriksson https://fullstackphoenix.com/videos/fuzzy-find-ecto-phoenix-liveview 2024-11-15T00:00:00Z In this video, we're going to build a dynamic typeahead component in Phoenix LiveView that fetches real-time suggestions based on user input. Starting from our reusable combobox component, we'll extend it to create a flexible and reusable typeahead that accepts custom data sources and callback functions. This is particularly useful when dealing with extensive or frequently searched lists. If you're looking to enhance your forms or search fields with predictive suggestions, this tutorial is for you. Andreas Eriksson https://fullstackphoenix.com/videos/liveview-typeahead 2024-11-10T00:00:00Z Learn how to enhance your Phoenix web application by integrating the open-source Bootstrap icon package as an alternative to the default Heroicons. This step-by-step tutorial guides you through finding the icon repository on GitHub, installing it via your mix file with a sparse checkout, updating your Tailwind configuration to include the new icons, modifying core components to handle the Bootstrap icons, and testing them in your app. By the end of this video, you'll be equipped to incorporate any open-source icon pack into your Phoenix projects, providing more flexibility and professional aesthetics in your web design. Andreas Eriksson https://fullstackphoenix.com/videos/bootstrap-icons-elixir-phoenix-app 2024-10-29T00:00:00Z Learn how to build a fully functional, reusable combobox component in Phoenix LiveView inspired by Headless UI. This step-by-step tutorial guides you from creating a functional component to transforming it into a LiveComponent, integrating it into a LiveView form, and enhancing it with minimal JavaScript for interactive features. Andreas Eriksson https://fullstackphoenix.com/videos/liveview-combobox 2024-10-27T00:00:00Z In this video, I demonstrate how to add a full-page loading spinner to your Elixir Phoenix LiveView application using async functions. You'll learn how to create a button that triggers an asynchronous task, display a full-page spinner while the task is processing, and show the result once it's complete. This step-by-step tutorial will help you enhance your application's user experience by effectively managing asynchronous operations and signaling to users when a process is underway. Andreas Eriksson https://fullstackphoenix.com/videos/fullpage-loading-spinner-with-liveview 2024-10-21T00:00:00Z Learn how to implement a customizable CSV export feature in your Elixir Phoenix application using LiveView. This step-by-step tutorial covers adding a CSV library dependency, creating an Export Controller, updating routes, and enhancing LiveView templates. Empower your users to select specific data columns and seamlessly download tailored CSV files from your app. Andreas Eriksson https://fullstackphoenix.com/videos/csv-exports-phoenix-liveview 2024-10-20T00:00:00Z In this tutorial, learn how to build a real-time dashboard in Phoenix LiveView using Apex Charts. We create three dynamic charts: sales over time, distribution by beer type, and top-selling cities. You'll see how to integrate Phoenix PubSub for real-time updates and handle chart interactions. This guide covers everything from setting up data queries to formatting data for visual representation in line, pie, and bar charts. Follow along and watch how to make your dashboard refresh instantly as data changes. Andreas Eriksson https://fullstackphoenix.com/videos/realtime-dashboard-liveview 2024-10-13T00:00:00Z Building interactive, real-time charts in a Phoenix LiveView application can be challenging. The complexity of connecting JavaScript charting libraries with Elixir's LiveView often leads to frustration and delays in development. Learn how to effortlessly integrate real-time, interactive charts into your Phoenix LiveView application using ApexCharts. Our step-by-step tutorial simplifies the process, helping you bring your data to life. Andreas Eriksson https://fullstackphoenix.com/videos/realtime-charts-liveview 2024-10-05T00:00:00Z Reordering items directly in the user interface is a feature that can greatly enhance the user experience in web applications. In this video, I'll walk you through how to implement sortable table rows in your Phoenix LiveView application. We'll start by setting up a way to store the sorting position of each post in the database. Then, we'll integrate the Sortable.js library to handle the drag-and-drop functionality on the client side. By the end of this tutorial, you'll have a fully functional sortable table that persists the order of your items. Let's get started. Andreas Eriksson https://fullstackphoenix.com/videos/sortable-table-with-sortable-js 2024-09-24T00:00:00Z In this tutorial, I will go through the process of integrating ChatGPT with an Elixir backend, using Phoenix LiveView for real-time updates. It is luckily very easy to get started with, but it requires that you have an OpenAI account. There are also other LLM (large language model) providers that this tutorial should work with. The first steps are setting up the the Elixir project and OpenAI environment, then move on to building the backend logic for handling conversations, and finally, create a responsive frontend to allow users to interact with our chatbot. Andreas Eriksson https://fullstackphoenix.com/videos/building-a-chatgpt-chatbot-with-elixir-and-phoenix-liveview 2024-09-17T00:00:00Z A common feature in larger web applications, especially SaaS platforms, is the ability to handle different subdomains with separate routing. In this video, I’ll show you how to add a custom routing module to a Phoenix application, to display my blog posts on a dedicated subdomain. I am usually using this approach to serve different content, like a blog or user dashboard, with distinct subdomains, with the purpose to keep my main application structure clean and organized. Andreas Eriksson https://fullstackphoenix.com/videos/subdomain-routing 2024-09-07T00:00:00Z Inline editing is a common feature in modern web applications, allowing users to edit content directly on the page without navigating to a separate form. You can see this pattern in popular apps like Trello or Linear, where titles and content are editable in place. On this page, I've implemented a similar function, making it easy to update the title of a brewery directly. In this video, I’ll guide you through implementing this feature using Phoenix LiveView. Andreas Eriksson https://fullstackphoenix.com/videos/in-place-edit 2024-08-28T00:00:00Z In most web applications, there's a need to store session values for users, especially for things like authentication tokens, current user IDs, or preferences like language settings or dark mode. In a LiveView application, which primarily communicates over WebSockets, setting session values directly isn't possible. However, as demonstrated, when I click the "Set Session" button and refresh the page, the value remains accessible through the browser's session. In this video, I’ll show you how to achieve this seamlessly and elegantly. Andreas Eriksson https://fullstackphoenix.com/videos/set-session-values-from-liveview 2024-08-24T00:00:00Z A step by step tutorial in switching from traditional modals to a sleek off-canvas menu with Phoenix LiveView. In this video, you'll learn how to build a reusable off-canvas component from scratch that slides in from the side, providing a modern, user-friendly alternative to the standard modal. Also learn how to easily integrate this component, enhance your user interface with smooth animations, and implement features like backdrop overlays and scroll prevention. Andreas Eriksson https://fullstackphoenix.com/videos/off-canvas-menu 2024-08-23T00:00:00Z In the example application that I am working with, It would be nice if I could quickly navigate between the records I have in the database without going back to the index page. So, in this video, I will be implementing navigation between pages with a select field. Whether you're new to Phoenix LiveView or looking to refine your skills, this tutorial provides step-by-step guidance on creating maintainable and scalable components. The idea is simple, when I pick one of the records in the select box, I will use Phoenix LiveView to navigate to that page. Andreas Eriksson https://fullstackphoenix.com/videos/dropdown-navigation 2024-08-15T00:00:00Z At some point, your application will grow to a size where it starts to make sense to apply caching for some parts of it. This growth can be due to traffic or the complexity of the pages that your users visit. This is especially true for reports and analytics pages, where a large amount of data can be aggregated. Usually, this data does not need to be exactly up to date and can be cached for some time. In this video, I will explain how you can get started with using the popular Cachex library in your Phoenix application. Andreas Eriksson https://fullstackphoenix.com/videos/caching-with-cachex 2024-08-13T00:00:00Z In this video, we will enhance the user experience by implementing an auto-clear functionality for flash messages. Flash messages are a common way to provide feedback to users after actions such as form submissions. However, when these messages linger too long, they can become distracting or interrupt the user's workflow. By automatically clearing them after a set time, we create a smoother, more intuitive interface. Follow along as we modify the Phoenix flash component with a simple JavaScript enhancement that ensures your users stay focused on what matters most. Andreas Eriksson https://fullstackphoenix.com/videos/autoclear-flash-message 2024-08-12T00:00:00Z In this video, we’re adding two-factor authentication with QR codes and an authenticator app to your Phoenix application. This gives an extra layer of security for your application alongside the normal username and password. Andreas Eriksson https://fullstackphoenix.com/videos/two-factor-authentication 2024-08-12T00:00:00Z Working with session data can significantly improve the feel of web applications, making interactions feel more connected and dynamic. However, Phoenix LiveView, while powerful for real-time features, hits a snag when it comes to modifying session cookies directly due to its reliance on WebSockets instead of traditional HTTP requests. But there’s a clever workaround. In this guide, we’ll explore how to use a bit of JavaScript alongside a custom Phoenix controller to update session values right from LiveView. This method not only keeps your app feeling responsive and lively but also highlights how Elixir’s Phoenix and JavaScript can work hand in hand to overcome challenges. We’ll walk you through setting up a JavaScript hook and a controller to change session data on the fly, ensuring your user experience remains smooth without any disruptive page reloads. Andreas Eriksson https://fullstackphoenix.com/tutorials/set-session-values-from-liveview 2024-04-03T05:40:25Z When you are running a web application or service that has users, you will at some point deal with users that want to leave the service. And not only should you allow them to do so, it is also good practice to either delete or anonymize them and their identifiable data when they to. The reason is to preserve user integrity while ensuring the privacy and security of user data is paramount. This is also needed to be GDPR compliant which is needed if you have customers from EU. There are instances where deleting user records from a database is not feasible due to their association with various vital records or due to data retention policies. This tutorial will go through the process of anonymizing user data in such scenarios, ensuring that the user's identity is obscured without the need to delete their records outright. Andreas Eriksson https://fullstackphoenix.com/tutorials/add-user-anonymization-to-phoenix-application 2024-02-18T09:36:41Z A very common practice in web applications these days is to allow for inline editing of content. This is especially true when the value is a text field and contains like a name or title. You can see this pattern if you use something like Trello or Linear. Instead of using a form input, you can use the HTML attribute contenteditable. That can make any element that has text editable. The upside is that you dont break your normal styling and the page will look like the content that you edit, which can reduce the visual clutter of traditional form elements. The downside is that inputs has a data validations built in so if you need data validation, you probably will be better of with plain forms. In this tutorial, I will go though how to use contenteditable in Phoenix LiveView to achieve the pretty inline editing. Andreas Eriksson https://fullstackphoenix.com/tutorials/in-place-edit-with-liveview 2024-02-16T12:02:38Z In the ever-evolving world of web development, mastering the art of inspecting incoming webhooks is crucial for a seamless development experience. This tutorial is designed with Phoenix LiveView enthusiasts in mind, aiming to unveil the magic behind effortlessly debugging, inspecting, and testing webhooks in real-time. Whether you're aiming to enhance your development workflow or simply curious about the potential of Phoenix LiveView, this guide will walk you through the steps needed to achieve real-time webhook inspection capabilities without breaking a sweat. Get ready to elevate your Phoenix LiveView skills to new heights! Andreas Eriksson https://fullstackphoenix.com/tutorials/inspect-incoming-webhooks-with-phoenix-liveview 2024-02-14T20:40:30Z If you're looking to enhance your Phoenix application with geographical data handling capabilities, PostGIS is an indispensable tool you'll want to consider. This robust Postgres extension facilitates precise calculations between geographic data points, such as longitude and latitude, enabling you to calculate distances between companies with relative ease. In this tutorial, we'll cover how to seamlessly integrate PostGIS with Ecto in your Phoenix application, paving the way for advanced location-based features. This tutorial is designed to help you incorporate PostGIS into your Phoenix projects, a step that will considerably improve your application's interaction with geographical data. PostGIS enables the direct manipulation of geographic objects within SQL queries, offering a robust solution for spatial data management. Ecto, Elixir's main tool for database interaction and query composition, complements this by providing a powerful and expressive way to work with databases. Throughout this tutorial, we'll walk you through the process of setting up PostGIS with your Phoenix application, configuring Ecto to work with spatial data, and crafting queries to efficiently locate nearby points of interest. Andreas Eriksson https://fullstackphoenix.com/tutorials/get-started-with-postgis-and-ecto 2024-02-14T20:04:57Z At some point, most apps need to send calendar events and you have probably noticed that there is a standard that all major calendar applications work with. That is the ical format. it is very common that you can receive such files with emails, and then be prompted, for example by Gmail, that you can add the event to the calendar. You might also be prevented with a link inside an application that makes prompts you do download a file with the same purpose.  iCal files, recognized by their .ics extension, are a standard format for calendar data exchange. They allow users to easily import event details into their personal calendars, such as Google Calendar, Apple Calendar, or Outlook. This feature enhances the user experience by providing a seamless way to keep track of events and appointments. In this tutorial, I will go through how to generate the ical files and deliver them in two ways. Either by email or with a download link. Andreas Eriksson https://fullstackphoenix.com/tutorials/generating-ical-files-with-phoenix-and-swoosh 2023-11-19T20:19:05Z Charts is a core part in any web application that displays data in any way. In this tutorial, I will go through how to take a popular charting library and make a configurable and reusable Phoenix component. I will also go through how to update the graphs in realtime with Phoenix LiveView. The charting library I will use it Apex Charts. It aims to be a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. Andreas Eriksson https://fullstackphoenix.com/tutorials/realtime-apex-charts-phoenix-liveview 2023-10-05T13:08:11Z In this tutorial, I will go through how to upload and import a CSV file with Phoenix LiveView and, show how easy it is to preview the imports before actually storing them in the database. Andreas Eriksson https://fullstackphoenix.com/tutorials/import-csv-with-preview-liveview-file-upload 2023-05-31T19:21:24Z In this tutorial, we will walk you through how to implement HTML emails in the Phoenix web framework using Swoosh and Premailex. By default, Phoenix comes with the ability to send text emails using the Swoosh library. However, we will add the ability to send HTML emails and use Premailex to inline CSS into the HTML elements as style-attributes. We'll also use Premailex to generate a pure text variant of the emails. Andreas Eriksson https://fullstackphoenix.com/tutorials/implementing-html-emails-in-phoenix-with-swoosh-and-premailex 2023-05-26T19:08:17Z Unless you have been living under a rock the last six months, you haven’t missed the the news about OpenAI's ChatGPT and its extremely cool text comprehension and text generation features. In this tutorial, I will go through the process of integrating ChatGPT with an Elixir backend, using Phoenix LiveView for real-time updates. It is luckily very easy to get started with, but it requires that you have an OpenAI account. There are also other LLM (large language model) providers that this tutorial should work with. The first steps are setting up the the Elixir project and OpenAI environment, then move on to building the backend logic for handling conversations, and finally, create a responsive frontend to allow users to interact with our chatbot. Andreas Eriksson https://fullstackphoenix.com/tutorials/building-a-chatgpt-chatbot-with-elixir-and-phoenix-liveview 2023-05-22T18:56:52Z In this tutorial, we will discuss a common problem faced in Elixir applications related to handling and storing formatted amount fields in a database. We will walk you through how to handle this problem using Ecto, a database wrapper and query generator in Elixir, along with its custom types feature. Andreas Eriksson https://fullstackphoenix.com/tutorials/handling-amount-fields-in-a-phoenix-application-with-ecto-custom-types 2023-05-20T15:01:27Z One of the nicest features in the new Phoenix 1.7 is the verified routes. Instead of the previous auto generated route-function, there is a p-sigil that looks like the browser path that makes it way easier to work with. However, if you work on a large Phoenix application with a lot of files and routes, going through and switching to verified routes can be a real pain. So, in this tutorial, I will go though a MIX-task that I made that will automatically go through all the files and propt the developer with a suggestion for the verified route. Andreas Eriksson https://fullstackphoenix.com/tutorials/mix-task-automatic-convert-to-verified-routes 2023-03-02T19:03:32Z If you run a web application with users in production, you have surely had the need to run a task that changes the database for one or more users. This is something usually called one-off tasks. They are a type of background job or batch process that is designed to run only once, or a limited number of times, to accomplish a specific goal. You can either set them up to run when the application boots, schedule them in a queue or manually log into the server and run them. In this tutorial, I will show my preferred way of doing it with the help of Oban when the application deploys and boots. Andreas Eriksson https://fullstackphoenix.com/tutorials/run-one-off-tasks-in-phoenix 2023-02-17T06:16:01Z A very common user interface pattern on the web is to have sortable elements. In this tutorial I will go through how to accomplish sortable lists with Phoenix LiveView and using a LiveView hook. However, you cant really do this without some external library. And for this, I will use the javascript library called SortableJS. This tutorial uses a fresh installation of Phoenix 1.7 with LiveView, and I have only added a Tasks CRUD. Andreas Eriksson https://fullstackphoenix.com/tutorials/sortable-js-phoenix-liveview 2022-11-25T12:56:21Z This tutorial came up as a way to style an email sendout with Tailwind classes.The reason I want to do this is that styling emails is a pain and I use Tailwind every day and that makes me really productive. So, the goal is to transfer the workflow over to when styling emails. To be fair though, I don't directly use Tailwind but use my most used utility classes and made it so that its styled inlined with the Premailex library. Andreas Eriksson https://fullstackphoenix.com/tutorials/tailwind-emails-phoenix-swoosh 2022-11-24T12:49:56Z With the latest Phoenix LiveView 0.18 release it has finally become time to revisit components. In the previous version, the components was a little hard to work with. The new things that has come, is that you can define attributes. Not only that, you can define the type of attribute, if it’s required and a default value. Just by having a default value, makes it possible to display the components nicely in the upcoming LiveStoryBook. Besides that, Im planning to make components on all of the html elements in the SAAS Starter Kit so its easy to switch between CSS frameworks. In this tutorial I want to create a Tailwind Navbar as a Phoenix Component. Usually, I have used DaisyUI components but for this tutorial, I have gone with the polished Flowbite components. Andreas Eriksson https://fullstackphoenix.com/tutorials/tailwind-navbar-new-liveview-0-18-components 2022-09-26T07:17:15Z In this tutorial, I will go through how you can add html redirects to your Phoenix application. The goal is to have a CRUD interface in my admin where I can go in and setup a redirect path for a certain path. I should also be able to automatically add query params and chose if the redirect shuld be permanent or temporary. Andreas Eriksson https://fullstackphoenix.com/tutorials/implement-permanent-redirects-with-phoenix-plug 2022-09-03T16:05:16Z A very common feature in web applications, especially SAAS applications are the concept of teams where a user can have and belong to multiple teams. In this tutorial I want go through how this can be setup in Phoenix and Ecto in combination with Phx gen Auth. The idea is that each user has their own personal account. The personal account is not accessible to other users. This ensures that the code works exactly the same regardless of whether we are adding resources to a private account or an account with users. Once a new user record is created successfully, an action will take place and the user will be granted a personal account. After that, users can create more accounts and invite others to them. Users can change which account they are viewing in the user interface. Andreas Eriksson https://fullstackphoenix.com/tutorials/multi-teams-memberships-phx-gen-auth 2022-05-06T06:46:16Z In most applications you have some page specific javascript that is only used in one or just a few pages. The solution for this is to either setup your javascript build system to output several bundles that you can include on the pages you want or import the script files from the CDN sources on the pages you want and then use them in your code. In this tutorial, I want to show how I use option two, import the javascript from external CDN:s and use that in conjunction with Phoenix LiveView to avoid having the user to download a larger javascript bundle that is not needed on most pages. This is a pattern that I have started to follow recently and that I feel good about. Andreas Eriksson https://fullstackphoenix.com/tutorials/liveview-page-specific-javascript 2022-05-02T05:27:37Z A common need in web apps is to export data to different file formats. One common, or even maybe the most common format, is exporting CSV files. CSV stands for comma separated values and its basically just a text file where all the values are separated by comma or semi colon. A CSV file is in turn easy to import in other programs or can easily be parsed with a simple script. In this tutorial I want to show how to export a CSV from an Elixir Phoenix application. And I want to export the CSV from a Phoenix LiveView interface where I can pick what fields to export. Andreas Eriksson https://fullstackphoenix.com/tutorials/csv-export 2022-02-12T19:48:10Z In a previous tutorial, I showed how to add Stripe checkout in a Phoenix application. If you however want to accept Bitcoin, Etherium or any other crypto currencies, you can implement a Coinbase hosted checkout. So, in this tutorial, I want to show you how you can get started to receive Bitcoin or Etherium on your site. Andreas Eriksson https://fullstackphoenix.com/tutorials/crypto-payment-elixir 2022-02-02T10:38:12Z In this post, I want to show you how to leverage cache in Phoenix LiveView to avoid hitting the database twice when mounting a LiveView page. The reason is that the query might potentially be expensive and slow down the page with a bad user experience as a result. Andreas Eriksson https://fullstackphoenix.com/quick_tips/liveview-caching 2021-12-07T13:54:30Z On this website, I do have some content and I plan to write some more. I feel that it is time to add an RSS/Atom feed to the posts I have. I think thats a nice feature for the people consuming content through feed readers and some rumors says it helps SEO as well but that could be totally wrong. On the other hand, it can't hurt. I will to this by using the package Atomex. Andreas Eriksson https://fullstackphoenix.com/quick_tips/make-an-rss-atom-feed-with-phoenix-liveview 2021-11-26T15:23:04Z 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 great value. I have prepared both the Phoenix Boilerplate and the SAAS Starter Kit to make this deplyment as easy as possible. This also works with Phoenix LiveView and Esbuild as well as Tailwind. They already have a deply guide on their docs section but it is for an older version of Phoenix and it doesnt use Ecto and Postgres. This is a step by step guide to deploy Phoenix 1.6 with LiveView and Tailwind on Render. Andreas Eriksson https://fullstackphoenix.com/tutorials/step-by-step-guide-to-deploy-phoenix-1-6-with-liveview-and-tailwind-on-render 2021-10-22T13:34:53Z 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 implements sorting and pagination but in this tutorial, i will implement these datatable features with Phoenix LiveView. Andreas Eriksson https://fullstackphoenix.com/tutorials/building-a-datatable-in-phoenix-liveview 2021-10-18T13:52:38Z In this tutorial I want to show you how to get started with screen scrapinng data from a website with Elixir and Floki. The page I want to scrape contains a list of cities in the US with the longitude and latitude. https://www.latlong.net/category/cities-236-15.html As you can see, the data on the page is contained in a table which makes it pretty easy to deal with. However, there is more than one page so I need to handle the pagination and move to next page. Andreas Eriksson https://fullstackphoenix.com/tutorials/scraping-data-with-elixir-and-floki 2021-10-14T14:48:38Z In this tutorial, I want to show you how you can setup form that stores the data in partly the columns in a database but also some of the fields in JSONB with an embedded schema. The reason you might want to do this instead of saving all entries in separate columns is that you can add more fields without changing the database. Andreas Eriksson https://fullstackphoenix.com/tutorials/how-to-use-phoenix-forms-for-embedded-schema-and-jsonb 2021-06-01T11:42:55Z 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 Phoenix LiveView. I will use one of the free examples from tailwind UI. And as you can see i can interact with select field by using keyboards and mouse. To implement this custom select fields is not straight forward and I want to go through how to timplement this in a Phoenix LiveView form. Andreas Eriksson https://fullstackphoenix.com/tutorials/how-to-create-a-custom-select-with-alpine-js-and-phoenix-liveview 2021-05-13T11:39:56Z Oban has proven itself to be the most versatile job processing library in Elixir and Phoenix. Coming from Sidekiq, it feels very familiar and supports scenarios with async jobs, jobs to be performed in a certain time in the future, and recurring jobs based on a cron schedule. The latter is especially great if you want to setup a daily digest email to yourself or your users. In this tutorial will go through how to add Oban and create a daily digest email that I send out with Bamboo. Andreas Eriksson https://fullstackphoenix.com/tutorials/how-to-setup-recurring-jobs-with-oban-in-elixir 2021-05-05T20:39:55Z 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, popovers and modals. There is no need to keep the state of a dropdown on the server so you might just as well do it on the client. But there is a great small library called Alpine.js that claims to be Tailwind but for you javascript. However, to use Alpine with Phoenix LiveView, you might run into some issues. In this tutorial, I will try to show you how to overcome those issues. Andreas Eriksson https://fullstackphoenix.com/tutorials/combine-phoenix-liveview-with-alpine-js 2021-05-04T06:54:48Z Even though a large part of the Phoenix community seem to embrace Tailwind, there are still a lot that prefer Bootstrap CSS framework. And with Boostrap 5 just around the corner, I think its interesting to see how it works with latest Phoenix and Phoenix LiveView. So, in this tutorial, I will show you how to install Bootstrap 5 in a Phoenix 1.7 and LiveView app. Andreas Eriksson https://fullstackphoenix.com/tutorials/bootstrap-5-and-phoenix-liveview 2020-12-26T14:45:44Z Andreas Eriksson https://fullstackphoenix.com/tutorials/getting-started-with-phoenix-and-liveview 2020-12-23T18:09:35Z Ecto it the database wrapper for mainly Postgresql. If you come from Ruby on Rails it is used instead of ActiveRecord but it is not an ORM. Ecto is a library and domain-specific language to interact with your database. It has four main components that can be used together all by itself. Andreas Eriksson https://fullstackphoenix.com/topics/ecto 2020-12-13T16:46:37Z In this tutorial, I have a list of customers. One common feature for a table of records is to perform some sort of bulk actions. As an example in this tutorial, I want to be able to toggle all records with a checkbox in the table header and perform some sort of bulk action on the selected ones. This tutorial is updated to account for Phoenix 1.7 and the new LiveView Streams feature. The difference with streams, is that they are not kept in the LiveView state, but is more a fire and forget. Andreas Eriksson https://fullstackphoenix.com/tutorials/add-bulk-actions-in-phoenix-liveview 2020-11-09T21:41:01Z 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 tutorial includes working process for Strong Customer Authentication (SCA). I combine Phoenix LiveView and Stripe Elements to create a self hosted customized checkout. I think its particularly suitable since it involves async communication with an external service. Keep in mind that this is a get-started tutorial and does not go into product subscriptions, which will come in a follow up tutorial or course. Andreas Eriksson https://fullstackphoenix.com/tutorials/setup-stripe-with-phoenix-liveview 2020-09-23T20:33:00Z 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 fit for Phoenix LiveView. In this tutorial, I will build on an existing page that displays a list of products and implement sorting on product name and prices. Andreas Eriksson https://fullstackphoenix.com/tutorials/table-sorting-with-ecto-and-liveview 2020-09-02T19:07:34Z 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, I can help you get going with the technological implementation. Andreas Eriksson https://fullstackphoenix.com/tutorials/fuzzy-search-in-phoenix-liveview 2020-08-31T19:05:46Z 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. In this tutorial, I will combine the presence feature with Phoenix LiveView. The realtime nature of LiveView makes it easy to display the current online users. Andreas Eriksson https://fullstackphoenix.com/tutorials/phoenix-presence-with-phoenix-liveview 2020-08-07T20:45:55Z In the last tutorial, there I had an app with a simple rest api that was authenticated with Guardian and Json Web Token. In this tutorial, I will go into also adding the same functionality in Phoenix in GraphQl with the Absinthe library. Andreas Eriksson https://fullstackphoenix.com/tutorials/getting-started-with-graphql-and-absinthe-in-phoenix 2020-07-30T17:14:29Z Many web apps have both a web interface and an Json api. When the normal web app has a classic session based authentication, an API need something like Json Web Tokens to use for authenticate the requests. In those cases you want to make sure that the same user name and password works both solutions so your users don't remember what credentials to use when. In this tutorial I will start with a web app that already have a standard web authentication solution with phxgenauth. Then I will make an api with protected endpoints that will require a Json Web Token solution with Guardian. Andreas Eriksson https://fullstackphoenix.com/tutorials/combining-authentication-solutions-with-guardian-and-phx-gen-auth 2020-07-22T21:07:04Z To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its own state and event handling so all logic doesn't have to live in the parent LiveView. With that in mind, one thing I quite often use in web apps are modals. However, they require a fair amount of markup and since I dont want to repeat markup in all the instances I use it, I would like to put it in a reusable component. In LiveView that is called a LiveComponent. In this tutorial I will go through how to set up reusable modal in Phoenix LiveView with AlpineJS and Tailwind. Andreas Eriksson https://fullstackphoenix.com/tutorials/create-a-reusable-modal-with-liveview-component 2020-07-11T10:05:40Z Eventually when your site reach a certain maturity, you look into ways to refactor the code. One is to add parts of the templates in reusable layout templates. The reason is that HTML templates can be pretty verbose and you want certain elements to look the same across the site. In this tutorial I will go though how I can do reusable card components but they can also be used for modals, popovers and other common features that comes with some complexity. This approach is an alternative to using partials and even though partials are fine it might be a little cumbersome if you want to pass in a lot if content. Like a form or a large block of html. Andreas Eriksson https://fullstackphoenix.com/tutorials/nested-templates-and-layouts-in-phoenix-framework 2020-06-30T09:50:01Z Waffle is the file upload library that is forked from Arc and works much in the same way. In this tutorial I will show you how to do file uploads with the Waffle library to Amazon S3. I already have an app with a User and want to add the possibility to add an avatar to that user. Andreas Eriksson https://fullstackphoenix.com/tutorials/fileuploads-to-s3-with-waffle 2020-06-29T21:20:46Z I have started a new project. Its a free PhoenixBoilerplate that you tweak and select features after your need and taste. The background is that I always starting new side projects and these always have a fairly long setup where I always add the same styling, javascript, authentication and so on. By the time I can actually start code on my idea, I start to get a little exhausted. So, to fill my own need, I have started a boiler plate builder project. Its is not nearly done yet but it should save you at least an hour or two. Andreas Eriksson https://fullstackphoenix.com/tutorials/introducing-boilerplate-builder 2020-06-11T19:42:36Z Tired of all nodemodules folders taking up gigabytes of hard drive space? Did you know theres is a command to find and delete them? If you are like me, you have a lot of projects started in your development folder. And most of these projects has a nodemodules folder. And since I don’t work on all of them, I can easily just delete the folders and run yarn next time I revisit the project. Andreas Eriksson https://fullstackphoenix.com/quick_tips/delete-unused-node-module-folders 2020-05-23T10:44:24Z As in the case with Rails, Phoenix also has protection against cross site request forgery (crfs). If you want to post to a controller from a javascript file you need to add the token as a header manually. However, in phoenix the csrf token is provided when you render a form. So, unless there is already a form on the page, there is no token to read. To get around this, add this in the page header Andreas Eriksson https://fullstackphoenix.com/quick_tips/use-javascript-fetch-to-post-to-a-phoenix-controller 2020-05-23T08:22:59Z 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 did the LiveView component that I mounted in the router as stop working properly and lost its layout. Andreas Eriksson https://fullstackphoenix.com/tutorials/updating-liveview-spring-2020-ed 2020-03-19T00:00:00Z In the previous tutorial, I wrote how to set up multi-tenancy with Phoenix and Pow. In this tutorial, I will show how I scope resources the current users account. And also, how to load the current account in a plug and make the tests pass. Andreas Eriksson https://fullstackphoenix.com/tutorials/multi-tenancy-and-phoenix-part-2 2020-03-16T00:00:00Z I basically model every app with multi-tenancy in mind. It is way easier to do it while building than to implement it as an after thought. Also, Pow has risen to be my favourite authentication library but it will require some minor tweaks to get it working the way I want it to. So in this tutorial I will show you how I usually sets this up so that when a user registers, I can also register an account that is associated with the user. Andreas Eriksson https://fullstackphoenix.com/tutorials/multi-tenancy-and-authentication-with-pow 2020-03-15T00:00:00Z 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, you cant be sure that task crasher or not. But as we know, Elixir has built in functionality to handle this and makes it easy to get started with. So, in this tutorial, I will start with a LiveView component that just contains a button. The only idea is that pressing the button will trigger a process that takes a long time and might actually result in a crash. In that case, the supervisor should restart it. Andreas Eriksson https://fullstackphoenix.com/tutorials/setup-a-supervised-background-task-in-phoenix 2020-03-09T00:00:00Z 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 between tabs/windows for a specific browser session. And the way I share state betweeen browers, is by having a GenServer holding a map with all current browser sessions and the data attached to it. And to keep this to grow indefinitely, I am also going to use Phoenix Presence to clean up state when the last browser window or tab is closed. Andreas Eriksson https://fullstackphoenix.com/tutorials/share-liveview-state-between-tabs 2020-03-03T00:00:00Z Updated for Phoenix 1.7. 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 a specific day. I might extend functionality in a future tutorial. And also, all styling are done with Tailwind. And I do it in 163 lines of code and 0 lines of Javascript and 0 lines of CSS Andreas Eriksson https://fullstackphoenix.com/tutorials/create-a-celander-in-phoenix-liveview 2020-02-21T00:00:00Z 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 from the initial request, and one one when the socket is connected. So if you have data that is slow or resource heavy to load, you should consider to wait until the socket is connected so the intial load is not in vein. A popular approach is to use ghost cards. A ghost gard is a loading placeholder that looks similar to the content that you try to load in but without actual data. In this tutorial I will show you how Andreas Eriksson https://fullstackphoenix.com/tutorials/create-ghost-loading-cards-in-phoenix-liveview 2020-02-15T00:00:00Z 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 needed to manually set the mouse there again. In this tutorial, I will show how I can broadcast a message using Phoenix Channels to be handled by channels javascript and then simply set focus using javascript. Andreas Eriksson https://fullstackphoenix.com/tutorials/improving-liveview-ux-with-phoenix-channels-tagging-part-3 2020-02-14T00:00:00Z 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 and Tailwind typeahead. This will basically be very similar. In this tutorial I am building a tagging interface with typeahed that supports arrow keys and enter key in less than 170 lines of code. There is zero lines of javascript except for LiveView and zero lines of css except for standard Tailwind. Andreas Eriksson https://fullstackphoenix.com/tutorials/tagging-interface-with-phoenix-liveview-and-tailwind-tagging-part-2 2020-02-13T00:00:00Z 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. However, in my opnion, the best option is to use a 'has_many :through' relationship. So for this, I need a table called tags and a join table called taggings. In this tutorial, I will go through how would do this. Andreas Eriksson https://fullstackphoenix.com/tutorials/add-tags-with-ecto-has-many-through-in-phoenix-tagging-part-1 2020-02-11T00:00:00Z 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 faster and more efficient reads. Even though the format supports both storing arrays of maps and nested maps, I suggest making it simple and just use an unnested single map. The use case I am going for is have some sort of userentered product attributes that I later can search and filter on. Andreas Eriksson https://fullstackphoenix.com/tutorials/add-jsonb-field-in-phoenix-and-ecto 2020-02-10T00:00:00Z 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 variants. The topic for this tutorial is to show you how to setup a nested model form with Phoenix LiveView where you can add and remove fields on the fly. Andreas Eriksson https://fullstackphoenix.com/tutorials/nested-model-forms-with-phoenix-liveview 2020-02-05T00:00:00Z Something I do in EVERY project is to setup some sort of relation between resources. And even though Phoenix comes with generators for migrations and CRUD opeartions, you still need to modify the code to suite for the relations you want. In this short tutorial, I will go through my usual steps regarding setting up a basic hasmany / belongsto - relation. Andreas Eriksson https://fullstackphoenix.com/tutorials/setup-a-has-many-belongs-to-in-phoenix 2020-02-03T00:00:00Z In certain scenarios, it doesnt really make sense to use LiveView. That can be toggling dropdowns, tabs, accordions and opening modals. There is a great minimal library for that called Alpine.js. So in this mini-tutorial I will build a bootstrap 4-like animated modal using Tailwind markup and sprinkle some Alpine.js on it. Andreas Eriksson https://fullstackphoenix.com/tutorials/create-a-bootstrap-like-modal-with-tailwind-and-alpine-js 2020-02-01T00:00:00Z 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 Phoenix Channels and Phoenix PubSub. Andreas Eriksson https://fullstackphoenix.com/tutorials/send-events-from-js-to-a-liveview-component 2020-01-29T00:00:00Z One issue that is common to run into is a CSRF error when posting some sort of form rendered with LiveView. The issue is that a LiveView component is mounted twice. First time when the component is rendered by the initial request. Then it has the correct CSRF token. Next time, when it connect to the socket, it get the wrong CSRF token. Or at least wrong in the sense that it doesnt match the one in the page header. Andreas Eriksson https://fullstackphoenix.com/tutorials/phoenix-liveview-and-invalid-csrf-token 2020-01-28T00:00:00Z Let say you have a long table that you want to paginate with Phoenix LiveView. In this tutorial, I have an existing table with 100 entries that I will use LiveView to paginate. The reason that one would do that might be that the table load slowly and you want to cut down on the initial rendering time. Andreas Eriksson https://fullstackphoenix.com/tutorials/pagination-with-phoenix-liveview 2020-01-28T00:00:00Z In this tutorial I want to show how easy it is to do an autocomplete or typeahead without any additional javascript! Andreas Eriksson https://fullstackphoenix.com/tutorials/typeahead-with-liveview-and-tailwind 2020-01-27T00:00:00Z I am in the process of creating an API in Phoenix and I want it to support Swagger documentation without me having to do much. I dont want to go in to every file and do this afterwards but I want all the needed code to be generated when I run my generator. This tutorial will show you how to do that. Andreas Eriksson https://fullstackphoenix.com/tutorials/create-swagger-compatible-custom-phoenix-json-generator 2020-01-26T00:00:00Z One thing that has always been problematic is when providing live form validation for a user that interacts with a form. The problem has always been that you need to have validation logic in both backend and frontend. That is of course not optimal. However, with Phoenix LiveView, the problem with providing form validation is to a large extent solved. Let me explain how. Andreas Eriksson https://fullstackphoenix.com/tutorials/form-validation-with-phoenix-liveview 2020-01-25T00:00:00Z When submitting a form in a Phoenix and get validation errors, you are displayed with a little validation error text. However, you probably want to customize how that error message is displayed. In this quick tip, I will show you how. Andreas Eriksson https://fullstackphoenix.com/tutorials/quicktip-customize-look-of-form-validation-in-phoenix 2020-01-23T00:00:00Z Let's say that you have a project set up with Tailwind. Or even if you dont, let say you just want to customise the code build in HTML generators generate. Andreas Eriksson https://fullstackphoenix.com/tutorials/add-tailwind-html-generators-in-phoenix 2020-01-22T00:00:00Z A new Phoenix app is generated with a minimal css framework and some default styles. However, my favourite CSS framework are Tailwind. So in this totorial I will go through the steps of setting in up. This tutorial is updated for Tailwind 2 and Phoenix 1.5.7 Andreas Eriksson https://fullstackphoenix.com/tutorials/get-started-with-tailwind-in-phoenix 2020-01-21T00:00:00Z