HOLDER：助你不再遺失實用資料的個人資訊庫

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

I built HOLDER, a personal vault for all the digital stuff we save and then struggle to find later.

Think about how often we save a useful link, a YouTube video, a screenshot, a PDF, or a random note. A few days later, when we actually need it, we have no idea where we saved it.

HOLDER is my attempt to solve that problem.

It brings links, YouTube videos, images, PDFs, and notes into one searchable space. You can organize items with folders and favorites, and OCR makes text inside screenshots searchable too.

The goal is simple: save something once and find it when you need it, without going through the same files and tabs all over again.

I also included an AI Assistant entry point to make the vault more useful and help me to search and find anything I need.

Demo

Code

GitHub repository:

Holder — Personal Assistant & Info Vault

Holder is an intelligent personal information assistant and knowledge vault built with Next.js 14, Express.js, MongoDB, and a Chrome Browser Extension.

Store, categorize, search, and converse with all your important information—including YouTube videos, images, web links, code snippets, and private credentials.

✨ Features

📁 Multi-Folder Collections: Organize items into custom folders (e.g. 💼 Brand Assets, 🔒 Private Vault, 🎥 YouTube Tutorials, 🌐 Bookmarks) with emoji icons, color badges, and description notes.
🎥 YouTube Auto Metadata & Lightbox Player: Paste any YouTube link to automatically extract channel metadata, title, and high-res thumbnails, with responsive video playback inside the app.
🖼️ Image Vault & Uploads: Upload local images or paste image URLs, complete with lightboxes.
📄 PDF Document Vault & Viewer: Upload PDF documents or paste direct PDF links, with inline interactive PDF…

How I Built It

I built HOLDER with a separate frontend, backend, and browser extension.

Frontend

The client is built with Next.js 16 and React 19.

Next.js 16: Application framework

React 19: UI components and interactions

Axios: API communication

lucide-react: Icons

ESLint 9: Code quality and linting

Backend

The server uses Node.js and Express 4.

MongoDB and Mongoose 8: Data persistence

Passport and Google OAuth: Google authentication

JWT and bcryptjs: Authentication and password-related security

Cloudinary: Media storage

Multer: File uploads

Tesseract.js: OCR and text extraction from images

Cheerio: HTML parsing and content extraction

Helmet and express-rate-limit: Security headers and request-rate limiting

The backend connects the different parts of the application, manages stored information, and processes uploaded content.

Chrome Extension

I also built a browser extension using Chrome Manifest V3 and vanilla JavaScript. This provides a browser-side way to interact with the application without building another full frontend.

AI-Assisted Development

I used OpenCode with the Big Pickle model as a coding assistant while developing HOLDER. It helped me work through implementation tasks and iterate on the code.

This was part of my development workflow. The deployed application's OCR functionality is powered by Tesseract.js; Big Pickle is not presented as the model powering the live application.

The core idea behind HOLDER is making saved information easier to find, and Tesseract.js plays an important role in that workflow.

Tesseract.js is an open-source OCR library that uses WebAssembly to bring the Tesseract OCR engine to JavaScript environments. It extracts readable text from images. https://github.com/naptha/tesseract.js

In HOLDER, I use it to extract text from screenshots so that the information inside an image can be searched later.

The workflow is straightforward:

A user saves a screenshot or image.

Tesseract.js extracts the text contained in it.

The extracted text is stored alongside the saved item.

When the user searches for a word or phrase, the application can find matching content without requiring the user to open every image manually.

I built the surrounding application with Next.js 16, React 19, Node.js, Express, and MongoDB. The backend handles data management, while the OCR component helps turn otherwise difficult-to-search images into searchable information.

During development, I also used OpenCode with Big Pickle as a coding assistant to help implement features and work through coding tasks. Big Pickle assisted with development; it is not the model powering HOLDER's live application.

My goal was to combine open-source tools with a practical problem: reducing the effort required to find information that you have already saved.

Why Does Open Innovation Matter?

A personal information vault can contain a lot of context about someone's work, interests, and daily life. That makes control over the AI layer an important design consideration.

Using open-source AI gives developers more freedom to inspect, adapt, and replace components instead of building every AI feature around a single closed provider.

For HOLDER, the important part is making the AI layer useful without making the entire application dependent on one fixed implementation.

I think open innovation matters because useful tools should be adaptable. Developers should have the freedom to understand their systems, experiment with different approaches, and improve them as their needs change.

My Agent Session

The Lazy Payoff

The small tasks are often the most annoying ones.

Searching through old browser tabs, opening multiple folders, checking screenshots one by one, and trying to remember the name of a file all take time.

HOLDER is designed to reduce that repeated effort.

Save the resource, keep it organized, and search for it later. When text from screenshots is indexed through OCR, you don't have to rely only on filenames or memory to find the information again.

I haven't measured a reliable time-saving figure yet, so I won't claim a made-up number. The value is in reducing the effort involved every time you need to retrieve something you saved earlier.

Prize Categories

Render, MongoDB