It was 11 PM on a Friday. My dinner was getting cold, and I just wanted to watch a movie. But the internet had other plans.

I visited "Site A", it assaulted me with 5 pop-up gambling ads. I visited "Site B", it asked for a credit card for a "Free Trial." I visited "Site C" ,and hit the dreaded "Invitation Code Only" wall.

I found myself scouring Reddit threads, scrolling past hundreds of people commenting "Uncle please, DM me a code." It was pathetic. I felt like a beggar in a digital city.

That's when the frustration turned into code. I closed the browser, opened VS Code, and made a promise: I am going to build a streaming site that just works. No login. No begging. No ads.

The Architecture: Speed or Nothing

I didn't have a budget for servers, so I had to be smart. I needed a stack that was free to start but could handle a sudden spike (spoiler: I was right to worry about this).

• The Engine: React + Vite. I needed the site to load instantly. Old school MPAs (Multi-Page Apps) were too slow for the "app-like" feel I wanted.

• The Edge: Netlify. I used their global CDN to serve the frontend. This ensures that a user in Nairobi gets the same speed as a user in New York.

• The Style: Tailwind CSS. Because I didn't want to spend 6 hours debugging a CSS class named .wrapper-inner-div-final-2.

The "Oh S**t" Moment

I shipped the MVP on Sunday night. I named it Aura Movies.

I shared the link in a small group chat and went to sleep.

When I woke up, my phone was hot. I checked my Netlify dashboard and my heart skipped a beat. Requests: 18,492. Bandwidth: Spiking.

The internet had found the link. People were sharing it as a "hidden gem." But as I clicked through the live site, it felt... heavy. After watching three movie trailers, my browser tab started lagging. My laptop fans spun up like a jet engine.

Something was wrong. My app was bleeding memory, and I was flying blind.

The Ghost in the Machine

I couldn't reproduce the lag on my local server (localhost:5173). Everything seemed fine. But in production, users were reporting crashes.

I realized I couldn't debug 18,000 users by guessing. I needed X-Ray vision.

I installed Sentry (an error tracking tool). Within 5 minutes of deploying the tracker, the dashboard lit up red. The error?

MaxListenersExceededWarning: Possible EventEmitter memory leak detected.

The Diagnosis: In my rush to build the video player component, I had committed a classic React sin. Every time a user clicked "Next Movie," I was mounting a new instance of the VideoJS player. But—and this is the critical part. I wasn't killing the old one.

If a user browsed 10 movies, I had 10 invisible video players running in the background, all listening for events, eating up the user's RAM until their browser crashed.

The One-Line Fix

The solution wasn't a bigger server. It was Garbage Collection.

I went into my useEffect hook and added a cleanup function. This tells React: "Hey, when the user leaves this page, destroy this player immediately."

JavaScript

useEffect(() => {
  // Initialize the player
  const player = videojs(videoNode, options);

  // The Cleanup Phase (The Savior)
  return () => {
    if (player) {
      player.dispose(); // 🗑️ Kill the zombie component
    }
  };
}, [options]);

I pushed the fix. The error rate on Sentry dropped to zero instantly. The site was buttery smooth again.

What's Next?

Aura Movies is now stable and serving thousands of users daily without costing me a cent.

My next engineering challenge? Africa-First Optimization. I am building a "Data Saver" mode that uses aggressive compression to allow users with expensive mobile data bundles to stream high-quality content without draining their wallets.

You can check out the live build here: auramovies.top (And yes, you can try to break it. I'm watching the logs )