This device is not compatible.

PROJECT


Create Drag and Drop Web Components by Using Phoenix LiveView

Learn to use Phoenix LiveView to implement a drag and drop feature in your web applications. This project uses hooks to ensure that the client-side drag and drop data is available at the server-side LiveView. The data modifications done by the client are available at the server end in real-time.

Create Drag and Drop Web Components by Using Phoenix LiveView

You will learn to:

Create interactive web applications using Phoenix LiveView.

Develop a real-time application using Elixir.

Handle events in real-time.

Use hooks for event handling.

Skills

Functional Programming

Web Frameworks

Real-time Event Handling

Interactive Real-time Web Applications

Prerequisites

Basic understanding of Elixir

Basic understanding of Phoenix LiveView

Basic understanding of MVC architecture

Technologies

Elixir

Phoenix

JavaScript

Project Description

The Phoenix LiveView library allows users to build highly interactive applications. It provides rich, real-time user experiences with server-rendered HTML. LiveView programming uses a declarative model. It keeps track of all the changes and allows the users to write their code as any other server-rendered HTML.

In the first part of the project, we’ll use Phoenix LiveView to create a basic e-learning website. Then we’ll implement a learning plan feature to enable users to drag and drop different courses into a group. This will allow the user to drag courses from the initial pool of courses and drop them in a drop zone. In the end, they’ll be able to see and follow their customized learning plan. The data dragged and dropped at the front end will be available on the server-side as well.

Project Tasks

1

Setup and Configuration

Task 0: Get Started

Task 1: Initial Setup

2

Drag and Drop

Task 2: Assign Values to the Socket

Task 3: Create a Drop Zone

Task 4: Update the Template

Task 5: Add Hooks

3

Event Handler

Task 6: Add an Event Handler

Task 7: Find the Drop Zone

Task 8: Update Assigns on Drop

Task 9: Run the Application

Task 10: Add a Button Click Event Handler

Congratulations!