DEV Community: Colux

Building LibreTune: A Deep Dive into Modern Android Music App Development

Colux — Mon, 15 Sep 2025 16:03:24 +0000

LibreTune. The name itself suggests freedom and melody. For me, it represents a journey into the intricate world of modern Android app development, a personal quest to build a music player that not only works but thrives on reactive principles, sophisticated data handling, and a seamless user experience.

This isn't just another music app; it's a testament to learning, overcoming challenges, and embracing the power of Jetpack Compose and Kotlin Flow.

The Genesis: Why LibreTune?

Every project starts with an idea, often born from curiosity or a personal itch. For me, it was both. I wanted to explore how to build a robust media application from the ground up, integrating complex data flows, a local-first caching strategy, and a highly dynamic UI.

While existing music apps are plentiful, the opportunity to architect one's own, understanding every layer from the UI down to the network requests, was too compelling to pass up. LibreTune became my playground for mastering the nuances of a truly reactive Android ecosystem.

Architectural Foundations: Embracing Clean Code and MVI

From the outset, a solid architecture was paramount. I opted for a combination of Clean Architecture principles and the Model-View-Intent (MVI) pattern. This meant clear separation of concerns:

UI Layer (Compose): Responsible for rendering the UI and reacting to user interactions.
ViewModel Layer: Manages UI state, handles user intents, and orchestrates data from the repository.
Domain Layer: Contains business logic and use cases, agnostic to UI or data sources.
Data Layer (Repository, DAOs, Network): Handles all data operations, abstracting whether data comes from a local database, a network API, or an in-memory cache.

The MVI pattern, with its single source of truth for UI state (a StateFlow in the ViewModel), proved invaluable. It simplifies state management and makes the UI highly predictable. Each user interaction translates into an "Intent," which the ViewModel processes, leading to a new "State" that the UI then observes and renders.

Learning & Challenge: Initially, differentiating between the responsibilities of the Domain and Data layers was a nuanced challenge. When should a "use case" live in the Domain layer versus a direct call from the ViewModel to the Repository? The learning here was to prioritize clarity: if logic involves more than just fetching and mapping data (e.g., combining multiple repository calls, applying business rules), it belongs in a Use Case. For simple fetch-and-transform operations, the Repository suffices. This decision-making process refined my understanding of true separation of concerns.

The Reactive Heartbeat: Kotlin Flow and State Management

Kotlin Flow is the lifeblood of LibreTune. Every piece of data, from search results to playback history and home screen recommendations, flows through Flows and is exposed as StateFlows or SharedFlows. This reactive paradigm ensures that the UI always reflects the latest available data with minimal boilerplate.

Dynamic Home Screen Feeds: A Symphony of `combine` and `flatMapLatest`

One of the most complex, yet rewarding, challenges was building the dynamic home screen. Imagine a home screen that learns from your behavior: "Play It Again" from your recent history, "More from [Artist]" based on artists you've saved, and "Fans Also Like" from related artists. This requires merging multiple data streams:

HistoryDao: For recently played songs, artists, and albums.
LibraryDao: For saved artists and playlists.
ArtistDao & PlaylistDao: To fetch related content based on the "seed" data from history/library.

The solution involved a powerful combination of Flow operators:

combine: Used extensively to merge multiple Flows into a single Flow. For instance, combining recentlyPlayedArtistsFlow and savedArtistsFlow to create a unified seedArtistsFlow.
flatMapLatest: Crucial for creating dependent flows. Once we had our seedArtists and seedAlbums, flatMapLatest allowed us to launch new flows (e.g., getAlbumsAndSinglesByArtistId for each seed artist) and dynamically re-collect them whenever the seed data changed.

Challenge: My initial attempt to build this feed suffered from a critical bug: calling .collect() inside the combine operator's transform block. This caused the entire flow to hang indefinitely. The collect function is suspending and blocking, designed for terminal operations, not for transforming data within a reactive stream.

