Build Your Own Loom Clone

This challenge is to build your own version of Loom, a screen recording and video messaging tool.

Loom is a popular tool for creating quick video messages, tutorials, and screen recordings. It's simple to use - you select what you want to record (screen, camera, microphone), click record, and it saves your video. This challenge will have you building the core features of Loom, giving you hands-on experience with media capture APIs, file handling, and building a user-friendly recording interface.

The Challenge - Building Loom

You'll be building a simplified version of Loom that lets users record their screen, camera, and microphone, then save and playback those recordings. The key is to create an intuitive interface for setting up the recording, managing devices, and reviewing what you've captured.

You can build it as a web based application like Loom itself, or a desktop application.

Step Zero

In this introductory step you're going to set your environment up ready to begin developing and testing your solution.

Choose your target platform and programming language. Loom is cross-platform, so you could build this as a web application, a desktop app using Electron or a similar framework, or a native application. Pick a tech stack that you're comfortable with and that has good support for media capture and file handling.

Step 1

In this step your goal is to create the home page of your application.

Your home page should have a simple, clean interface that serves as the starting point for users. The main feature here is the ability to select and confirm a folder where recordings will be saved. Users should be able to browse and select a destination folder before they start recording.

Test your implementation by starting your application and verifying that you can select a folder on your system and see that selection reflected in the UI.

Step 2

In this step your goal is to let users select which microphone and camera devices they want to use for recording.

Before recording begins, users need to choose their audio input device (microphone) and video input device (camera). Your application should detect available devices on the system and present them in a dropdown or list. Users might have multiple microphones or cameras, so make sure they can see all available options and select the ones they want.

Test your implementation by checking that your application detects the devices available on your system. Verify that you can list them and select different ones.

Step 3

In this step your goal is to add the ability to mute or unmute the microphone and enable or disable the camera before and during recording.

Users often want to toggle their microphone or camera on and off - maybe they want to record their screen but not their voice, or show their screen but not their face. Add toggle buttons or checkboxes so users can control whether the microphone and camera are active. These controls should be available both before recording starts and while recording is in progress.

Test your implementation by toggling the microphone and camera on and off, verifying that the UI reflects the current state.

Step 4

In this step your goal is to implement the core recording functionality - starting and stopping a recording, and saving it to the folder the user selected.

Add a prominent button to start recording. Once recording begins, capture the audio from the selected microphone and video from the selected camera. Users should be able to stop the recording at any time. When they stop, the application should save the complete recording to the folder they selected in Step 1. The file should have a name or timestamp so users can identify it later.

Test your implementation by starting a recording, speaking or moving in front of the camera, stopping the recording, and verifying that a file has been created in your selected folder.

Step 5

In this step your goal is to add screen sharing and screen recording capabilities.

Extend your application so users can choose to record their screen instead of (or in addition to) the camera. Add a toggle or option to enable screen sharing mode. When enabled, users should be able to select which screen or window to record. This is in addition to the microphone and camera options - they should still be able to record audio and camera video alongside their screen. Ensure the shared screen is the main focus of the video.

Test your implementation by enabling screen recording, selecting a screen or window to record, and verifying that the screen content is captured when you record.

Step 6

In this step your goal is to display a list of previous recordings on the home page and allow users to play them back.

After users have made at least one recording, the home page should display a list of all recordings saved in the selected folder. Users should be able to click on a recording to play it back. The playback should handle both audio and video content, and work seamlessly with whatever format you chose to save recordings in.

Test your implementation by making a few recordings, returning to the home page, and verifying that all recordings appear in the list. Click on each one and verify that playback works correctly.

Going Further

Here are some ways you could extend this project:

• Recording preview: Add a preview window so users can see themselves or their screen before they start recording.
• Trimming and editing: Allow users to trim recordings to remove unwanted sections at the beginning or end.
• Multiple simultaneous captures: Let users record screen + camera + microphone all at once and composite them into a single video.
• Recording metadata: Store additional information with each recording like creation date, duration, and custom notes.
• Share functionality: Add the ability to export recordings in different formats or upload them to cloud storage.
• Keyboard shortcuts: Add keyboard shortcuts for common actions like start/stop recording, mute microphone, etc.

Help Others by Sharing Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know - ping me a message on the Discord Server, via Twitter or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo.

Get The Challenges By Email

If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: