Learn Phoenix LiveView

The comprehensive tutorial that teaches you everything you need to build a complex, realistic, production-ready LiveView app.

Praise for my previous tutorial, Phoenix on Rails:

Dillon Luther

This course is fantastic. I felt like I cheated and jumped way ahead in Elixir/Phoenix.”

Jonathan Caprell

“I’ve bought a lot of Elixir resources over the last six years, and I’m really impressed with how good this is.

Serafeim Seroglou

“The clear, in-depth explanations of Elixir and Phoenix fundamentals allowed me to get up to speed really quickly into this exciting new domain.”

LiveView is the future of web development

Phoenix LiveView is revolutionizing the world of web devlopment. Its innovative approach lets you build dynamic, interactive web interfaces with no Javascript, rendering your HTML on the server and delivering real-time updates through the power of Elixir and OTP.

But the learning curve can be steep. LiveView isn’t like other frameworks, and it takes time to understand its unique architecture.

Learn Phoenix LiveView is the comprehensive tutorial. It’ll take you from zero knowledge and teach you how to build a complex, realistic, fully-featured and production ready LiveView app in record time.

Once you’re done with this tutorial you’ll be so blazingly productive in LiveView that you’ll wonder how you ever used anything else.

Learn Phoenix LiveView is a written tutorial. It’s currently available in early access. About 80% of the tutorial is complete and available, with the rest expected to be completed by the end of July 2024.

For now it’s available at an exclusive discounted price. Once the full course is complete, the price will go up.

Build a realistic project

You’re a professional. You want to build serious software that solves realistic problems, not simplistic toy apps that no-one would use in real life.

That’s why I designed Learn Phoenix LiveView to be realistic. You won’t waste time on contrived nonsense about flicking lightswitches or fizzbuzzing the foobars. Instead you’ll build a fully-featured Slack clone.

First you’ll build a simple but functional chat app that covers the basics. Then you’ll implement new features one-by-one, learning new LiveView concepts along the way, until you have a powerful app that’s production-ready.

As your app grows in complexity you’ll learn what LiveView looks like in practice, not just theory.

Leave no stone unturned

LiveView is a uniquely powerful tool - but its uniqueness means there’s a lot to learn that’s different from other technologies you might have used.

A complex, realistic LiveView app will use all of LiveView’s advanced features - and the Slack clone you’ll build is no exception. Learn Phoenix LiveView covers every LiveView concept: streams, hooks, function components, live components, async updates, PubSub, presence tracking, file uploads and more.

If you can build this in LiveView, you can build anything.

Learn the full stack

The above LiveView concepts are only part of the story. LiveView lets you build powerful, interactive UIS, but a web app is more than a user interface, and mastering Phoenix requires learning more than just LiveView.

I’ve got you covered. Learn Phoenix LiveView assumes no prior knowledge of any Phoenix concepts. It’ll teach you the full stack required to build a realistic LiveView app, including Ecto schemas, migrations, queries, the repo, the router, Mix and more. No stone is left unturned.

Once you’re done with this tutorial you’ll have everything you need to build a fully-featured Phoenix app from scratch. LiveView is the icing on the cake.

Understand the BEAM and OTP

In theory, LiveView’s basic idea (keep state on the server and live-update the UI over a websocket) could be implemented in any language. And since LiveView debuted in 2019, imitators have begun to emerge, such as Rails’s Hotwire or Laravel Livewire.

But LiveView will always stand above the competition for one simple reason: it’s built in Elixir. This means it runs on the BEAM, AKA the Erlang virtual machine, using OTP, the Open Telecom Platform. This suite of technologies unlocks a world of power that simply isn’t available in the average programming language.

Learn Phoenix LiveView doesn’t skim these details. It explains everything you need to know about advanced Elixir concepts such as processes, genservers and supervisors. This isn’t academic - the more you understand about exactly how LiveView makes use of OTP and the BEAM, the easier you’ll find it to build highly concurrent, scalable and fault-tolerant apps in Phoenix. And the more you’ll appreciate what makes LiveView so special, and why Chris McCord took a bet on an obscure little language called Elixir when he created Phoenix.

