Full-Stack Phoenix

A New Course That's 🔥

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

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.

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

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 Watch

2 Create the App Watch

3 Routes, Plugs, and Pipelines Watch

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 Handling Events

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 Styling and Reusing Components

16 Slots

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

18 Show A Raffle

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

20 Ecto Schemas and Migrations

21 Ecto Repo and Context Modules

22 Streaming Collections

23 Writing Ecto Queries

24 Filter Form

25 Handling Form Changes

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

27 Handling URL Filter Params

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

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

30 Admin Table UI

31 New Raffle Form

32 Create Raffles

33 Using An Ecto Changeset

34 Forms With Changesets

35 Live Form Validations

Live Actions

Coming Soon

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.

36 Declaring and Handling Live Actions

37 Updating A Raffle

38 Deleting A Raffle

JS Commands

Coming Soon

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.

39 Sprinkling In JS Commands

Live Scaffolding

Coming Soon

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

Coming Soon

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 APIs

Coming Soon

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

Coming Soon

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

Coming Soon

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.

50 Setting Up The Schemas

51 Designing A Many-To-Many Form

52 Streaming New Tickets

PubSub

Coming Soon

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

Coming Soon

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!

55 Tracking Who's Here

Schemaless Ecto Queries

Coming Soon

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.

56 Dashboard

57 CSV File Exports

File Uploads

Coming Soon

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.

58 Designing a File Upload UI

59 Uploading to Your Server

60 Uploading to the Cloud

For Developers New to Phoenix

Who already know Elixir

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

New to Elixir? No worries! Our comprehensive Elixir & OTP course starts with the fundamentals and gradually works up to advanced topics. We think it's the best course on Elixir that you'll find, and lots of folks agree. It will totally get you ready for this Phoenix course!

What You'll Get

Lifetime access to everything you need!

Get started today!

No monthly subscription or time limit. You own it for life.

Full Course

• 60 videos (8 hours)
• 55+ exercises
• Lifetime access

$249

$179

Buy Now

Start for free

Best Deal

2-Course Bundle

• Phoenix Course
• Elixir Course
• 96 videos (14 hours)
• 110+ exercises
• Lifetime access

$348

$279

Buy Now

10-Seat Team License

$1,790

$1,490

Buy Now

10-Seat Team License

$2,790

$2,290

Buy Now

Frequently Asked Questions 🤔

How is this Phoenix course different from the LiveView course?

Good question!

This Full-Stack Phoenix course:

• assumes you're new to Phoenix
• teaches the entire stack—Phoenix, Ecto, LiveView, and more!
• builds a full-featured application step-by-step from scratch

The LiveView course:

• assumes you already know the Phoenix web framework and Ecto
• teaches Phoenix LiveView through a series of recipes
• adds LiveView pages to an existing Phoenix app

If you're new to Phoenix, we recommend starting with the Phoenix course to learn the framework soup to nuts. Then you can move onto the LiveView course for specialized LiveView recipes.

If you already own the LiveView course, we think you'll get a ton of value out of the Phoenix course because it'll fill in all the gaps. Plus you'll see how to build a complete Phoenix app from the ground up using LiveViews for all the interactive pages.

Do I need to learn Elixir first?

Most definitely! 🙌

Phoenix apps are written in the Elixir programming language. And to keep this course focused and paced just right, we assume you're familiar with Elixir.

Our comprehensive Elixir & OTP course will totally get you ready for the Phoenix course. Indeed, we carefully designed both courses so they dovetail nicely together. No knowledge gaps!

What is early access?

It's how you get started learning Phoenix sooner rather than later!

Rather than waiting for all 60+ modules and 8+ hours of the course to be filmed and edited, we'll release batches of course modules as we have them ready. That way you can knock out a few modules at a time until the course is 100% complete. 👍

Does early access include the exercises and source code, too?

Yup! In addition to the videos, you'll get the exercises, supplemental notes, and all the source code for the modules released during early access. (Mike even threw in his trusty VS Code settings and snippets.)

So you can work through each module—video, notes, exercise—and mark it complete without having to double-back to it later. ✅

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!

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.