Back to blog

Why and How I Created Mudawim?

MudawimProductivityWebDevSelf-HostedNext.jsYoutube

Building a Distraction-Free Study Companion

Have you ever opened YouTube with the honest intention of watching a 4-hour tutorial, only to realize two hours later that you've been watching short clips of cats playing piano or deep-dive video essays about lost civilizations?

If that sounds painfully familiar, you're not alone.

Online platforms like YouTube are extraordinary goldmines of free knowledge. You can learn full-stack web development, quantum physics, public speaking, or a foreign language completely for free. But there's a catch: these platforms are engineered for watch time, recommendations, and dopamine retention-not for deep, focused studying.

That exact frustration led me to create Mudawim (مُدَوِّم) - an Arabic word that translates to consistent, steadfast, or persistent.

In this post, I want to share the story of why Mudawim exists, how it works, and how it was built from scratch as a local-first, free productivity tool.

The Problem: The Modern Self-Learner's Dilemma

As a developer and lifelong learner, I spend countless hours consuming long-form video courses and tutorials. Over time, I noticed three major friction points that almost every online student faces:

1. The Distraction Trap & Lost Progress

When you pause a multi-part video course and return days later, YouTube rarely remembers your exact context. Where did you leave off? Which topics did you complete? Where are the notes you took in a random notepad app three weeks ago? Trying to piece your study session back together eats up precious energy before you even start learning.

2. Note Fragmentation

Taking notes while watching a technical video usually means juggling two split windows, manually writing down timestamps like 14:32, and losing those notes in a messy desktop folder. When it comes time to review before an exam or job interview, your notes are scattered everywhere.

3. Account Fatigue & Cloud Privacy Concerns

Most modern productivity tools push you straight into a mandatory sign-up screen, lock your personal study data behind proprietary cloud servers, and charge monthly subscription fees. Why should your private study habits and personal notes live on someone else's server?

I wanted a simple, fast, and beautiful tool that respects user privacy, tracks daily study streaks, shows no ads, no annoying suggestions, links notes directly to video timestamps, and runs entirely on the user's device.

When I couldn't find one that fit all these criteria, I decided to build Mudawim.

The Core Philosophy Behind Mudawim

From day one, Mudawim was designed around three non-negotiable principles:

  1. Consistency Over Intensity: Long-term mastery comes from showing up every day, even if only for 20 minutes. Mudawim keeps you accountable with visual streak tracking and daily goal minutes.
  2. Zero Lock-In & Total Privacy: Your study progress and personal notes belong to you. Mudawim stores everything locally on your device with 100% offline access and full JSON backup export & import options.
  3. Frictionless Experience: No aggressive sign-up walls. You can drop straight into a default workspace and start organizing your learning journey immediately.

Key Features: What Makes Mudawim Special?

Here is a quick tour of what Mudawim does to turn chaotic video watching into a structured learning environment:

📁 Custom Workspaces & Course Organization

Whether you're studying Web Development, Public Speaking, or Data Science, Mudawim lets you group your courses into custom, color-coded workspaces. You can track completion percentages, total watch time, and remaining lessons at a glance.

⏱️ Timestamped Notes & One-Click PDF Export

While watching a lesson inside Mudawim's distraction-free player, you can drop timestamped notes with a single click. Clicking any saved note instantly jumps the video back to that exact second. When you finish a course, you can export your entire collection of notes into a clean, printable PDF document for quick offline review.

🔥 Dynamic Streak Tracking & Heatmaps

Mudawim features a Github-style visual contribution heatmap and streak counter. It dynamically evaluates your daily goal (e.g., 20 minutes/day or 1 video/day). If you unmark a video, your streak recalculates accurately. If you catch up today, your streak updates instantly.

💾 Local-First Data Ownership

Every playlist, note, and goal configuration is persisted in your browser's local database. You can export a full .json backup file of your entire workspace at any time and import it on any device.

How It Was Built: The Tech Stack

Building a fluid, responsive, and resilient local-first web application required a modern tech stack. Here is what powers Mudawim under the hood:

  • Framework: Next.js 16 (App Router with Route Groups (public) and (dashboard))
  • UI & Logic: React 19 & TypeScript
  • Styling: Tailwind CSS v4 with custom HSL tokens and dark/light mode switching via next-themes
  • Component Library: Primitive components built on top of Base UI and Shadcn UI
  • Icons & Visuals: Lucide React icons
  • State & Storage: Client-side storage layer (lib/storageClient.ts) wrapping IndexedDB/localStorage with event-driven identity synchronization

Architectural Highlight: Route Group Layout Separation

To ensure maximum SEO and performance, the app is split into two Next.js route groups:

  1. app/(public): Handles the landing page (/), public navigation header with theme switcher, and developer bio page (/developer) with zero sidebar overhead.
  2. app/(dashboard): Wraps all learning, workspace, note management, and streak pages in a unified application shell with sidebar navigation and quick workspace switching.

What's Next for Mudawim?

Mudawim is an evolving project created with love for the global learning community. Everything is completely free to use.

Some exciting ideas currently on the roadmap include:

  • Direct YouTube Playlist Importing: Auto-fetching entire YouTube playlists into custom workspaces.
  • Enhanced Flashcard Generation: Converting timestamped notes directly into active recall flashcards.
  • Cross-Device Syncing Options: Optional peer-to-peer or encrypted sync for multi-device power users.

Try Mudawim & Get Involved!

If you want to take control of your learning, protect your focus, and build a lasting study streak:

Remember: Consistency beats intensity. Keep learning, stay persistent, and happy studying!