Learn Phoenix LiveView

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

Abdisamad Khalif

“This is hands down the most comprehensive Phoenix LiveView course available online. George tackles complex topics with confidence, offering clear explanations, a well-structured curriculum, best practices, and essential security insights. Every part of this course is pure gold.”

Iván Munguía

“This course is phenomenal, well written, engaging with every lesson, useful for beginners but also for more experienced devs. I feel that I’m not only learning LiveView but I’m learning how to be a better developer.

Julian Lindner

“I love this course. This is exactly my learning style: Building a whole app from scratch, starting with the basics but then later on including everything that makes Elixir and Phoenix so great. Building the Slax app is so much fun!”

LiveView is the future of web development

Phoenix LiveView is revolutionizing the world of web development. 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.

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.

Individual license
  • For personal use
  • Lifetime access
  • 94 lessons + full source code
  • All future updates for free
$79
Buy now
Team license
  • Up to 10 team members
$790
$690
Buy now

Questions

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.

Praise

“This is hands down the most comprehensive Phoenix LiveView course available online. George tackles complex topics with confidence, offering clear explanations, a well-structured curriculum, best practices, and essential security insights. Every part of this course is pure gold.

Arrowsmith is the kind of instructor whose future courses I'll enroll in without hesitation.”

“In my 13 years of experience with programming and self-taught learning with online courses, tutorials, books, blogs, etc. I have collected some of my favorite resources and your course is one of them. I’m enjoying it so much and I wouldn’t like it to end.

I don’t usually find and buy written courses although I like to read books, but your course is phenomenal, well written, engaging with every lesson, useful for beginners but also for more experienced devs. I feel that I’m not only learning LiveView but I’m learning how to be a better developer. Thank you for that! I’ll be really looking forward for your next course if you have one in the future :)”

“I’ve followed other Phoenix books and courses, but this one made me discover the full power of the framework by building a real application. It made me discover Phoenix Live features the others didn’t even mention. What is appreciated is that every part does not take much time to code and to learn, provided screenshots and animated GIFs make it even more clear. And it’s so pleasant to see how your future app grows by getting more and more cool features!”
“Among the ways one can learn a programming language, or framework, nothing beats building an application as you learn. Nevertheless, finding the right level of details, aligning what you read with what it does, understanding other options with a rationale about why the one presented makes sense, is the real deal. Learn Phoenix Liveview is the most complete, well organized, well presented, one could find. Best course ever.”
“I love this course. This is exactly my learning style: Building a whole app from scratch, starting with the basics but then later on including everything that makes Elixir and Phoenix so great. Building the Slax app is so much fun!”
“This is a great course! It really helped make Phoenix LiveView more approachable, and the end result is really impressive! Hard to imagine building all this functionality so easily with any other tools.”
“I’ve been really enjoying the course. The pacing seems to be just perfect at least for my taste (I have some experience in Elixir and LiveView but not much) and I especially like how you tend to strike a great balance between using the generators and handwriting code.”
“As an experienced Senior Frontend Developer, Learn Phoenix LiveView proved to be the perfect resource to learn building interfaces in a fullstack way with Phoenix and Elixir."
“This Phoenix LiveView course is fantastic! The focus on a real-world application made the concepts clear and easy to grasp, and the bite-sized exercises left for the reader are fun to implement. Highly recommended!”
“This no-nonsense guide is a great way to go from ‘I have a basic idea’ to ‘I see exactly how the moving pieces are intended to work together’ for a full-featured use of LiveView.”
“I’m really enjoying this course. Good pacing, and things are explained very well.”
“This course is fun to work on. George really nailed this manner of teaching both the theoretical parts of Elixir and the real-world idiomatic patterns at the same time.”
“I like the course a lot, actually I found myself preferring this style to video based ones which I got used to since I have to follow you typing code/commands plus you found the right balance between explaining the concepts and not turning it into a book or copying documentation into it. I really appreciate your effort that is clear in this course and the extra mile you went by building something really practical not the usual Hello World style course with all the respect to other people doing it.”
“If you want to get ramped up quickly on Phoenix and LiveView then look no further. Buy this course! It's a game changer.”
“This has gotta be the best LiveView course out there. This course on the other hand has such a good flow. No words are wasted, while at the same time no stone is left unturned. And the text-based format is much easier to follow than video.”
“This tutorial is well designed with a hands-on approach where we advance and develop something new every lesson. It is amazing to see a real application evolving during every single class, learning how to connect the dots, while passing through different LiveView concepts. It is so well written that it makes us feel like we're in a classroom.”
“George has created a wonderful course that is very thorough. LiveView has been growing up over the last few years with new features and updates being added regularly. The course covered everything I was hoping to get out of the course and more!”
“This course is one of the best LiveView courses out there. George explain the concepts clearly from basics to advanced, engaging you in an awesome adventure, developing an awesome production-ready app. Doing this course you'll be ready to apply for Phoenix jobs or even make your own web apps and start a new business.”
“One of the most useful things I have encountered for learning and understanding practically how to use LiveView. Well, well, well worth the cost and time investment. Thanks for the great work George.“
“This is a very good and comprehensive course teaching you the ins and outs of Phoenix LiveView.”

Table of contents

01 Installation


02 mix phx.new


03 Directory structure


04 Environments & config


05 Phoenix.Router


06 HEEx


07 Layouts


08 Ecto.Migration


09 Schema and Repo


10 mount/3


11 mount/3 is called twice


12 Events


13 update/3


14 Function components


15 Path params and routes


16 link/1


17 handle_params/3


18 Contexts


19 Page titles


20 Ecto.Query


21 Changesets part 1


22 Changesets part 2


23 Forms part 1


24 Forms part 2


25 Flash


26 Uniqueness validations


27 Rate limiting


28 phx.gen.auth


29 Messages


30 Associations and preloading


31 Sending a message


32 Seeds


33 Streams


34 External dependencies


35 Timezones


36 Deleting messages


37 Tailwind groups


38 Processes


39 handle_info/3


40 PubSub


41 Hooks


42 Phoenix.Presence part 1


43 Phoenix.Presence part 2


44 Room index page


45 many_to_many


46 Room memberships part 1


47 Room memberships part 2


48 stream_configure


49 Toggle membership


50 'New messages' divider part 1


51 'New messages' divider part 2


52 Static files


53 Asset compilation


54 Unread message count


55 Phoenix.LiveView.JS


56 Modals


57 New room form


58 Live action


59 Phoenix.Component


60 use


61 ok/1 and noreply/1


62 Usernames


63 Auth pages


64 The User schema


65 User registration


66 User sessions


67 UserAuth


68 Plug and pipelines


69 Endpoint (HTTP)


70 Endpoint (websockets)


71 Authentication & Authorization


72 on_mount


73 live_session


74 Date dividers


75 Live components part 1


76 Live components part 2


77 User profile


78 File uploads part 1


79 Global attributes


80 File uploads part 2


81 File uploads part 3


82 Threads part 1


83 Threads part 2


84 Threads part 3


85 Threads part 4


86 Threads part 5


87 Pagination (limit-offset)


88 Dependency conflicts


89 Pagination (cursor-based) part 1


90 Pagination (cursor-based) part 2


91 Reactions - UI


92 Reactions - data model


93 Reactions - event handling


94 Reactions - JS picker