DEV Community: Adrian Fathan

Scraping on the Edge: How I Built a Lightning-Fast Manga Reader with SvelteKit

Adrian Fathan — Tue, 23 Dec 2025 10:27:34 +0000

As a developer, I have a habit of looking at everyday annoyances and thinking, "I could code my way out of this."

My annoyance? Manga aggregator sites. They are often bloated, riddled with invasive ads, and frustratingly slow on mobile data. I wanted a reading experience that was clean, fast, and simple.

Instead of complaining, I opened my IDE. I decided to build FanaCumik, an open-source, ad-free manga reader. My goal was twofold: fix my reading experience and, more importantly, learn how to push SvelteKit and Cloudflare Workers to their limits.

Here is how I built it, the challenges I faced, and how you can contribute.

The Tech Stack

I chose this stack to ensure maximum performance and zero cost for a hobby project:

SvelteKit: For its incredible developer experience and native support for Server-Side Rendering (SSR).
Cloudflare Workers: To run the scraping logic on the Edge, ensuring low latency for users globally.
Cheerio: For lightweight, fast HTML parsing.
TailwindCSS: To build a mobile-first, app-like UI without writing custom CSS.

The Architecture: How it Works

The app doesn't host any content (which keeps it lightweight and legal). Instead, it acts as a smart browser.

The Request: When you click a manga, SvelteKit sends a request to the Cloudflare Worker.
The Scrape: The worker fetches the HTML from the source (e.g., Asura Scans) and uses Cheerio to extract only the data we need (title, image links, chapters).
The Clean Up: All ads, trackers, and unnecessary scripts are discarded.
The Delivery: The clean JSON data is sent back to the client, where Svelte renders it instantly.

Challenge: The Image Proxy

The biggest technical hurdle was Hotlink Protection. Many manga sites check the Referer header to ensure images are only loaded on their own domains. If you try to load their image URL directly in your app, it breaks.

The Solution:
I built a simple proxy endpoint (/api/proxy).
When the frontend requests an image, it asks my API. My API then fetches the real image while injecting the correct Referer header to "trick" the source server.

// Pseudo-code of the logic
export async function GET({ url }) {
  const imageUrl = url.searchParams.get('src');
  const sourceReferer = 'https://original-manga-site.com';

  const image = await fetch(imageUrl, {
    headers: { 'Referer': sourceReferer }
  });

  return image;
}

Making it Extensible: The Adapter Pattern

I didn't want this to be hard-coded for just one site. I wanted FanaCumik to be a universal reader. I implemented an Adapter pattern where every source is just a class extending a BaseSource.

To add a new site, you only need to write one file. Here is what the implementation for a new source looks like:

export class NewSource extends BaseSource {
    id = 'new-source';
    baseUrl = 'https://newsource.com';

    async getLatestManga(page: number) {
        const html = await this.fetchHtml(`${this.baseUrl}/page/${page}`);
        const $ = cheerio.load(html);
        // ... scraping logic ...
        return mangaList;
    }
}

This design allows anyone to contribute a new source without touching the core application logic.

Final Thoughts & Future Plans

Building FanaCumik taught me that Edge rendering is the future of performant web apps. The speed difference compared to client-side fetching is night and day.

The project is Open Source and available on GitHub.

Repo: github.com/MasFana/fana-cumik
Live Demo: fmo.qzz.io

I am currently looking for contributors! If you know a manga site you’d like to see added, feel free to fork the repo and submit a PR.

Note: This project is for educational purposes only. Please support original creators and official releases where available.

Happy coding! 🦑

Stop Juggling .env Files: Meet Fana-Envy, a Go-based TTY with Env Manager

Adrian Fathan — Thu, 18 Dec 2025 22:14:21 +0000

Managing environment variables usually involves a mess of export commands or maintaining a dozen different .env files that you have to manually source.

I wanted a better way, so I built Fana-Envy a terminal user interface (TUI) written in Go that handles persistent environments and multiple terminal tabs effortlessly.

You can Read More, Try or Build from Source here : https://github.com/MasFana/fana-envy

Building SvelteMark: A Local-First, Privacy-Focused Markdown Editor with Svelte 5

Adrian Fathan — Sun, 30 Nov 2025 02:55:34 +0000

As a developer, I've always been fascinated by the power of tools that enhance productivity while respecting user privacy. That's the philosophy behind SvelteMark, an open-source markdown editor I've just released. Built on the innovative foundation of Svelte 5 and its new Runes feature, SvelteMark is not just another markdown editor; it's a commitment to local-first data, privacy, and an exceptional user experience.

