Forem: Badejo Emmanuel Adewale

[Boost]

Badejo Emmanuel Adewale — Sat, 14 Feb 2026 10:49:30 +0000

What is Web Hosting and How Does It Work?

Isaac Tonyloi - SWE ・ Jan 13 '25

What better way to understand deeply media apis provided by modern browsers than to build something cool?

Badejo Emmanuel Adewale — Wed, 22 Oct 2025 16:39:51 +0000

In this blog post, I’ll be documenting my approach, tools, implementation details, and services used while building my own Loom-inspired video recorder.

If you’re an engineer like me and want to dive straight into the code, the repo is available here 👉 GitHub Repository

Demo video

How to create a simple bash script video recorded using loop

Tech Stack & Third-Party Dependencies

The project is built using a modern web stack:

Next.js — App routing, server actions & API routes
React — Component-based UI architecture
PostgreSQL — Database for persisting user and video metadata
Google & GitHub OAuth — Seamless social authentication
Prisma — Type-safe ORM for database management
TailwindCSS — Rapid styling and responsive design

Understanding Social Auth (From My POV)

I implemented OAuth authentication with both Google and GitHub from scratch, which gave me a deeper understanding of how social authentication works under the hood.

This process involved:

Handling the authorization code exchange
Fetching access tokens
Retrieving user profile data via Next.js API routes

Both providers have slightly different flows, but getting them to work seamlessly together was incredibly rewarding.

Video Recording with the MediaRecorder API

const [isRecording, setIsRecording] = useState(false);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const recordedChunks: Blob[] = [];

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  mediaRecorderRef.current = new MediaRecorder(stream, { mimeType: "video/webm" });

  mediaRecorderRef.current.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };

  mediaRecorderRef.current.onstop = () => {
    const blob = new Blob(recordedChunks, { type: "video/webm" });
    const videoUrl = URL.createObjectURL(blob);
    console.log("Recorded video URL:", videoUrl);
  };

  mediaRecorderRef.current.start();
  setIsRecording(true);
};

Handling Media Streams & Uploads

Once recording worked, I moved on to uploading videos efficiently.

I used the FormData API to send the recorded blob to the backend, which handles storage via Cloudinary.

This allowed me to easily manage uploads, generate thumbnails, and display the video later on the frontend.

Listing & Deleting Videos

I also implemented endpoints, server actions, and a management UI for user videos.
This included:

Fetching a user’s uploaded videos
Deleting videos by ID
Displaying thumbnails, titles, and timestamps

With this, the full loop was complete:
Record ➝ Upload ➝ Manage ✅

⚠️ Major Challenge — Mobile Recording

One ongoing challenge I’m facing is recording on mobile devices.

For some reason, mobile browsers often fail to start recording or capture either audio or video. I suspect this is due to:

Permission handling differences across mobile browsers
Limited MIME type support for MediaRecorder
Streaming of videos in chunks instead of sending the whole binary Object accross a single request

Still debugging this. If you’ve solved this before, I’d love to hear from you!

🌐 Links

Live Demo: loop.oauife.uk
Source Code: github___repo

🧭 Conclusion

For me, building tools and clones is the best way to deeply understand new technologies.

Throughout this project, I learned a lot about:

Browser APIs
Real-time media handling
The full-stack flow from recording to upload

Every challenge taught me something new and that’s what makes this journey fun.

If you’ve experimented with MediaRecorder or mobile stream capture, I’d love your insights!
Feel free to reach out at badejoemmanuel805@gmail.com

Please check out Loop let me know what you think! 🙌

Understanding the concept of System design Part 1

Badejo Emmanuel Adewale — Tue, 12 Aug 2025 10:23:03 +0000

Ever wondered how Netflix streams without buffering during peak hours or how Amazon handles millions of orders daily without collapsing?
It’s not magic it’s System Design.

It’s been a while since I last posted (exams + project defense had me busy 🎓), but it feels great to be back!

What is System Design?

System design is the process of defining the architecture, components, interfaces, and data flow of a system to meet specific needs. Think of it as a blueprint before the actual construction.

It tells you:

What parts make up the system (frontend, backend, database, etc.)
How those parts talk to each other
Where data goes and comes from

What Problems Does System Design Solve?

1. Scalability

Problem:
An app that works fine for 1,000 users might break when 1,000,000 join.

How it’s solved:

Load balancing spreads traffic across multiple servers.
Caching (e.g., Redis) stores frequently used data for quick access.
Sharding splits large datasets into smaller, manageable chunks.

Example: Instagram caches your feed so it doesn’t have to query the database every single time you scroll.

2. Fault Tolerance

Problem:
One failure can bring down the whole system.

How it’s solved:

Replication keeps multiple copies of critical data.
Failover systems automatically switch to backups when one server fails.

Example: Netflix stores your watch history in multiple regions so you can resume your movie even if one data center is down.

3. Cost Efficiency

Problem:
Overbuilding wastes money; underbuilding leads to crashes.

How it’s solved:

Auto-scaling adjusts resources based on real-time demand.
Choosing the right database saves costs for specific workloads.

Example: Uber scales up servers during rush hours and scales down late at night to save money.

Systems with poor or no system designs will often face problems like these.

What is a System & Why Design It?

A system is a group of connected parts working together to achieve a goal.
Designing it ensures:

It works as intended under different conditions.
It’s efficient and cost-effective.
It can handle growth and unexpected failures.

Why It Matters
A good design helps you:

Handle more users as your app grows.
Make your system easier to maintain and debug.
Ensure speed and reliability.
Build a foundation that lasts.

In my next post, we will take a look at a simple real life example of how to design a System

💬 Final Thoughts
As a software engineer, learning system design is like learning how to build cities instead of just houses. Without it, even a great idea can fail under real-world pressure.

Have you ever worked on an app without a clear design plan?
What did you learn from the experience? Let’s share stories 👇

Angular

Badejo Emmanuel Adewale — Sun, 01 Jun 2025 07:44:34 +0000

🔔 How i added a web push notification feature in my project

Badejo Emmanuel Adewale — Sat, 17 May 2025 08:43:40 +0000

Hey everyone! 👋

I am thrilled to announce to you that I have implemented a push notification feature on my ChatX project.
Now you can get real-time updates even when you’re not on the ChatX tab. Anytime someone sends you a message, you’ll get a notification straight to your device.

How it works

1. Service Worker

A Service worker is a JavaScript file that runs in the background of your browser independently from the web page. It allows your app to handle things like push notifications, background syncing, and caching even when the user is not actively on your site.

2. VAPID Keys

These are cryptographic keys that authenticate your server with the browser’s push service. They allow you to send web push notifications securely and directly, without relying on external services like Firebase Cloud Messaging (FCM).

3. Subscription

When a user allows push notifications, the browser creates a subscription object containing an endpoint URL and encryption keys. This subscription is sent to your backend and used to identify and securely send push messages to that user’s device.

Overall Idea

We prompt the user to accept permissions for notification

Service Worker: We register a Service worker. Its job is to listen for push events and trigger notifications sent from the server.
Subscribing to PushManager:
After permission is granted, we subscribe the user to push notifications through the browser’s PushManager. This returns a subscription object with the endpoint and keys, which we send to our backend to store.

async function subscribeUser() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: '<YOUR_PUBLIC_VAPID_KEY>'
  });
  // Send the subscription payload to the server to store 
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

3 Sending Notifications from the Server:
When there is a new chat message, the server uses the saved subscriptions to send push notifications via the Web Push Protocol using VAPID keys.

const webpush = require('web-push');

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

async function sendNotification(subscription, payload) {
  await webpush.sendNotification(subscription, JSON.stringify(payload));
}

4. Handling Push Events in the Service Worker:

The Service Worker listens for push events and displays notifications to the user.

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

Next up:

Video Chatting functionality using WebRTC
Add and remove users from a group

You can check it out live: ChatX

Real-time full stack NextJS chat application

Badejo Emmanuel Adewale — Wed, 09 Apr 2025 19:05:47 +0000

🔨 Project in Progress
Hey everyone! 👋

I'm currently working on a full-stack real-time chat application using Next.js, and WebSocket, and I wanted to start sharing my journey here

You can find the link to the project at the end of the post.

✅ What I’ve done so far:
🔐 Implemented authentication
💬 Added the ability to message other users
⚡ Implemented real-time updates using WebSocket
📱 Made the app responsive across devices

🚧 What I’m working on now:
🎥 Implementing video calling with WebRTC
🎨 Improving the UI/UX
👥 Adding group chat functionality

💡 I’ll be posting regular updates as I go. If you're curious about the tech stack, tools, or any specific part of the build, feel free to drop a comment or question!

