Building Real-Time Web Applications with Phoenix LiveView

Gain insights into building real-time web apps with Phoenix LiveView. Learn about creating interactive code, building a game from scratch, and managing distributed real-time dashboards.

Beginner

76 Lessons

244h 20min

Certificate of Completion

Gain insights into building real-time web apps with Phoenix LiveView. Learn about creating interactive code, building a game from scratch, and managing distributed real-time dashboards.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

112 Playgrounds

12 Quizzes

This course includes

112 Playgrounds

12 Quizzes

Course Overview

If you want to program just for the joy of creating, LiveView will be an excellent opportunity for you. This programming model keeps your brain firmly on the server and lets you explore one concept at a time. Layering on graphics makes this kind of exploratory programming almost magical. Programmers learn by writing code, and that’s exactly how this course will work. We’ll work on a project together as if we’re a fictional game company. You’ll write lots of code, starting with small tweaks of generated cod...Show More

What You'll Learn

Learn about the basics of Phoenix LiveView.

Explore techniques that help us organize our code into layers.

Learn Phoenix LiveView design and best practices.

Explore the process of Generators, Changesets and Testing in a LiveView.

Explore different ways of generating shapes by building a game prototype.

What You'll Learn

Learn about the basics of Phoenix LiveView.

Course Content

Introduction

Get familiar with creating real-time web interfaces using Phoenix LiveView.

Before We Start Create a Phoenix Project The LiveView Lifecycle Build a Simple LiveView Quiz

Phoenix and Authentication

Discover the logic behind structuring modules, handling requests, and implementing authentication in Phoenix.

Constructors, Reducers, and Converters Phoenix (One Giant Function)Generate the Authentication Layer Explore Accounts from IEx Protect Routes with Plugs Authenticate The Live View Quiz

Generators: Contexts and Schemas

Break apart contexts and schemas in Phoenix LiveView to streamline CRUD functionalities.

Phoenix Live Generator The Generated Core The Generated Boundary Boundary, Core, or Script?Quiz

Generators: Live Views and Templates

Grasp the fundamentals of Phoenix LiveView workflows, from routing and state management to modal and form interactions.

Application Inventory The Product Index (Part-I)The Product Index (Part-II)Handle Change The Modal Component The Form Component Quiz

Forms and Changesets

Dig deeper into changesets for efficient data handling and real-time form validation using Phoenix LiveView.

Model Change with Changesets Model Change with Schemaless Changesets Schemaless Changesets in LiveView LiveView Form Bindings Live Uploads Quiz

Stateless Components

7 Lessons

Tackle creating dynamic surveys using stateless components in Phoenix LiveView for efficient user experiences.

Stateful Components

7 Lessons

Build on creating and managing stateful components and displaying user demographics and ratings efficiently.

Build an Interactive Dashboard

9 Lessons

Step through building an interactive real-time dashboard with Phoenix LiveView.

Build a Distributed Dashboard

5 Lessons

Get started with building a distributed real-time dashboard using Phoenix LiveView, PubSub, and Presence.

10.

Test Your Live Views

5 Lessons

Break apart effective strategies for unit and integration tests for LiveView components.

11.

Build The Game Core

6 Lessons

Apply your skills to build a game core by managing shapes, points, and user interactions.

12.

Render Graphics With SVG

6 Lessons

Solve problems in building user interfaces with Surface and rendering SVG graphics.

Create Drag and Drop Web Components by Using Phoenix LiveView

Project

13.

Conclusion

1 Lesson

See how it works to build real-time web apps with Phoenix LiveView.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!