Learning: This forced me to truly understand the difference between a suspending, blocking operation and a declarative transformation. The fix involved ensuring every step in the data pipeline was a Flow operator (map, filter, flatMapLatest, combine) and that .collect() was only called once at the very end in the ViewModel. This experience solidified my understanding of how to compose complex reactive data streams without inadvertently blocking them.

Smart Throttling: Optimizing UI Updates

Another subtle, yet impactful, learning came from optimizing how frequently the UI updates from rapidly changing data sources. For example, a music player's progress bar or a continuously updating recommendation feed. Updating the UI on every single data change can lead to unnecessary recompositions and battery drain.

I implemented a custom Flow operator called smartThrottle:

fun <T> Flow<T>.smartThrottle(
    period: Duration,
    emitNowPredicate: (previous: T?, current: T) -> Boolean
): Flow<T> {
    var lastEmitTime = 0L
    var previousItem: T? = null

    return this.transform { currentItem ->
        val currentTime = System.currentTimeMillis()

        val shouldEmit =
            emitNowPredicate(previousItem, currentItem) || // Emit if predicate is true
            (currentTime - lastEmitTime) >= period.inWholeMilliseconds // Emit if time is up

        if (shouldEmit) {
            emit(currentItem)
            lastEmitTime = currentTime
            previousItem = currentItem
        }
    }
}

This operator allows for intelligent updates:

First emission is always instant: Ensures a fast initial load.
Critical changes are instant: A predicate function allows me to define conditions (e.g., song changed, play/pause state toggled) that trigger an immediate update.
Non-critical changes are throttled: Updates like playback position (if only the position changes) are emitted only after a specified duration.

Challenge: The initial sample operator was too aggressive; it delayed even the first emission. Then, the first iteration of smartThrottle didn't consider the previousItem, making it impossible to check for changes.

Learning: This iterative refinement highlighted the importance of fine-grained control over Flow emissions and the power of transform for building highly custom operators. It also taught me to anticipate performance bottlenecks and proactively design solutions to mitigate them, ensuring a smooth and responsive user experience even with high-frequency data.

Jetpack Compose: Building a Dynamic and Responsive UI

Jetpack Compose has been a game-changer for LibreTune's UI. Its declarative nature aligns perfectly with reactive data flows.

From Scaffold to Shared Composable: The `ScaffoldWithDrawer`

To maintain consistency and reduce boilerplate, I extracted the common screen structure (drawer navigation, Scaffold, TopAppBar, BackHandler) into a reusable ScaffoldWithDrawer composable.

@Composable
fun ScaffoldWithDrawer(
    navController: NavHostController,
    topBar: @Composable (openDrawer: () -> Unit) -> Unit,
    content: @Composable (paddingValues: PaddingValues) -> Unit
) {
    // ... drawerState, BackHandler, ModalNavigationDrawer ...
    Scaffold(topBar = { topBar(...) }) { innerPadding ->
        content(innerPadding)
    }
}

Challenge: My initial BackHandler implementation within the ScaffoldWithDrawer was occasionally overridden by BackHandlers in child composables, leading to unexpected behavior (e.g., pressing back wouldn't close the drawer if a search bar was focused).

Learning: This taught me the "nearest BackHandler wins" rule in Compose. The solution was to carefully manage the enabled state of BackHandlers, ensuring that more specific handlers (like clearing search focus) take precedence when active, while the general drawer-closing handler remains the fallback.

The Pitfalls of Nested Scrolling

A classic Compose pitfall I encountered was attempting to nest two vertically scrolling components (e.g., a LazyColumn inside another LazyColumn). This predictably resulted in an IllegalStateException due to ambiguous height measurements.

Learning: The fundamental rule is: one scrolling container per direction. If the entire screen needs to scroll, use a single LazyColumn for the root, and define different item { ... } blocks for various content sections (headers, carousels, lists). Modifier.fillParentMaxHeight() is a lifesaver within a LazyColumn's item block when a child needs to take up the remaining screen height.

Optimizing Media Playback: ExoPlayer and the Service Layer

Integrating ExoPlayer into a MediaSessionService was a significant undertaking. The goal was smooth, background playback with robust controls and notifications.

Custom Commands and Asynchronous URL Fetching

A key performance challenge was handling song playback when the media URL wasn't immediately available. Directly setting MediaItems with remote URLs can cause delays. The solution involved:

Custom SessionCommand: To tell the PlaybackService to load a playlist and a starting index.
Placeholder MediaItems: Initially adding MediaItems with just a mediaId (the song ID) but no actual Uri to ExoPlayer. This immediately updates the playlist structure.
Background URL Fetching: Using a CoroutineScope in the service to fetch the actual URL for the currently playing song, replace its MediaItem, prepare the player, and start playback.
Pre-fetching: Continuously fetching URLs for the rest of the playlist in the background, asynchronously replacing their MediaItems as URLs become available. This ensures a smooth transition to the next song.

// Simplified snippet from PlaybackService
backgroundFetchJob = CoroutineScope(Dispatchers.Main).launch {
    val songUrl = getOrFetchUrl(startingSong) // Fetches from cache or network
    if (songUrl != null) {
        val realMediaItem = placeholderMediaItems[startingIndex].buildUpon().setUri(songUrl).build()
        exoPlayer.replaceMediaItem(startingIndex, realMediaItem)
        exoPlayer.prepare()
        exoPlayer.play()
    }
    // ... continue pre-fetching others ...
}

Challenge: Initially, the player would pause and buffer visibly when transitioning to a song whose URL hadn't been fetched yet.

Learning: This led to a deeper understanding of ExoPlayer's replaceMediaItem and the importance of background pre-fetching. It demonstrated how to decouple the UI's perception of a playlist (placeholder items) from the actual readiness of the media content (fetched URLs), significantly improving the playback experience.

In-Memory URL Caching

To further boost performance, especially for repeated plays of the same song within a session, I implemented a simple in-memory cache (MutableMap<String, String>) in the PlaybackService. Before making a network request for a song's URL, the service first checks this cache.

Challenge: The main challenge with URL caching is knowing when URLs expire.

Learning: For a single-session optimization, a simple Map is sufficient. For persistent caching across sessions, a more robust solution with a Time-To-Live (TTL) mechanism would be necessary, constantly re-fetching expired URLs. This pragmatic approach allowed for a significant performance gain without over-engineering for a feature beyond the current scope.

What's Next for LibreTune?

LibreTune, while a powerful learning tool, is still evolving. Future plans include:

Offline Mode: Allowing users to download and play songs offline. This would involve robust local storage and playback logic.
User Authentication: For personalized settings and cloud sync.
More Recommendation Algorithms: Leveraging more advanced patterns from user behavior to suggest even more relevant content.
Accessibility Enhancements: Ensuring the app is usable by everyone.

Conclusion: The Journey Continues

Building LibreTune has been an incredibly enriching experience. It pushed me to master Kotlin Flow's intricacies, leverage Jetpack Compose's declarative power, and design a resilient media architecture. Each challenge was a learning opportunity, refining my skills and deepening my appreciation for modern Android development.

This project stands as a testament to the idea that sometimes, the best way to learn is to build, iterate, and solve problems head-on. The melody of code continues, and so does the journey of LibreTune.

Have a look at the source code on GitHub.

Liberty Beats - Build a DAW in React

Colux — Mon, 01 Jul 2024 06:45:02 +0000

In this blog post, we will explore how to build a Digital Audio Workstation (DAW) in React. We will use the Tone.js library to create music and audio effects, and we will discuss the key components and features of a DAW application.

Introduction

A Digital Audio Workstation (DAW) is a software application used for recording, editing, and producing audio files. DAWs are commonly used by musicians, sound engineers, and producers to create music, podcasts, and other audio content.

In this tutorial, we will dive into the logic of Liberty Beats, a simple (but powerful) DAW application in React that allows users to create and edit music tracks.

The application is built using React components, state management, and the Tone.js library for audio synthesis and effects.

First Steps

Before we start building the DAW application, let's outline the key features and components that we want to include:

Track Editor: A visual interface for creating and editing music tracks. Users can add, remove, and modify audio clips, adjust volume and panning, and apply effects.
Transport Controls: Play, pause, stop, and seek controls for playback. Users can control the tempo from the panel.
Mixer: A mixer section for each track, where users can adjust volume, set solo and mute options.

Create a Vite React App and Set Up Tone.js

To get started, we will create a new React application using Vite, a fast build tool that supports React and modern JavaScript features.

Then, follow my previous blog post on how to integrate Tone.js in a React application to set up Tone.js in your project.

Create a store for the DAW

In Liberty Beats, we used Redux Toolkit to manage the application state. Redux Toolkit is a powerful library that simplifies the process of managing state in React applications.

Once you have set up Redux Toolkit in your project, you can create a store for the DAW application. The store will hold the state of the application, and the most important part is the playlist slice, which will contain the tracks and their settings.

Here's the type of the track object, taken from the Liberty Beats project:

export interface Track {
  id: string
  title: string

  /**
   * Tailwind CSS color class
   * @example 'green'
   */
  color: TrackColor
  instrumentPreset: InstrumentPreset

  /**
   * Drums track specific data (can be undefined if track is not drums track)
   */
  trackDrums?: TrackDrums
  bars: Bar[]

  volume: number

  muted: boolean
  soloed: boolean
  areThereAnyOtherTrackSoloed: boolean
}

In the Track interface, we define the properties of a track:

id: A unique identifier for the track.
title: The name of the track.
color: A Tailwind CSS color class for the track (values set in the TrackColor enum).
instrumentPreset: The instrument preset for the track, defined in the InstrumentPreset enum.
trackDrums: Specific data for drums tracks (can be undefined if the track is not a drums track). Drums need a different representation in the UI, and also different settings when it comes to the sequencer.
bars: An array of Bar objects, representing the bars in the track. Each Bar object contains the notes for each step in the bar.
volume: The volume level of the track.
muted: A boolean value indicating whether the track is muted.
soloed: A boolean value indicating whether the track is soloed.
areThereAnyOtherTrackSoloed: A boolean value indicating whether there are other tracks soloed in the playlist.

Building the Editor

Building the Editor is one of the most challenging parts of the DAW application. The Editor is a grid-based interface where users can create and edit music patterns by placing notes on a grid.

In Liberty Beats, we used a custom Editor component that allows users to create and edit music patterns for each track. The Editor component is built using React and Tone.js, and it provides a visual interface for creating and editing music patterns.

At the very beginning of the project, the Grid was made using a simple HTML table, but then I switched to a more performant solution using a canvas element. The canvas element allows for better performance and more flexibility when it comes to drawing the grid and the notes.

Here's a simplified version of the Editor component in Liberty Beats:

import React, { useEffect, useRef } from 'react'
import { Bar, Note } from '../types'
import { drawGrid, drawNotes } from '../utils/draw'

interface EditorProps {
  bars: Bar[]
  onNoteClick: (barIndex: number, stepIndex: number) => void
}

const Editor: React.FC<EditorProps> = ({ bars, onNoteClick }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current
      const ctx = canvas.getContext('2d')

      if (ctx) {
        drawGrid(ctx, bars)
        drawNotes(ctx, bars)
      }
    }
  }, [bars])

  const handleClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const rect = event.currentTarget.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top

    const stepIndex = Math.floor(x / 20)
    const barIndex = Math.floor(y / 20)

    onNoteClick(barIndex, stepIndex)
  }

  return (
    <canvas
      ref={canvasRef}
      width={bars[0].notes.length * 20}
      height={bars.length * 20}
      onClick={handleClick}
    />
  )
}

export default Editor

Implementing the Transport layer

The Transport layer is responsible for controlling the playback of the tracks in the DAW application. It provides controls for playing, pausing, stopping, and seeking the playback of the tracks.

In Liberty Beats, we used the Tone.Transport object from the Tone.js library to control the playback of the tracks. The Transport layer provides controls for starting, stopping, and seeking the playback of the tracks, as well as setting the tempo and time signature.

Using the store as a source of truth, we can easily control the playback of the tracks in the application. Here's a simplified version of the Transport component in Liberty Beats:

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectPlaylist, setPlaying } from '../store/playlistSlice'

const Transport: React.FC = () => {
  const dispatch = useDispatch()
  const playlist = useSelector(selectPlaylist)

  const handlePlay = () => {
    dispatch(setPlaying(true))
  }

  const handlePause = () => {
    dispatch(setPlaying(false))
  }

  const handleStop = () => {
    dispatch(setPlaying(false))
  }

  return (
    <div>
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={handleStop}>Stop</button>
    </div>
  )
}

export default Transport

Conclusion

In this blog post, we explored how to build a Digital Audio Workstation (DAW) in React. We discussed the key components and features of a DAW application, including the Track Editor and Transport Control.

We used the Tone.js library to create music and audio effects, and we discussed how to manage the state of the application using Redux Toolkit.

Liberty Beats is a simple (but powerful) DAW application that allows users to create and edit music tracks. The application is built using React components, state management, and the Tone.js library for audio synthesis and effects.

You can find the full source code of the Liberty Beats project on GitHub: Liberty Beats

I hope you enjoyed this tutorial and found it helpful. If you have any questions or feedback, feel free to leave a comment below.

Happy coding!

Integrate Tone.js in a React application

Colux — Sat, 13 Apr 2024 10:24:43 +0000

How to use Tone.js library to create music in a React application.

Introduction

The tone.js library is a popular choice for creating interactive audio applications in the browser. It provides a high-level abstraction layer over the native Web Audio API, making it easier to work with audio synthesis, effects, and sequencing. Tone.js offers a rich set of features, including oscillators, filters, effects, and samplers, allowing developers to create complex soundscapes and music compositions with ease. In this blog post, we will explore how to integrate Tone.js into a React application and use it to create music.

We will also discuss the pros and cons of using Tone.js for web audio development, helping you decide whether it is the right choice for your project.

How Tone.js Works

Tone.js is built on top of the Web Audio API, a powerful browser feature that allows developers to create and manipulate audio in the browser. The library provides a set of classes and functions that simplify common audio tasks, such as creating oscillators, applying effects, and sequencing notes.

Here's a simple example of how to create a basic synthesizer using Tone.js:

import * as Tone from 'tone'

// Create a new synthesizer
const synth = new Tone.Synth().toDestination()

// Play a note
synth.triggerAttackRelease('C4', '8n')

In this example, we import the Tone.js library and create a new synthesizer using the Tone.Synth class. We then play a note by calling the triggerAttackRelease method with the note name ('C4') and duration ('8n') as arguments.

Tone.js provides a wide range of classes and functions for creating more complex audio applications, including oscillators, filters, effects, and sequencers. Developers can combine these components to build interactive music compositions, games, and other audio-driven experiences in the browser.

For more information on Tone.js and its features, you can refer to the official documentation.

Integrating Tone.js in a React Applications

Integrating Tone.js into a React project introduces some unique technical considerations, given React's component-based architecture and lifecycle methods. Let's explore some key technical aspects of using Tone.js in a web project built with React.

Step 1: Managing Application Lifecycle

In React, managing state and component lifecycle is crucial for building interactive applications. When incorporating Tone.js, developers should consider how audio state interacts with React component state and lifecycle methods.