Why Local-First and Privacy-Focused?

In an era where almost every application demands account creation and stores your data in the cloud, I believe there's a need for an alternative. SvelteMark is a response to that need. It's a 100% local-only editor, meaning all your notes are securely stored in your browser using IndexedDB. There's no server communication, no tracking, and no account required. Simply open the app, and start writing. Your data, on your device, under your control.

The Power of Svelte 5 and Runes

Choosing Svelte 5 for SvelteMark was an easy decision. With its compiler architecture and the introduction of "Runes," Svelte 5 offers an incredibly efficient and intuitive way to build complex web applications. It allowed me to craft a highly responsive and performant user experience. From the seamless live preview to proportional scroll synchronization and tree-based file management, Svelte 5's performance shines through.

Features at a Glance

SvelteMark is packed with features designed for writers, developers, and anyone who needs a reliable markdown editor:

Local Storage & Security: All data in IndexedDB, no server communication, no accounts.
Advanced Core Editor: Powered by CodeMirror 6 with syntax highlighting and GitHub-style live preview.
Comprehensive Markdown Support: GitHub Flavored Markdown, Math equations (KaTeX), Mermaid diagrams, and code syntax highlighting for 100+ languages.
Intuitive File Management: File explorer with nested folders, rename, and delete via context menus.
Polished UI/UX: GitHub-inspired dark theme, resizable panels, auto-hide UI, and a view-only mode.
Portable Tools: Export/import feature to backup and restore all your notes as JSON.

See for Yourself!

I invite you to explore SvelteMark and experience a truly local and private markdown writing experience.

Live Demo: sm.fana.my.id

Getting the Code

SvelteMark is an open-source project. If you're interested in seeing the code behind the scenes, contributing, or even just starring it, you can find the repository on GitHub:

GitHub Repo: github.com/MasFana/sveltemark

Contributions are highly welcome! Whether it's bug reports, feature requests, or pull requests, your input is invaluable.

Conclusion

Building SvelteMark has been a rewarding journey in exploring the frontiers of modern web development and the local-first philosophy. I hope it becomes as useful a tool for you as it was enjoyable for me to create.

Thanks for reading, and happy writing!

Connect with me: linkedin.com/in/adrianfathan

How I Built a Proof-of-Concept Distributed File Upload System with Next.js 15, UploadThing, and Drizzle ORM

Adrian Fathan — Thu, 10 Jul 2025 12:40:24 +0000

I was looking for a way to build a free file upload platform, and that's when I discovered UploadThing. However, the default storage limit is quite small just 2GB. That limitation inspired me to build a proof-of-concept called UploadThing RAID a distributed file upload system that allows me to bypass that limit by uploading chunks across multiple Accounts.

I build it using:

✅ Next.js 15 (App Router)
✅ UploadThing for file storage
✅ Drizzle ORM with SQLite
✅ Tailwind CSS + TypeScript

Read the full article : https://www.linkedin.com/pulse/how-i-built-proof-of-concept-distributed-file-upload-system-imama-xgqgc

Github Image Hosting API with UI

Adrian Fathan — Mon, 25 Nov 2024 12:02:27 +0000

This project is a proof of concept for using a GitHub repository as an image hosting service. The API allows users to upload, list, and delete image files from the repository, providing an easy interface to manage files hosted on GitHub.

Github : MasFana/Github-Image-Bucket-API

Installation

To set up and run this project, you need Node.js and npm installed on your system.

Clone the repository:

git clone https://github.com/MasFana/Github-Image-Bucket-API
cd Github-Image-Bucket-API

Install dependencies:
```
npm install
```

Set up environment variables by creating a .env file in the root directory with the following values:

GITHUB_TOKEN=<your_github_token>
GITHUB_REPO=<your_github_repo>
GITHUB_BRANCH=<your_github_branch>

Start the server:
```
npm start
```

The server will run on http://localhost:3000.

Environment Variables

The API requires the following environment variables to be set:

GITHUB_TOKEN: GitHub Personal Access Token for authentication.
GITHUB_REPO: GitHub repository name in the format owner/repository.
GITHUB_BRANCH: GitHub branch name where files will be uploaded.

Hono Authentication Example App using masfana-mongodb-api-sdk, Cloudflare, and Cloudflare Workers

Adrian Fathan — Sun, 08 Sep 2024 13:16:07 +0000

