Forem: Reza Purnama

How I Built Videly Ei8, Video Hosting Platform on a Shoestring Budget

Reza Purnama — Sat, 28 Feb 2026 15:49:56 +0000

Hey everyone! 👋 Today I want to share my journey of building Videly Ei8, a video hosting and sharing platform I recently launched on Google Play.

As a solo developer with limited funds, building a video platform is a massive challenge. Server processing and storage costs can skyrocket quickly. However, I found an architectural "hack" that allows the platform to run incredibly fast, efficiently, and support uploads of up to 2GB per file.

Here’s a breakdown of what I built and the tech behind it.

🛠️ The Tech Stack

The project essentially consists of a Web platform and an Android app (Native Webview):

Web Frontend & Backend: Pure PHP scripts, HTML/CSS, and vanilla JavaScript.
Android App: Native Android app utilizing an optimized webview.
Video Processing: FFmpeg (embedded directly inside the APK).
Storage & Delivery: AWS S3.

💡 The Architecture Challenge: Web vs. App

If you try our web version at ei8.net, you can use it completely for free. However, this web version has a deliberate limitation: videos don't undergo metadata optimization. The raw video from your device is uploaded as-is.

Why didn't I integrate video processing on the web backend?
If I did, the upload pipeline would look like this:

User uploads the video.
My main server receives the file and processes/optimizes the video.
Once done, the server sends it to AWS S3.

This flow requires a double upload process, which heavily wastes the user's time and drains my limited server resources.

⚡ The Solution: Client-Side FFmpeg Processing on Android

This is where the Videly Ei8 Android app shines. Even though the UI is essentially a webview of the main site, I embedded and integrated FFmpeg natively within the app itself.

The upload flow on the app is drastically more efficient:

The user selects a video.
The app instantly optimizes the video metadata locally on the user's device in the blink of an eye.
The optimized video is uploaded directly from the user's device to AWS S3 (completely bypassing my PHP backend).

The Results?

Maximum Upload Speed: Because it connects directly to S3 via pre-signed URLs or direct SDK, users can upload massive files up to 2GB extremely fast.
Instant, Lag-Free Playback: Thanks to the client-side metadata optimization, the video streams instantly without buffering, regardless of its size.

🎯 Conclusion & Future Plans

I'm always looking for the best, most cost-effective ways to build powerful platforms on a reasonable budget. For now, Videly Ei8 is focused on the MP4 format with a 2GB per file upload limit. But this is just the beginning, and I believe massive updates are on the horizon.

I would be absolutely thrilled if you took some time to try the platform and share your feedback from a developer's perspective!

🌐 Try the Web version: https://ei8.net
📱 Download the Android App: Videly Ei8 on Google Play

Thanks for reading, and let me know what you think in the comments! 👇

[Boost]

Reza Purnama — Mon, 10 Nov 2025 07:41:24 +0000

Trick or Treat: A Spooky CSS Diorama with a Few... Surprises

Reza Purnama ・ Nov 9

#frontendchallenge #devchallenge #css

Trick or Treat: A Spooky CSS Diorama with a Few... Surprises

Reza Purnama — Sun, 09 Nov 2025 16:24:37 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

Hey everyone, and Happy Halloween!

For this CSS art challenge, I didn't want to just make a static image. I wanted to build a living 'diorama' a small, spooky scene you could actually play with.

As the title suggests, there are both "Tricks" and "Treats" hidden inside. This isn't just for looking it's for interacting.

👻 Go Ahead, Click Everything!

The scene is packed with... surprises. See if you can find them all:

Try double-clicking the 'Trick or Treat' neon sign... if you dare.
Click on the ghosts to see a special apparition.
Make the Jack-o'-lantern glow! Click it as many times as you can and watch it.

💻 The "Treat": How It's Made

This is my "treat" (the technical details) behind the "tricks" (the interactive scares).

Pure CSS

This is a CSS Art challenge, so the entire visual scene is built with 100% pure CSS. The structure is just simple, semantic HTML. Everything you see from the glowing moon and drifting fog to the multi layered pumpkin is crafted with CSS.

Advanced CSS "Tricks"

I used a few modern CSS techniques to bring the scene to life:

Non-Destructive Carving: The Jack-o'-lantern's face isn't an image file. It's "carved" in real-time using clip-path: polygon(...) with an evenodd fill rule. This "cuts" the face shapes out of the pumpkin segments, allowing the glow from behind to shine through.
Atmospheric Lighting: All the glowing effects (the moon, the neon sign, the candle flames, and the pumpkin's inner light) are a combination of box-shadow and filter: blur(). There are no images used for light.
Scene Depth: The scene has a 3D feel thanks to z-index layering. The trees, ghosts, and fog are all positioned at different "depths," with the ones further back having a filter: blur() applied to create a sense of distance.
Living Animation: @keyframes are the soul of the scene. They are used for:
- float: The gentle bobbing of the ghosts.
- flicker & flame-flicker: The unstable light of the neon sign and candles.
- pulse: The rhythmic glow of the pumpkin.
- drift: The slow-moving layer of fog across the ground.

JavaScript as the "Spark"

While CSS builds the entire world, a small amount of vanilla JavaScript acts as the spark of life to make it truly interactive. It is purely a supporting tool to enhance the CSS.

It's only used to:

Listen for addEventListener clicks on the various elements.
Toggle CSS classes (like .fly-away or .shake for the sign).
Play the HTML5 <audio> elements for background music and... other sounds.
Manage the simple logic for the double click timer and the pumpkin's increasing glow intensity.

No libraries, no frameworks. Just a sprinkle of JS to empower the CSS core.

🔗 Links

Live Demo: https://drvx.net/halloween.html
Source Code (CodePen): https://codepen.io/Gregklotzwolf/pen/EaPqLpO
License: MIT CodePen:

A Final Thought

If you are skilled in writing anything, always remember that your content will be served to your clients or visitors. Remember that UI/UX is very important; impress them with your work.

This was a blast to put together. I hope you enjoy it! Let me know in the comments if any of the surprises... got you.

How to Use Google Drive to Host Your Website

Reza Purnama — Sat, 08 Nov 2025 20:17:00 +0000

We all want a free and fast way to put a simple website online.
Developers and creators are always looking for easy solutions to share their work without paying for servers.

Years ago, Google Drive was a surprising tool for this. But when Google stopped the direct website hosting feature, smart solutions like drvx.net (DriveX) appeared to fix the problem.

Part 1: Why Hosting for Free is Still a Great Idea

drvx.net keeps all the good things about hosting from cloud storage, but makes it work better now:

Totally Free: You just use the free storage space you already have in your Google Drive.
Go Live Fast: Your files become a live website in just a few seconds.
Quick Loading: Since the content comes from Google’s strong system, your website loads very fast.
Very Simple: No need to learn complicated server setups or fancy coding processes. Keep in Mind: This method only works for simple websites (like landing pages, portfolios, or documentation) that use just HTML, CSS, and JavaScript.

Part 2: How drvx.net Works

The old way of hosting directly from a Drive folder doesn't work anymore. drvx.net works by acting as a smart middleman:

Share Your Files: You don't share a whole folder. Instead, you share the links to your main files (.html, .css, .js) from your Google Drive. You usually set the sharing option to "Anyone with the link can edit."
Set Up Your Site: Go to the Generate page on drvx.net. Paste your shared file links, choose a simple web address (like drvx.net/your-site), and set a secret PIN.
Your Site is Live: drvx.net then pulls the files from your Google Drive and shows them as a real website to anyone on the internet.

Cool Features of drvx.net:
Easy Updates: If you change a file in your Google Drive, the website updates immediately. No need to re-upload anything to drvx.net!

Part 3: What Else You Can Use

While drvx.net is great for using your Google Drive, there are other very simple and popular options used by professionals.

When deciding where to host your free static website, you have excellent options, each with a slightly different focus:

Drvx.net is perfect if your files are already sitting in Google Drive. Going live is very easy you simply paste the file links. This setup is great for quick projects where you want to use existing Drive files without hassle.
Netlify and Vercel are designed for code stored in GitHub or GitLab. They offer a modern workflow where going live is also very easy because you just connect your code repository. These platforms are better for fast, professional sites and projects that might grow larger later.

Final Thoughts:

Drvx.net is a clever and functional choice if you want to use your Google Drive space and keep things very simple without learning complex coding tools.

But if you want features like using your own custom website name (like yourname.com) or building bigger projects, the industry tools like Netlify or GitHub Pages are also great and simple choices.

All of these options help you achieve the same goal: putting your static website online for Free and making it Easy.
GitHub Pages uses your code on GitHub directly. Deploying is easy by adjusting your repository settings. This option is ideal for simple portfolios and documentation where your code already lives on GitHub.

Forem: Reza Purnama

How I Built Videly Ei8, Video Hosting Platform on a Shoestring Budget

🛠️ The Tech Stack

💡 The Architecture Challenge: Web vs. App

⚡ The Solution: Client-Side FFmpeg Processing on Android

🎯 Conclusion & Future Plans

[Boost]

Trick or Treat: A Spooky CSS Diorama with a Few... Surprises

Reza Purnama ・ Nov 9

Trick or Treat: A Spooky CSS Diorama with a Few... Surprises

Inspiration

👻 Go Ahead, Click Everything!

💻 The "Treat": How It's Made

Pure CSS

Advanced CSS "Tricks"

JavaScript as the "Spark"

🔗 Links

A Final Thought

How to Use Google Drive to Host Your Website

Part 1: Why Hosting for Free is Still a Great Idea

​Part 2: How drvx.net Works

​Part 3: What Else You Can Use

Part 2: How drvx.net Works

Part 3: What Else You Can Use