One common approach is to use React's state management to control audio playback, effects, and other parameters. Developers can leverage React's useState and useEffect hooks to update audio state and trigger side effects when components mount, update, or unmount.

import React, { useState, useEffect } from 'react'
import * as Tone from 'tone'

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [synth, setSynth] = useState(null)

  useEffect(() => {
    // Initialize Tone.js components
    const newSynth = new Tone.Synth().toDestination()
    setSynth(newSynth)

    return () => {
      // Clean up Tone.js components
      newSynth.dispose()
    }
  }, [])

  const handlePlay = () => {
    if (synth) {
      synth.triggerAttackRelease('C4', '8n')
      setIsPlaying(true)
    }
  }

  const handleStop = () => {
    if (synth) {
      synth.triggerRelease()
      setIsPlaying(false)
    }
  }

  return (
    <div>
      <button onClick={handlePlay} disabled={isPlaying}>
        Play
      </button>
      <button onClick={handleStop} disabled={!isPlaying}>
        Stop
      </button>
    </div>
  )
}

export default AudioPlayer

If we were using a state management library like Redux or Context API, we could also manage audio state globally and share it across components.

Step 2: Optimizing Performance

Efficiently managing performance is essential when using Tone.js in React, especially for applications with complex audio processing or large component trees. Developers should be mindful of potential performance bottlenecks and optimize where necessary.

One optimization technique is to use memoization with React's useMemo hook to cache expensive computations or objects, such as Tone.js synthesizers or effects, preventing unnecessary re-renders and memory allocations.

import React, { useState, useEffect, useMemo } from 'react'
import * as Tone from 'tone'

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false)

  const synth = useMemo(() => new Tone.Synth().toDestination(), [])

  useEffect(() => {
    return () => {
      synth.dispose()
    }
  }, [synth])

  const handlePlay = () => {
    synth.triggerAttackRelease('C4', '8n')
    setIsPlaying(true)
  }

  const handleStop = () => {
    synth.triggerRelease()
    setIsPlaying(false)
  }

  return (
    <div>
      <button onClick={handlePlay} disabled={isPlaying}>
        Play
      </button>
      <button onClick={handleStop} disabled={!isPlaying}>
        Stop
      </button>
    </div>
  )
}

export default AudioPlayer

Pros of Using Tone.js

### Abstraction Layer

Tone.js provides a high-level abstraction layer over the native Web Audio API, simplifying complex audio operations. Developers can focus on creating musical compositions and interactions without getting bogged down in low-level audio programming details.
### Comprehensive Feature Set

The library offers a rich set of features, including oscillators, effects, filters, and samplers, enabling developers to create intricate soundscapes and music compositions with ease.
### Cross-Browser Compatibility

Tone.js handles browser inconsistencies and optimizations under the hood, ensuring consistent audio playback across different platforms and browsers. This saves developers from the hassle of dealing with compatibility issues themselves.
### Community and Documentation

Tone.js benefits from an active community and extensive documentation, making it easy for developers to get started and find solutions to common challenges. The library is well-maintained and frequently updated with new features and improvements.
### Integration with Web Audio Worklet

Tone.js seamlessly integrates with the Web Audio Worklet API, allowing for efficient audio processing in separate threads. This enables developers to build performant and responsive web audio applications.

Cons of Using Tone.js

### Additional Dependency

Using Tone.js adds an extra dependency to your project, which may increase the overall bundle size and complexity. Developers should consider whether the benefits outweigh the cost of including an additional library in their application.
### Learning Curve

While Tone.js simplifies many aspects of web audio programming, it still requires a learning curve, especially for developers new to audio synthesis and processing concepts. Beginners may need to invest time in understanding the library's API and best practices.
### Performance Overhead

Although Tone.js aims to optimize audio performance, it may introduce some performance overhead compared to using native Web Audio API directly. Developers building performance-critical applications should carefully assess whether Tone.js meets their performance requirements.
### Limited Low-Level Control