Convinced? Buy it for life

No subscription, no time limit. Lifetime access with a single payment.

Early Access
  • For personal use
  • Lifetime access
  • 70 lessons + full source code
  • All future updates for free
Sign up now


What’s the stack?

The tutorial uses the latest version of everything as of 2024: Elixir 1.17, Phoenix 1.7, and LiveView 1.0. It will be kept updated as new versions of these technologies are released in the future.

Do I need to know non-LiveView Phoenix before I can learn LiveView?

Not at all! This course is suitable for the total Phoenix beginner.

What about Ecto?

Ecto is Phoenix’s data mapping library. You use Ecto to interact with your app’s database, to store and retrieve data.

Learn Phoenix LiveView doesn’t skip Ecto. It teaches all the Ecto concepts you need - migrations, schemas, queries, changesets, repos - to build a complex and realistic LiveView app.

What about Tailwind?

Since Phoenix 1.7, newly-generated Phoenix apps use Tailwind CSS for their styling. You don’t have to use Tailwind in your Phoenix project - it’s easy to, for example, use SASS, LESS, or vanilla CSS instead - but Tailwind is the default.

Tailwind is a simple framework that’s very easy to learn. The app you’ll build in Learn Phoenix LiveView uses Tailwind for its styling, but you don’t need a deep knowledge of Tailwind to understand the tutorial.

Does this course teach OTP?

LiveView derives much of its power from the Open Telecom Platform (OTP), a powerful set of tools, libraries and design principles that’s built into the BEAM (the Elixir virtual machine).

You don’t need to understand OTP to build a LiveView app, but it helps. Learn Phoenix LiveView teaches and explains all the OTP/BEAM concepts that make LiveView work, such as processes, supervisors, applications and GenServers. Once you’re done you’ll understand what makes LiveView so uniquely powerful, and why it couldn’t have been built in any language except Elixir.

Is there anything else I need to know?

This tutorial assumes that you understand basic web development concepts such as HTML and HTTP. You don’t have to be an expert, but if you don’t know what a  <div>  tag is, I recommend studying the basics before diving into LiveView.

I’m a student / unemployed / from a poorer part of the world, can I have a discount?

Maybe. Send an email explaining your situation and I’ll see what I can do.

I have another question.

I’d love to hear it! Get in touch on george@arrowsmithlabs.com.

You’ll learn LiveView thoroughly from this course - I guarantee it. Sign up, and if you aren’t impressed, send an email within 30 days of purchasing and I’ll give a full refund.

Table of contents

01 Installation

02 mix phx.new

03 Directory structure

04 Phoenix.Router

05 HEEx

06 Layouts

07 Ecto.Migration

08 Schema and Repo

09 mount/3

10 mount/3 is called twice

11 Events

12 update/3

13 Function components

14 Path params and routes

15 link/1

16 handle_params/3

17 Contexts

18 Page titles

19 Ecto.Query

20 Changesets part 1

21 Changesets part 2

22 Forms part 1

23 Forms part 2

24 Flash

25 Uniqueness validations

26 Rate limiting

27 phx.gen.auth

28 Messages

29 Associations and preloading

30 Sending a message

31 Seeds

32 Streams

33 External dependencies

34 Timezones

35 Deleting messages

36 Tailwind groups

37 Processes

38 handle_info/3

39 PubSub

40 Hooks

41 Phoenix.Presence part 1

42 Phoenix.Presence part 2

43 Room index page

44 many_to_many

45 Room memberships part 1

46 Room memberships part 2

47 stream_configure

48 Toggle membership

49 'New messages' divider part 1

50 'New messages' divider part 2

51 Static files

52 Asset compilation

53 Unread message count

54 Phoenix.LiveView.JS

55 Modals

56 New room form

57 Live action

58 Phoenix.Component

59 use

60 Usernames

61 Auth pages

62 The User schema

63 User registration

64 User sessions

65 Date dividers

66 Live components

67 File uploads

68 Pagination

69 Threads part 1

70 Threads part 2