Live link: chatx-fwdl.onrender.com

Understanding the complexity of web development (Frontend)

Badejo Emmanuel Adewale — Mon, 07 Apr 2025 04:38:26 +0000

It’s been a while since I last posted here. I’ve been busy with school exams, but it feels good to be back! 😊

In this post, I’ll walk you through some modern tools and concepts every frontend developer should understand.

In the early days of the web, development was relatively simple. A basic website required just HTML for structure, CSS for styling, and a bit of JavaScript for interactivity. Developers didn’t have to worry about complex build tools, state management, or performance optimizations.

However, as the internet evolved, user expectations grew, and web applications became more complex. Modern development now involves frameworks like React, Vue, and Angular, along with tools like Webpack, Babel, and TypeScript.

At first, this can feel overwhelming—especially when you're just starting out. But once you understand what each tool does and why it exists, it all begins to make sense.

Let’s break it down 😎

1. Babel

Babel is a JavaScript compiler that allows developers to write modern JavaScript (ES6+ and beyond) while ensuring compatibility with older browsers and environments that do not support the latest features. It works by transpiling (or converting) modern JavaScript code into an older version, such as ES6 to ES5

Babel solves the problem of JavaScript compatibility across different browsers. As JavaScript evolves, new features (like ES6+) are introduced, but older browsers don’t always support them. Without Babel, developers would have to manually write fallback code or avoid using modern JavaScript features altogether

2. Webpack

As web applications scales, managing multiple JavaScript files manually becomes difficult. Dependencies must be loaded in the correct order, and too many requests can slow down performance. For instance, loading a script tag that depends on another script can cause runtime errors if the required file hasn’t loaded yet. Manually managing this becomes complex as the project scales. Webpack solves this by automatically bundling and resolving dependencies, ensuring scripts load in the correct order while optimizing performance.

3. Typescript

JavaScript is dynamically typed, meaning variables can change types at runtime, leading to unexpected bugs and harder debugging in large projects. TypeScript solves this by enforcing strict types, catching errors at compile-time rather than runtime.

4. Vite

Vite is a fast, modern build tool and development server.
What it solves: Improves development experience with instant server start and lightning-fast hot module replacement (HMR). Unlike Webpack, which bundles everything upfront, Vite serves your source files on demand using native ES modules.

Vite replaces tools like Babel and Webpack by using modern browser features and a faster build process. Instead of bundling everything upfront, Vite serves code using native ES modules, which makes development much faster. It uses ESBuild (which is faster than Babel) to handle modern JavaScript and TypeScript. Vite also has built-in support for hot module replacement (HMR) and JSX, with no extra setup. For production builds, it uses Rollup instead of Webpack. Overall, Vite is simpler, faster, and great for modern frontend projects.

Summary of Webpack, Babel, TypeScript and Vite

As web development evolved, new challenges emerged, leading to the creation of powerful tools like Webpack, Babel, TypeScript , Vite etc. to improve efficiency, compatibility, and maintainability.

Webpack: A module bundler that automatically manages dependencies, optimizes assets, and improves performance by bundling JavaScript, CSS, and images into efficient output files.
Babel: A JavaScript compiler that converts modern JavaScript (ES6+) into older versions (like ES5) to ensure compatibility across all browsers.
TypeScript: A superset of JavaScript that adds static typing, helping developers catch errors early, improve code structure, and write more scalable applications.
Vite: A modern build tool and dev server offering blazing-fast startup and hot reloading.

Together, these tools streamline modern web development, making it faster, more reliable, and easier to manage. 🚀

Building Cloud Store: Solving Storage Limitations with React.js and Django

Badejo Emmanuel Adewale — Thu, 13 Feb 2025 07:08:38 +0000

I’m currently working on a project called “cloud store”

I got the idea from the problem I had concerning insufficient storage on my device.

To solve this problem, I built a storage system that allows you to save files securely in the cloud, access them from any device and manage them effortlessly.

Right now, I am working on adding file sharing and collaboration features to enhance user experience.

Key features include: authentication, file uploads, the ability to download saved files, and support for both dark mode and light mode.

One of the biggest challenges I faced was optimizing file uploads. At first uploading a file that is as small as 2kb took minutes, which was not user friendly. But I tackled the issue with the help of cloudinary.

