DEV Community: Godwin Agedah

FileSyncDrive

Godwin Agedah — Mon, 27 May 2024 00:00:47 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

FileSyncDrive is an electron desktop app that listens for changes on a users local files and syncs to the cloud. it creates a folder "sync_folder" in the users home directory, any changes made to that folder will be reflected on the amplify storage.

Demo

Link to a shared file: https://main.d4c4zbq9x7suw.amplifyapp.com/?file=picture-submissions/70ec69fc-50d1-70f6-7731-0e68374df71b/sync_folder/New%20Text%20Document.txt

i used the starter template for the shared file site, ran out of time

Desktop App Repo
*Building the .exe file was a challenge due to my limited hardware and time

File Changes Synced, notice the time change.

Screenshot 1

Screenshot 2

Screenshot 3

File link can be shared for users to access via the web

Tested on Windows 11

Journey

Connected Components and/or Feature Full

Amplify UI Components

Amplify UI Components was used to quickly scaffold our UI. it contains all the components you'll mostly need for a UI.

Authentication

Amplify Authenticator was used to setup our Auth flow. it was a straight forward setup with a single react Component.

File Storage

Amplify Storage enabled us to instantly upload our modified files on local, also we can easily get our uploaded files from the storage as well as the download url.

In the future the storage space will be limited for the user, also social authentication will be added for easy sign up.

Desktop App Repo
*Building the .exe file was a challenge due to my limited hardware and time

Repo for shared file on the web

TaleTraverse: Story Builder

Godwin Agedah — Sun, 12 May 2024 16:02:11 +0000

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

TaleTraverse allows authors to publish stories with multiple endings. Readers can then choose their preferred path, leading to different outcomes.

Overview

Author

The author curates the story by creating branches and incorporating images, text, and audio to shape the narrative.

Reader

The reader follows the story by connecting paths between branches, revealing story content as they progress.

Demo

https://tale-traverse.netlify.app/

Sample Story: https://tale-traverse.netlify.app/published/1715269266765

Author curating the story

Reader choosing paths

Reader Summary of path choosen

Platform Primitives

The Author can curate the story with

Images
Text
Audio Recording

The above method of curating a story can be transformed into a blob object, which can be saved with Netlify Blobs by making a fetch request to a Netlify Function

Authors on the platform can choose a story theme, each theme changes the background of the Story board, which communicates the genre of the story to the user.
The platform utilizes Netlify Image CDN to cache the background images, reducing load times.

Screenshots

Story Themes

Customisable Story Cards

Link To Code

Link here Github Repo, fell free to ask questions
If you like the repo, please do well to leave a star.

Monetizing Content in View, Paying for what you see

Godwin Agedah — Sat, 23 May 2020 17:43:41 +0000

What I Built

My Project sets up a way to pay the platform owner as well as the content creator based on if a monetized user sees their content on a webpage. That is, they are paid only when their content is in the viewport.
Also for a monetized session, using probabilistic revenue sharing all payment can be made to the platform owner or to the creators when their content is being viewed.

Case Study

I'll be using the Instagram web layout as a case study where a post covers over 70% of the vertical viewport. On such platforms, two posts can't equally share the screen, as there's always a dominant content. This project shows how we can monetize such content per user engagement.

Instagram webpage

Submission Category

Foundation Technology

Demo

When monetization starts a button appears for a user to start viewing premium content, as the user scrolls through the page, if the probabilistic revenue sharing chooses the creators to earn, then the monetized content revenue goes to the creator else we pay the platform owner.
I'm embedding the content creators payment pointer into the HTML using a data-wallet attribute. when a creators content is in view, I'm getting the payment pointer that was embedded in the HTML. Then setting the meta tag content to the payment pointer of the current content.
if a non-premium content is in being viewed, I'm paying the platform owner.

Demo app

More Rewards

Perhaps the content is so good the user continues engaging or starts commenting, the content will be in view so you'll earn more as good content are rewarded. video content will earn more as engagement is longer.

Deployed Link

You can test the application

main app, with probabilistic revenue sharing

link to Code

Godwin9911 / gftw-hackathon

How I Built it

I created a static site built with HTML, CSS and Vanilla JS to explain the concept.

How I'm monetizing content in view

To monetize the dominant content on the page, I'm using the Intersection Observer API, Using this API you can select elements to target. if certain element intersects a certain percentage of an ancestor element or in our case the document's viewport, a function can be called. This function takes in a parameter of the intersecting element, Then we can get the payment pointer from the elements data attribute, then change our monetization meta tag content to the payment pointer.

function observerIntersection() {
    postElements = document.querySelectorAll(".post");

    let options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.75
    }

    let observer = new IntersectionObserver(handleIntersect, options);
    postElements.forEach(post => observer.observe(post));
  }

  function handleIntersect(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0.75) {
        payPostInView(entry);
      }
    })
  }

  function payPostInView(entry){
    let wallet = entry.target.getAttribute('data-wallet');
    if (currentWallet !== wallet ) {
      currentWallet = wallet;
      monetizationTag.setAttribute('content', wallet);
      currentReciever.innerText = '💸 Paying ' + wallet;
    }
  }

Splitting the profits

