The Pragmatic Studio
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.
No spam and we'll never share your email. Here's our privacy policy.

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
Live Coding 1 Live Coding 2
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.

Animation 1 Animation 2
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
Exercise 1 Exercise 2
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!

App 1 App 2

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

Mike and Nicole

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!

With Help From Awesome People

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

José Valim

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

Chris McCord

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

Be like, "Aha, now I totally get Phoenix!" 🚀

No spam and we'll never share your email. Here's our privacy policy.