I’d love to hear your thoughts! What’s the most important feature you’d want in a cloud storage solution? Let’s discuss in the comments! 👇

You can find the link to project in the comments section below

Understanding the concept of single page applications (spa)

Badejo Emmanuel Adewale — Fri, 20 Dec 2024 10:25:49 +0000

What are single page applications?

They are basically web applications that serves a single html page into the browser and dynamically updates contents with javascript without the need to reload the full page.

Why Single Page Applications (SPAs) are Important 🤔

Performance: SPAs load the main HTML, CSS, and JavaScript files once. Which then subsequently fetch only the necessary data from the server via APIs (e.g., REST or GraphQL). Only necessary data is fetched and rendered, reducing server load and improving response times. This is very crucial for the server since most of the work load is shipped to the client.
Seamless User Experience : Eliminates page reloads by dynamically updating content using javascript. For instance smooth navigation can enhance and improve the user experience since it does not require the
need to reload the entire page. Anytime a page reloads temporary states may be lost and the browser might need to send a new request to the server which could lead to perfomance issues and poor user experience.
Scalability: SPAs are ideal for growing applications with complex user interactions and scalable functionality.
Offline Support: refers to a feature in web or mobile applications that allows users to continue using the application, at least partially, even when the user is not connected to the internet. With the implementation of caching, Spas can cache data using Service Workers for offline functionalities which can also help in the user experience.

How SPAs Work

Uses JavaScript frameworks/libraries to manage routing and state.
Updates the DOM dynamically through APIs like AJAX or Fetch.
Communicates with the server using REST or GraphQL for data

Downsides of Single Page Applications (SPAs)

Initial Load Time: The initial load time is slower since the browser needs to download large Javascript bundle before a page is rendered.
JavaScript Dependency: Requires JavaScript to be enabled on the client’s browser, as most functionality depends on it.
Security Vulnerabilities: SPAs are more vulnerable to client-side attacks, such as Cross-Site Scripting (XSS), due to the heavy reliance on JavaScript on the client's browser.
SEO Challenge:
SEO stands for Search Engine Optimization. It refers to the process of improving a website's visibility and ranking on search engine results pages (SERPs), like Google or Bing. Most search engine bots find it difficut to index pages which are dynamically generated with javascript and this can cause potential harming organic traffic
SPAs (Single Page Applications) are not inherently consistent with browser history because they dynamically manipulate the browser's state using JavaScript rather than fully reloading pages. This behavior introduces certain challenges with how SPAs manage and interact with the browser's history stack.

Single Page Applications (SPAs) Are Best For Creating

Dashboards and Analytics Tools
Social Media Platforms
E-commerce Applications
Interactive Web Applications
Learning Management Systems (LMS)
PWAs (Progressive web apps)

Conclusion

Single Page Applications (SPAs) represent a modern approach to web application development that emphasizes performance, seamless user experiences, and scalability. By dynamically updating content without requiring full-page reloads, SPAs reduce server load, improve responsiveness, and create a desktop-like experience for users.

However, they come with challenges such as initial load time, JavaScript dependency, SEO optimization difficulties, and browser history inconsistencies, which developers must carefully address. Despite these downsides, SPAs excel in applications that demand interactivity, real-time updates, and offline functionality, making them ideal for dashboards, social media platforms, e-commerce, and Progressive Web Applications (PWAs).

React

Badejo Emmanuel Adewale — Wed, 18 Dec 2024 08:07:09 +0000

Building emmanuel-dot-clone.netlify.app (A clone of dot.ai) with Astro JS

Badejo Emmanuel Adewale — Sat, 19 Oct 2024 12:36:16 +0000

In this blog post, I’ll walk you through how I cloned the landing page of Dot ai using Astro JS, TypeScript and Tailwind.

Astro js is a JavaScript web framework optimized for building fast, content-driven websites, with Astro's server side rendering abilities and typescript's static typing with my favourite css library (Tailwind), this project became a best learning experience for building fast and optimized websites.

Setting up the project

Installing Astro, initializing the project.
Setting up TypeScript.
Installing and configuring Tailwind.

To get started with the project, you need to initialise an Astro project

# create a new project with npm
npm create astro@latest

To install or setup tailwindcss

First, install the @astrojs/tailwind and tailwind packages using your package manager.

npm install @astrojs/tailwind tailwind

After installing , Astro will create a tailwind.config.mjs file in your project’s root directory and then boom! you are good to go.