I set the weight for the platform owner and content creators to 50/50. Using the probabilistic revenue sharing. 50% of the time either the platform owner or creators on the platform will earn. if the platform owner is chosen to earn, then there's no need to get the payment pointer from the content in view as by default I'm setting the platform owner to earn.

Additional Learning Resources

How to Monetize Video and Audio on a webpage

Godwin Agedah — Thu, 21 May 2020 14:21:20 +0000

In this article, we'll be looking at how we can monetize video and audio on the web using webmonetization. Our site will be monetized only when the user is playing media content as we'll not want our user to pay for content they're not engaging with.

First, let us create a basic HTML page with video and audio.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monetize Audio and Video</title>
</head>
<body>
  <main>
    <p id="state"></p>
    <video class="mediaEl" src="files/videoplayback.mp4" controls></video>
    <br>
    <audio class="mediaEl" src="files/videoplayback.mp4" controls></audio>
  </main>

We'll check if monetization is supported by the browser.

if (!document.monetization) {
    const state = document.getElementById('state')
    state.innerText = 'monetization not enabled in browser';
    state.style.color = 'red';
}

Next, we'll add monetization eventlisteners to show the current monetization state.

function showMonetizationState() {
    document.getElementById('state').innerText = document.monetization.state;
}

if (document.monetization) {
  document.monetization.addEventListener(
    "monetizationstop",
     showMonetizationState
   );
  document.monetization.addEventListener(
    "monetizationstart",
     showMonetizationState
  );
  document.monetization.addEventListener(
    "monetizationpending",
    showMonetizationState
  );
  document.monetization.addEventListener(
    'monetizationprogress', 
     showMonetizationState
   );
}

Then, we'll create two functions to add and remove the monetization meta tag, these functions will be responsible for starting and stopping monetization.

// add meta
function addMonitizationMetaTag() {
// check if monetization meta tag is already set
 if (document.querySelector('meta[name="monetization"]')) return;

  monetizationTag = document.createElement('meta');
  monetizationTag.name = 'monetization';
  monetizationTag.content = 'your_payment_pointer'
  document.head.appendChild(monetizationTag);
}
// remove meta
function removeMonitizationMetaTag() {
   const meta = document.querySelector('meta[name="monetization"]');
   meta.remove();
}

Finally, we'll get our media elements and attach event listeners to start monetization when media is playing and stop monetization when it stops or is loading content.

const mediaEl = document.querySelectorAll('.mediaEl');

mediaEl.forEach(el => {
  el.addEventListener('play', addMonitizationMetaTag);

  el.addEventListener('playing', addMonitizationMetaTag);

  el.addEventListener('waiting', removeMonitizationMetaTag);

  el.addEventListener('pause', removeMonitizationMetaTag);
});

Testing

To test our app ensure you install the coil browser extension, you'll see a green dollar badge on the coil icon to indicate when we're making payments.

Link to Code

Godwin9911 / monetize-video-audio

Additional Learning resources

Stream My PC, Social Streaming and Educational platform

Godwin Agedah — Thu, 23 Apr 2020 09:05:05 +0000

What I Built

Stream My PC is a web application that streams content from a host user machine to one or more remote users over the internet. it can serve as a social interaction tool as well as an educational platform.

App Logo

App Features

The host PC can stream different type of content. A unique URL is created for each host which can be sent to remote users to join the stream. once connected, users can also send real-time messages via the live chat feature. The core app features include.

Local Video File

The host user can select any video they want to stream from their local directory.

Streaming Local video.

Whiteboard

The host user is provided with a canvas, where diagrams can be created and streamed in real-time to remote users. The host user's voice is also captured. This feature can serve as an online classroom.

streaming the whiteboard.

WebCam

The webcam and mic can be streamed to remote users.

capturing webcam

Screen Capture

The host user can also capture their screen and stream it over the internet.

streaming the screen capture

Live Chat

During a stream, Connected users can engage in conversations using the live chat feature.

messages from live chat

Category Submission

COVID-19 Communications.

How I Built it

The Frontend is built with HTML, CSS and vanilla JS. I'm Using Boostrap for my layout along with some custom CSS.
I’m using browserify to bundle my frontend JS.
The Backend is a NodeJS server using Express.
Twilio-video API is been used to stream the video and audio data to connected participants. The Twilio docs is a helpful start if you want to make a similar application.
Uuid is the npm package I'm using to create the unique links for a host pc.
Each feature provided a different set of challenges on how to get their stream data. Using the MDN docs. I was able to get the syntax to capture stream data from a video element and canvas.
To capture the user's webcam and mic, I used MediaDevices Web API, this allows for access to the user’s camera and microphone provided the user granted the permission.
The screen capture feature, I used the Screen Capture API. it allows for getting the user’s screen as a stream. All streams either from canvas, video, camera or screen capture can be displayed on the video using the srcObject property.
I’m using sketchpad for the canvas element.
The webcam and screen capture feature requires the user’s permission before getting the stream.

Screenshots

Desktop

Mobile

Link To Code

Link here https://github.com/Godwin9911/stream-my-pc
If you like the repo, please do well to leave a star.

Additional Learning Resources/Info

Using the Screen Capture API - Web APIs
Screen Capture - Twilio
Getting Started - Twilio
WebRTC samples
Sketch Pad

Feel free to contact me for more info.