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. 🚀

57 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. And 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're stateful processes that 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

Page Navigation

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

17 Show A Raffle

18 Live Navigating

Ecto Schemas and Queries

In Phoenix, we interact with a database using the powerful Ecto library. To get things started, we learn how to persist and query items using Ecto. We also use streams to efficiently manage a collection of items in the browser without keeping them in the LiveView's state on the server.

19 Defining Ecto Schemas

20 Ecto Repo and Context Modules

21 Streaming Collections

22 Writing Ecto Queries

23 Filtering and Sorting

24 Dynamically Composing Queries

Patching a LiveView

LiveViews are stateful processes. That's a game-changer in situations where we want to navigate to the current LiveView process with an updated URL instead of navigating to a new page.

25 Handling URL Filter Params

26 Live Patching

Asynchronous Operations

It's common for a LiveView to need data that we don't want to wait for before rendering the page. Good news: Elixir is excellent at performing asynchronous work, and LiveView builds on that to make it easy to asynchronously fetch data while handling the loading, error, and success states.

27 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. Knowing how to effectively use changesets is crucial in Phoenix apps, especially when it comes to forms.

28 Admin Table UI

29 New Raffle Form

30 Using An Ecto Changeset

31 Forms With Changesets

32 Live Form Validations

Live Actions

Using live actions, a single LiveView can handle multiple URLs and their parameters. We also learn how to efficiently delete a resource from a stream.

33 Declaring and Handling Live Actions

34 Updating A Raffle

35 Deleting A Raffle

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 add client-side flair without writing custom JS.

36 Sprinkling In JS Commands

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.

37 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.

38 Who Belongs To, And How Manys?

39 Using and Preloading Associations

40 Ecto Joins

JSON APIs

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

41 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.

42 Using the Auth Generator

43 Authentication Plugs

44 Restricting Access to LiveViews

45 Live Sessions

46 Admin Users

Ecto Many-to-Many Associations

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

47 Setting Up The Schemas

48 Designing A Many-To-Many Form

49 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.

50 Real-Time Updates Using PubSub

51 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 in real-time!

52 Tracking Who's Here

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 disparate info from multiple database tables.

53 Dashboard

54 CSV File Exports

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.

55 Designing a File Upload UI

56 Uploading to Your Server

57 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.