Clone the project : https://github.com/MasFana/masfana-mongodb-example-auth

This project is an example of a lightweight authentication system built using the following technologies:

Hono Framework: A fast web framework for the Edge.
masfana-mongodb-api-sdk: A MongoDB API SDK for handling MongoDB operations. masfana-mongodb-api-sdk
Cloudflare Workers: Serverless execution environment for running apps at the Edge.
Hono Sessions: Middleware to manage user sessions stored as cookies.

Features

User registration and login with credentials stored in MongoDB.
User sessions using cookies, with session expiration.
Simple protected route example requiring authentication.
Logout functionality to clear user sessions.
Deployed on Cloudflare Workers for edge performance.

Prerequisites

Before running the application, you will need:

Cloudflare Workers Account: Set up and configure Cloudflare Workers.
MongoDB API Key: Create an API key and set up the masfana-mongodb-api-sdk with your MongoDB instance.
Hono Framework: This is used to create the web application.

Getting Started

Installation 1. Clone the repository:

git clone <repository-url>
cd <project-directory>

2. Install dependencies:

If you're using a package manager like npm or yarn, install the necessary dependencies:

npm install hono masfana-mongodb-api-sdk hono-sessions

3. Set up MongoDB connection:

In your application, replace the MongoDB connection details with your own:

const client = new MongoDBAPI<User>({
  MONGO_API_URL: "your-mongo-api-url",
  MONGO_API_KEY: "your-mongo-api-key",
  DATABASE: "your-database",
  COLLECTION: "your-collection",
  DATA_SOURCE: "your-data-source",
});

4. Deploy to Cloudflare Workers:

You'll need to configure your Cloudflare Workers environment. Follow the Cloudflare Workers documentation for deployment.

Project Structure

index.ts: This file contains the main application logic, including session management, user registration, login, logout, and protected routes.
MongoDBAPI: This is the MongoDB client used to handle CRUD operations with the MongoDB database.

Routes

Registration Route (POST /register):
- Allows users to register by providing a username and password.
- Stores user credentials in the MongoDB database.
Login Route (POST /login):
- Verifies user credentials against the MongoDB database.
- If successful, a session is created for the user, storing their ID in a session cookie.
Logout Route (GET /logout):
- Clears the session and logs the user out.
Protected Route (GET /protected):
- Only accessible to authenticated users with an active session.
- Returns a personalized message based on the session data.
Home Route (GET /):
- Displays basic user information and login/registration forms.
- Accessible to both authenticated and non-authenticated users.

Security

Session Management: Sessions are managed using the hono-sessions library, with cookies securely stored and marked as HTTP-only.
Encryption Key: Ensure you replace the encryption key with a secure, random string.

Example Usage

Once the app is deployed, users can:

Register a new account by entering a username and password.
Log in using their credentials, which will create a session.
Access protected content by visiting the protected route, available only after logging in.
Log out, which will clear their session and log them out of the app.

Deployment

To deploy this application on Cloudflare Workers:

Set up a Cloudflare Workers environment and install Wrangler (npm install -g wrangler).
Deploy the application using:

wrangler publish
Your application will be deployed at your Cloudflare Workers URL, accessible globally.

Using MongoDB with Cloudflare Workers

Adrian Fathan — Sat, 07 Sep 2024 12:21:59 +0000

When I tried to create a simple project using Cloudflare Workers and MongoDB, I encountered multiple errors that made the integration process difficult. During my research, I found a few articles that discussed the compatibility issues between MongoDB and Cloudflare Workers.

MongoDB and Cloudflare Workers Compatibility Issues I discovered an article titled "MongoDB Can't Integrate with Cloudflare Workers" that highlighted the limitations of using MongoDB with Cloudflare Workers directly. This is primarily due to the Workers' environment, which restricts the use of certain Node.js modules and native MongoDB drivers.
Official MongoDB Atlas Data API MongoDB provides an alternative with the Atlas Data API, as described in the article "Create a REST API with Cloudflare Workers and MongoDB Atlas." This approach uses RESTful API calls to interact with MongoDB Atlas, bypassing the need for native drivers that don't work in the Cloudflare Workers environment.

My Solution: A TypeScript SDK for MongoDB Atlas Data API

To overcome the integration challenges, I developed an NPM package that simplifies the process. This package is a TypeScript SDK that acts as a wrapper for the MongoDB Atlas Data API, providing type safety and full IntelliSense support for query operators.

masfana-mongodb-api-sdk - npm (npmjs.com)