Back to work

Case study

TechVault

Framework-free progressive web app

Front-End Developer2025
Live demo (opens in a new tab)Source (opens in a new tab)
At a glance/ summary
Problem
Frameworks are convenient but add weight and abstraction. I wanted to prove out a fast, offline-capable, componentized app using only platform primitives.
My role
Front-End Developer
Outcome
A responsive, offline-capable PWA with dashboards and search, built on web standards alone.

Overview

TechVault is a progressive web app built entirely with vanilla JavaScript and native Web Components — a deliberate exercise in how far modern web standards go without a framework.

Role & ownership

Sole front-end developer — architecture, components, offline strategy, and data model.

Constraints

  • No framework — only native Web Components and platform APIs
  • Must work offline

Technical approach

Native Web Components structure the UI, a service worker provides offline support, Chart.js renders dashboards, and a JSON-driven catalog powers client-side filtering and search.

Key decisions

  • Native Web Components instead of a framework, for a lightweight footprint
  • Service worker for offline-first behavior
  • JSON-driven data so the catalog stays easy to edit

Selected screens

TechVault home hub with tiles for Products, Documents, About, Analytics, Favorites, and Developer, plus an Install App button. (opens the full screenshot in a new tab)
Home hub with install-as-app (PWA).
TechVault product catalog with category and price-range filters and a grid of product cards showing prices. (opens the full screenshot in a new tab)
Product catalog with category and price filtering.
TechVault product catalog with an expanded product detail for the Pro X3 alongside the full product grid. (opens the full screenshot in a new tab)
Product detail within the catalog.
TechVault document library with category and document-type filters and downloadable document cards such as quick-start guides, specifications, and manuals. (opens the full screenshot in a new tab)
Document library with filtering and downloads.
TechVault favorites view listing saved products with remove actions. (opens the full screenshot in a new tab)
Favorites — saved products, persisted client-side.
TechVault project overview page describing its PWA features, front-end technology stack, architecture, and project stats. (opens the full screenshot in a new tab)
Project overview — features, stack, and stats.

Stack

Vanilla JSWeb ComponentsService WorkersChart.jsJSON