PKPCB - RAR/ZIP Web Viewer

PKPCB - RAR/ZIP Web Viewer - Graber Viewer for RAR and ZIP files at Unmatched Low Price

Technologies Used

Next.js

Vue.js

TypeScript

CSS

Unzipper

unrar.js

About the Project

PKPCB is a fully frontend-based web application that lets users preview RAR and ZIP archive contents directly in the browser using JavaScript. It’s built for speed, privacy, and affordability — no backend required.

Key Features & Innovations

Preview .rar and .zip file contents directly in-browser with no backend.
Uses client-side decompression powered by `unzipper` and `unrar.js`.
Drag and drop support with live folder/file tree structure.
Works offline after first load (PWA-ready).
Zero user data sent to server — complete privacy.

The Challenge

The main challenge was implementing archive parsing and tree rendering entirely on the client-side without consuming too much memory or crashing the browser.

No Backend LogicHad to rely fully on browser APIs and client-side libraries like `unrar.js` and `unzipper`.
Performance on Large ArchivesRendering large file trees from multi-MB archives required efficient traversal and memory management.
Cross-Library IntegrationManaging Vue components inside a primarily Next.js app with strict TypeScript config.

Our Solution

We optimized everything for client-side efficiency by streaming file reads and lazy-rendering UI components, and modularized the Vue integrations cleanly.

Streaming Archive ReadersUsed `unzipper` and `unrar.js` to parse archives in chunks directly in the browser.
TypeScript & Component SafetyStrict type checking and isolated components to avoid runtime issues.
Clean Vue IntegrationEmbedded Vue logic into standalone components and mounted them where needed via micro-frontend style setup.

Why This Project Stands Out?

🔹
Truly BackendlessAlmost no tools offer RAR/ZIP preview like this without a backend.
🔹
Cross-Framework MagicBuilt with both Next.js and Vue.js in harmony, using TypeScript and pure CSS.