LiveView course updated for LiveView 1.0 🔥 Full-Stack Phoenix course coming soon!

Full-Stack Phoenix

Coming Fall 2024

Get the lowdown as this exciting new course heats up.

Learning a new web framework too often becomes "the project." Ugh!

You want to build real apps.

Those are the projects you're really excited about.

And yet you need a strategy for getting your arms around Phoenix, Ecto, LiveView, PubSub, Presence, and everything else that comes with the amazing Phoenix framework.

Where do you start? What do you need to learn, and in what order? And how do you put that knowledge into practice?

You may have tried winging it. 😬

We've all been there. You work through a hodgepodge of one-off tutorials, watch random hit-or-miss videos, ask an AI for an assist, and so on.

It may feel like progress, but you know better.

All that jumping around leaves gaps in your skills.

So when you try to build a complete Phoenix app, you don't know how to put everything together. That's frustrating!

And now it feels like learning the framework has become "the project" itself. 😩

What if you had a rock-solid foundation from the get-go?

Then you could focus less on the "how to build" and more on the "what to build."

You'd have the confidence to wield all the power of Phoenix to build multi-user, interactive, real-time web apps at scale.

You'd be flat-out soaring!

Getting there starts with a structured, systematic way of learning Phoenix that:

builds a full-featured, realistic app
starts from scratch
takes it step-by-step
ramps up smoothly, one concept at a time
clearly and concisely explains everything
covers the entire stack

No more gaps. Everything would finally click into place. 😀

This comprehensive course ticks all the boxes in a fun, engaging way.

It's a complete, coherent learning experience:

Watch a short live-coding video
Visualize key concepts through animations
Practice in a project-based exercise
Exclaim "Aha, now I get it!"
Repeat for the next concept

This course has everything you need, sequenced in the right order, and is paced for experienced developers. Nothing is held back: we tackle complex features by breaking down the concepts so everything makes sense.

Get in, get out, and get your project done. 🚀

61 Videos • 8 Hours

We build an app feature-by-feature in the videos so you see and understand exactly how it's done. Each live-coding video is:

tightly-edited to respect your time
straight to the point without any rambling or fumbling
perfectly paced so you're not left behind or nodding off
streamable with English subtitles and also downloadable

Animations

Seeing code is hardly enough. You also gotta see the big picture. All the key concepts are explained through visual animations so you get a solid mental model for how things work.

Exercises & Notes

In the guided exercises following each video, you build a separate Phoenix app from scratch. It has similar features to the app we build in the videos, but it's a different context to tickle your brain. Each hands-on exercise:

immediately reinforces what you learned in the video
includes the solution, of course
spotlights handy tips and tricks

2 Production-Ready Apps

In the end, you have the final source code for two full-featured Phoenix apps to reference when building your own apps. Yay!

Course Outline

There's a lot to it because you can do a lot with it!

Getting Started

Let's go! After getting your development environment set up, we generate a new Phoenix app, get settled in, and look at how requests are processed.

1 Intro and Setup

2 Create the App

3 Routes, Plugs, and Pipelines

Controllers & Views

You can render pages in Phoenix using controllers or LiveViews. We want you to know how to use both! First up, we render a couple pages using controllers, actions, views, and templates.

4 First Controller

5 Server-Side Rendering With HEEx

6 Route Parameters

LiveView Basics

When building interactive UIs in this course, we'll use LiveViews. They react to user events over a websocket (at scale!) and update the browser in real-time. We code up our first two LiveViews with stops along the way to understand all the fundamental concepts.

7 Controller or LiveView?

8 First LiveView

9 Making It Interactive

10 The LiveView Lifecycle

11 Dynamic Form

12 Handling Process Messages

13 Listing Raffles

Function Components

Let's write our first function components! They're an easy way to reuse styled markup and make our templates more readable. You'll use function components all over the place, over and over again.

14 Designing Components

15 Slots

16 Layouts

Live Navigation

Page navigation with LiveView is really sweet. It's fast, in part because it happens over an open websocket connection. And it's simpler to implement as compared to client-side routing in a JS framework.

17 Show A Raffle

18 Live Navigating

19 Live Patching

Ecto Schemas and Queries

It's high time we put our raffles in a database. In Phoenix, we do that using the powerful Ecto library. We unpack all of its ins and outs so you can wield its powers.

20 Defining Ecto Schemas

21 Ecto Repo and Context Modules

22 Writing Ecto Queries

23 Filtering and Sorting Raffles

24 Dynamically Composing Queries

25 URL Filter Params

26 Async Data Fetching

Ecto Changesets

How do you keep bad data out of your database? Changesets are Ecto's way of validating data and casting it to the schema types. They're a key part of Phoenix apps, especially when it comes to forms. We dive in and put them to work.