Tone.js abstracts away many low-level audio details, which can be advantageous for rapid development but may limit the level of control for advanced users. Developers with specific audio processing requirements may find themselves constrained by the library's high-level abstractions.
### Browser Support for Advanced Features

Some advanced features of Tone.js, such as Web Audio Worklet integration, may not be fully supported in all browsers, requiring fallback mechanisms or alternative approaches for cross-browser compatibility.

Conclusion

Tone.js offers a powerful and convenient way to incorporate interactive audio into web applications, with its abstraction layer, comprehensive feature set, and community support. However, developers should weigh the pros and cons carefully to determine whether it aligns with their project requirements and constraints. For those seeking a balance between ease of use and performance, Tone.js remains a compelling choice in the landscape of web audio development.

I hope you found this blog post helpful and that you learned something new. If you have any questions or feedback, feel free to reach out to me on Twitter. I'm always happy to help!

Drag and Drop feature in React

Colux — Wed, 20 Mar 2024 18:06:06 +0000

How to Implement Drag and Drop feature without using any library.

Introduction

In this blog post, I will show you how to implement a simple Drag and Drop feature in a React application without using any library.

Why Drag and Drop?

The Drag and Drop feature is a common interaction pattern that allows users to move elements around the page. It is a great way to make your application more interactive and user-friendly.

Getting Started

To implement the Drag and Drop feature, we will use the HTML5 Drag and Drop API. This API provides a set of events and methods that allow you to create a custom Drag and Drop behavior.

Step 1: Create a new React application

First, let's create a new React application using Create React App.

npx create-react-app drag-n-drop --template typescript

And let's navigate to the newly created project.

cd drag-n-drop

Now we can start the development server.

npm start

This will start the development server and open the application in your default web browser.

Now that we have our React application set up, let's move on to the next step. But before, let's open our project in our favorite code editor. I personally use Visual Studio Code, but you can use any code editor you prefer.

code .

Step 2: Create a Draggable component

Next, let's create a new component called Draggable that will represent the draggable element.

We'll create it in the src folder.

import React from 'react'

const Draggable: React.FC = () => {
  return (
    <div
      className="draggable"
      draggable
      onDragStart={(e) => {
        e.dataTransfer.setData('text/plain', 'Hello, World!')
      }}
    >
      Drag me!
    </div>
  )
}

export default Draggable

In this component, we use the draggable attribute to make the element draggable. This attribute will tell the browser that the element can be dragged.

We're also reacting to the onDragStart event. This event is fired by the Drag n Drop API when the user starts dragging the element and can be used to set some properties of the drag operation.

For example, we use the setData method of the dataTransfer object (that is coming directly from the event itself) to set the data that will be transferred when the element is dragged.

This works by setting the data type and the data itself. In this case, we set the data type to text/plain and the data to Hello, World!.

to set the data that will be transferred when the element is dragged.

Also, we're setting the class name of the element to draggable to style it later.

Step 3: Create a Droppable component

Next, let's create a new component called Droppable that will represent the droppable area.

We'll create it in the src folder.

import React from 'react'

const Droppable: React.FC = () => {
  return (
    <div
      className="droppable"
      onDragOver={(e) => {
        e.preventDefault()
      }}
      onDrop={(e) => {
        e.preventDefault()
        const data = e.dataTransfer.getData('text/plain')
        console.log(data)
      }}
    >
      Drop here!
    </div>
  )
}

export default Droppable

In this component, we're reacting to the onDragOver event.

This event is fired by the Drag n Drop API when the user drags an element over a valid drop target and can be used to specify what happens when the element is dragged over the target.

In this case, we're calling the preventDefault method of the event to prevent the default behavior of the browser, which is to not allow dropping.

This is very important, because by default, the browser does not allow dropping elements on other elements. So we need to call preventDefault in the onDragOver handler to allow the onDrop handler to be fired.

We're also reacting to the onDrop event.

