Coding Challenge #107 - Loom Clone
This challenge is to build your own personal version of Loom.
Hi this is John with this week’s Coding Challenge.
🙏 Thank you for being a subscriber, I’m honoured to have you as a reader. 🎉
If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧
Coding Challenge #107 - 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.
If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It
Refer a friend or colleague to the newsletter. 🙏
Sign up for a paid subscription - think of it as buying me a coffee ☕️, with the bonus that you get access to a monthly AMA and 20% off any of my courses.
Buy one of my self-paced courses that walk you through a Coding Challenge.
Join one of my live courses where I personally teach you Go by building five of the coding challenges or systems software development by building a Redis clone.
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.
P.S. If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It
Refer a friend or colleague to the newsletter. 🙏
Sign up for a paid subscription - think of it as buying me a coffee ☕️ twice a month, with the bonus that you also get 20% off any of my courses.
Buy one of my courses that walk you through a Coding Challenge.
Subscribe to the Coding Challenges YouTube channel!
Share 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 via Bluesky 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
Request for Feedback
I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.
You can reach me on Bluesky, LinkedIn or through SubStack
Thanks and happy coding!
John
That’s funny. I put that on my project idea list a few days ago.