27 Admin Table UI

28 New Raffle Form

29 Using An Ecto Changeset

30 Forms With Changesets

31 Live Form Validations

Live Actions

Using live actions, a single LiveView can handle multiple URLs and their params. We refactor our code to conditionally render a form based on the current live action. This gets us ready to support more actions.

32 Declaring and Handling Live Actions

Streams

LiveView is chock full of optimizations! Streams let you efficiently manage a large collection of items in the browser without keeping them in memory on the server. By the end, you'll know to dynamically add, update, and delete items while conserving memory.

33 Streaming Inserts

34 Using the Table Component

35 Updating A Raffle

36 Deleting A Raffle

Live Components

In addition to function (stateless) components, LiveView also has live (stateful) components. We build a live component step-by-step so you understand how they work, and when and why to use them.

37 Designing Live Components

JS Commands

Sometimes you need to run common client-side actions, but don't want to eject out of Elixir-land and into JavaScript-land. JS Commands let you avoid the context switch, and add some flair without writing any JS.

38 Sprinkling In JS Commands

39 Using the Modal Component

Live Scaffolding

We're ready for our second resource. We built the UI for the first resource from scratch, so this time we can use the live generator and you'll know exactly how the generated code works!

40 Using the Live Generator

Ecto One-to-Many Associations

Ecto supports all the different types of associations you'd expect for modeling relationships between database tables. We start with the one-to-many and build out the UI to tie things together.

41 Who Belongs To, And How Manys?

42 Using and Preloading Associations

43 Ecto Joins

JSON and APIs

Want to build a super fast and scalable JSON API, and do it quickly? Phoenix supports that out-of-the-box, too.

44 Building a Quick JSON API

User Accounts & Authentication

With Phoenix, you can generate a full-featured (secure!) authentication system right into your app. After understanding how it works, we use it to authenticate users and restrict access to LiveViews.

45 Using the Auth Generator

46 Authentication Plugs

47 Restricting Access to LiveViews

48 Live Sessions

49 Admin Users

Ecto Many-to-Many Associations

From the database tables all the way through to the UI, we explore all the details of a many-to-many association so you can confidently use one in your app.

50 Buy As Many Tickets As You Want

51 Creating A Many-To-Many Form

52 Streaming New Tickets

PubSub

You don't have to jump through hoops to update LiveViews in real-time across multiple browsers. All Phoenix apps have a built-in PubSub server. You'll learn how to use it to keep everything seamlessly in sync!

53 Real-Time Updates Using PubSub

54 Broadcasting A Winner

Presence

Want to know who's viewing a page right now? Phoenix has unrivaled, built-in presence tracking that uses PubSub to broadcast presence updates and status changes in real-time. Very cool!

55 Tracking Who's Here

56 Updating Presences in Real-Time

Schemaless Ecto Queries

Ecto lets you write queries directly against your database, skipping schemas altogether. This is super useful when you need to make a dashboard that pulls together specific info from multiple database tables.

57 Writing Schemaless Ecto Queries

58 File Exports to CSV

File Uploads

File uploads are an essential feature of many web apps, and LiveView has fantastic built-in support for uploading files concurrently. You'll learn how to upload files with real-time progress updates and live validations.

59 Designing a File Upload UI

60 Uploading to Your Server

61 Uploading to the Cloud

For Experienced Developers

Who are already familiar with Elixir

To keep this course focused and paced just right, we assume you're comfortable with Elixir— it's the programming language you use to write Phoenix apps.

New to Elixir? Hey, no worries. Our comprehensive Elixir & OTP course will totally get you ready for Phoenix. We think it's the best course on Elixir that you'll find, and lots of folks agree!

Created with 🧡 by
Mike and Nicole Clark

Howdy! We're the friendly couple behind The Pragmatic Studio.

We've been making courses for developers since 2012. It's a privilege to get to teach together and serve everyone who supports us.

We love Elixir and Phoenix, and have happily used them since the early days. To help you learn them, we've created all sorts of courses: Elixir and OTP, Phoenix LiveView, Multi-Player Game with Phoenix, and Full-Stack GraphQL with Phoenix.

We made this course because everyone was hollering for it. 😄 Like our other courses, folks wanted an approachable, pragmatic, and enjoyable way to learn Phoenix. So here it is! A course that's carefully structured to cover everything you need to know to start making your own Phoenix apps.

We hope you enjoy it!

More about us →

With Help From Awesome People

José and Chris answered questions about the Phoenix way of doing things, and we're grateful!

José Valim is the creator of the Elixir programming language, co-creator of Phoenix LiveView, and Chief Adoption Officer at Dashbit.

Chris McCord is the creator of the Phoenix web framework, co-creator of Phoenix LiveView, and a programmer at Fly.io.