Budget Model & LiveView Forms: Phoenix App from Scratch, Episode 1

This tutorial demonstrates how to create a budget schema, manage contexts, and build interactive LiveView forms in Phoenix.

[series] Build a complete budget tracking app in Phoenix LiveView! In this episode, we'll: - Create our first domain model with the Budget schema - Set up a tracking context to manage budgets - Build a LiveView-powered budget list - Create an interactive modal form - Add user-specific data scoping - Write a few tests This episode introduces LiveView, Phoenix's real-time UI framework, showing how it enables rich interactivity without writing JavaScript. We'll see how Phoenix contexts help organize domain logic, and how to properly scope data to ensure user data doesn't leak to other users. Perfect for developers who want to see how the pieces of a Phoenix application fit together in practice. You'll learn essential patterns like: - Using changesets for validation - Working with database constraints - Preloading associations - Testing LiveView components All code available on GitHub. Links Screen recording software I use (affiliate): screen.studio/@Yy75o Project repo: github.com/ChristianAlexander/tutorial-budget-app Changes from this video: github.com/ChristianAlexander/tutorial-budget-app/pull/3 Additional work and tests: github.com/ChristianAlexander/tutorial-budget-app/pull/4 Timestamps What are we doing? - 00:00 Create schema - 00:59 Context module - 03:21 Test the context - 05:28 Handling database constraint violations - 07:06 List and get functions - 09:50 Budget list UI - 10:24 Make it a table - 13:42 Preloading associated data - 14:56 Testing fixtures - 16:06 Testing the LiveView - 19:14 open_browser in Tests - 20:51 Create budget form - 21:22 Registering and rendering the form - 23:41 Add the callback handlers - 25:15 Test the create form - 27:05 HTML encoding in tests - 28:45 Back to the test - 29:52 Scoping resources to the user - 30:38 Summary - 33:11