This event is fired by the Drag n Drop API when the user drops an element on a valid drop target and can be used to specify what happens when the element is dropped.

In this case, we're still calling the preventDefault and then we're using the getData method of the dataTransfer object to get the data that was set when the element was dragged.

Also, we're setting the class name of the element to droppable to style it later.

Step 4: Use the Draggable and Droppable components

Now that we have our Draggable and Droppable components, let's use them in the App component.

We'll open the App.tsx file and replace its content with the following code.

import React from 'react'
import './App.css'

import Draggable from './Draggable'
import Droppable from './Droppable'

const App: React.FC = () => {
  return (
    <div className="container">
      <Draggable />
      <Droppable />
    </div>
  )
}

export default App

In this component, we're using the Draggable and Droppable components that we created earlier. We're also setting the class name of the container to container to style it later.

Step 5: Style the Draggable and Droppable components

Now that we have our components set up, let's style them.

We'll open the App.css file and replace its content with the following code.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  height: 100vh;
}

.draggable {
  padding: 16px;
  background-color: #f0f0f0;
  cursor: move;
}

.droppable {
  padding: 16px;
  background-color: #f0f0f0;
  cursor: pointer;
}

In this file, we're styling the container, draggable, and droppable elements.

Step 6: Test the Drag and Drop feature

Now that we have our components set up and styled, let's test the Drag and Drop feature.

We can do this by dragging the Draggable element and dropping it on the Droppable element.

When we do this, we should see the data that was set when the element was dragged logged to the console.

If everything is working correctly, you should see Hello, World! logged to the console, like the following:

The Drag and Drop feature is now working correctly! 🎉 The two components are indeed communicating with each other, and the data is being transferred from the draggable element to the droppable element. Starting from this simple example, you can build more complex interactions and behaviors.

Conclusion

In this blog post, we learned how to implement a simple Drag and Drop feature in a React application without using any library. We used the HTML5 Drag and Drop API to create a custom Drag and Drop behavior and we created a Draggable component and a Droppable component to represent the draggable element and the droppable area.

I hope you found this blog post helpful and that you learned something new. If you have any questions or feedback, feel free to reach out to me on Twitter. I'm always happy to help!

You can see the final code on my GitHub profile

DEV Community: Colux

Building LibreTune: A Deep Dive into Modern Android Music App Development

The Genesis: Why LibreTune?

Architectural Foundations: Embracing Clean Code and MVI

The Reactive Heartbeat: Kotlin Flow and State Management

Dynamic Home Screen Feeds: A Symphony of combine and flatMapLatest

Smart Throttling: Optimizing UI Updates

Jetpack Compose: Building a Dynamic and Responsive UI

From Scaffold to Shared Composable: The ScaffoldWithDrawer

The Pitfalls of Nested Scrolling

Optimizing Media Playback: ExoPlayer and the Service Layer

Custom Commands and Asynchronous URL Fetching

In-Memory URL Caching

What's Next for LibreTune?

Conclusion: The Journey Continues

Liberty Beats - Build a DAW in React

Introduction

First Steps

Create a Vite React App and Set Up Tone.js

Create a store for the DAW

Building the Editor

Implementing the Transport layer

Conclusion

Integrate Tone.js in a React application

Introduction

How Tone.js Works

Integrating Tone.js in a React Applications

Step 1: Managing Application Lifecycle

Step 2: Optimizing Performance

Pros of Using Tone.js

Cons of Using Tone.js

Conclusion

Drag and Drop feature in React

Introduction

Why Drag and Drop?

Getting Started

Step 1: Create a new React application

Step 2: Create a Draggable component

Step 3: Create a Droppable component

Step 4: Use the Draggable and Droppable components

Step 5: Style the Draggable and Droppable components

Step 6: Test the Drag and Drop feature

Conclusion

Dynamic Home Screen Feeds: A Symphony of `combine` and `flatMapLatest`

From Scaffold to Shared Composable: The `ScaffoldWithDrawer`