If this doesn't work, you can go through the manual setup.

To run astro dev server

~dot-clone> npm run dev

> dot-clone@0.0.1 dev
> astro dev

14:19:58 [build] Waiting for integration "@astrojs/tailwind", hook "astro:config:setup"...
14:19:59 [types] Generated 11ms

 astro  v4.14.5 ready in 35428 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose  

14:20:04 watching for file changes...

Project Structure

Website Layout

After inspecting and proper review of the website i noticed lot of similar design patterns, functionalities and animations used in sections of the website. For instance the footer, navbar, buttons, hero section for each pages and so on.

Since astro supports the creation of custom components, i was able to create and use reusable components accross the page.

Let's look at the custom link component

---
type Props = {
    id?: string;
    text: string;
    href?: string;
    className?: string;
};

const { text, id = "", href = "/", className } = Astro.props;
---

<a
    id={id}
    href={href}
    class={className +
        " inline-flex items-center gap-[6px] justify-center rounded-xl body-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-gray-200 text-black hover:bg-secondary/80 py-2 md:py-3.5 px-6 md:h-[52px] h-[48px] body-sm xl:body-md border-none bg-[#c0d2f9]"}
    ><span>{text}</span> <slot /></a
>

The code has two sections, the frontmatter and the html markup

Frontmatter: Contains logic and props destructuring for the component, making it dynamic.

HTML Markup: Renders an anchor tag, with props dynamically applied to attributes and a slot for additional content.
Reusability: The component is reusable and flexible due to its use of props and the slot feature.

This combination of server-side logic (in the frontmatter) and the component's HTML structure (in the markup) makes Astro components highly dynamic and reusable, just like in frameworks such as React but with Astro’s focus on static generation and performance.

Key Features:

Responsive Design: The cloned website is fully responsive, ensuring that it looks and functions well on devices of all sizes.

Component-Based Architecture: Reusable components were created using Astro and TypeScript to ensure modularity and maintainability.
Optimized Performance: Astro’s static site generation helped optimize page load times, resulting in better performance and SEO.

Tailwind for Styling: Tailwind was used for consistent and streamlined styling, making use of utility classes for fast, responsive design adjustments.

https://github.com/professor-12/dot-ai-clone

Link to the cloned project

AngularJs vs ReactJs

Badejo Emmanuel Adewale — Fri, 28 Jun 2024 09:09:32 +0000

AngularJS and ReactJS are two of the most popular JavaScript frameworks used for developing modern web applications. Both have their strengths and cater to different project needs.

Overview

AngularJS: Developed by Google and released in 2010, AngularJS is a full-fledged framework that provides a complete solution for building dynamic single-page applications (SPAs).
ReactJS: Developed by Facebook and released in 2013, ReactJS is a library focused on building user interfaces, particularly for single-page applications. React introduces a component-based architecture.

Key Features

AngularJS

Two-Way Data Binding: Automatically synchronizes data between the model and the view components.
Dependency Injection: Facilitates the management of dependencies between components.
Directives: Extend HTML with custom attributes and elements.
MVC Architecture: Separates the application into three main components: Model, View, and Controller.
Comprehensive Solution: Provides a complete set of tools out-of-the-box, including routing, form validation, and HTTP client.

ReactJS

Virtual DOM: Efficiently updates and renders components by maintaining a virtual representation of the DOM.
Component-Based Architecture: Encourages reusability and modularity through encapsulated components.
One-Way Data Binding: Ensures data flows in a single direction, making the application easier to understand and debug.
JSX: Combines JavaScript and HTML-like syntax, allowing developers to write UI components in a declarative manner.
Ecosystem Flexibility: React can be paired with various libraries and tools for state management (like Redux) and routing (like React Router).

Choosing between AngularJS and ReactJS depends on the specific needs of your project. AngularJS is a complete framework offering a structured approach and a wealth of built-in features, making it ideal for large-scale applications. ReactJS, on the other hand a JavaScript library, excels in flexibility and performance with its component-based architecture and virtual DOM, making it a great choice for interactive and dynamic user interfaces.

Their use cases.

Consider the nature of your project, your team's expertise, and the specific requirements of your application when making your decision. Both frameworks have their merits and can significantly enhance your web development experience.

Click here to join the HNGX internship

If you need to find and Hire Elite Freelance Talent! Click here!