← Projects
Web Development Inventory Systems QR Code Integration ESD Handling Cloudflare Pages Label Printing

School Electronics
Organizer System

A complete physical and digital organization system for a 61-component electronics inventory — from component cataloguing and ESD-safe physical layout to a custom-hosted searchable web reference with QR code labels.

Live Site ↗
Timeline
March–April 2026
Components
61 items catalogued
Hosting
Cloudflare Pages
Domain
schoolorganizer.warhorsefarms.me

The problem

Accumulating a working electronics inventory for coursework creates a practical challenge: components are small, visually similar, and easy to misplace or misidentify. Without a system, time gets wasted searching for parts, components get mixed together, and ESD-sensitive devices risk damage from improper handling.

I had a 61-item school electronics inventory sourced from Digi-Key — spanning ICs, transistors, diodes, passives, sensors, and connectors — and needed a solution that was fast to use at the bench, required no app or special equipment to look something up, and accounted for ESD handling requirements.

The goal was a complete system: physical organization, ESD protection, identification labels, and a digital reference accessible from any device within seconds.

Layout & ESD considerations

I selected a Store House Large Organizer (Harbor Freight item 56578) with adjustable dividers configurable from 4 to 24 compartments. I settled on a 3-column × 4-row grid — 12 compartments — which maps cleanly to the inventory categories and leaves logical groupings adjacent to each other.

ESD-sensitive components — all ICs, MOSFETs, and BJTs — required special handling. I lined the four ESD compartments (A1 through B1) with conductive ESD foam, secured with Scotch Mount Extreme double-sided tape after wiping the compartment bases with isopropyl alcohol to remove mold-release residue from the plastic. The foam prevents charge buildup and gives component leads a safe resting surface.

Compartment Layout
A1
ICs — Op-Amps
ESD foam
A2
ICs — Logic
ESD foam
A3
ICs — Timers
ESD foam
B1
Transistors
ESD foam
B2
Diodes
B3
Zener/Schottky
C1
LEDs & Display
C2
Trimmers
C3
Electro Caps
D1
Inductors
D2
Sensors
D3
Switches/Conn

Groupings were chosen to mirror how components are used together in practice — op-amps alongside other amplifier ICs, rectifier diodes separate from Zener and Schottky types, electrolytic capacitors grouped with other passives in the C row. This reduces search time during lab builds.

Building the web interface

A physical label on each compartment can only carry so much information. I wanted every component's full specs, package type, notes, and datasheet link available within a few seconds — without opening a spreadsheet or searching a vendor site.

I built a self-contained single-file HTML application with embedded JavaScript. The full 61-item inventory dataset — sourced directly from the Digi-Key order and cross-referenced against manufacturer datasheets — is embedded in the page as a JavaScript data structure. No server, no database, no API calls.

Compartment view
Collapsible cards per compartment with full specs and ESD warnings
Full inventory tab
All 61 items organized by category with location badges
Live search
Filters both views simultaneously — by part number, description, or specs
Datasheet links
Direct PDF links to manufacturer datasheets for every component
Sidebar navigation
Persistent nav linking directly to any compartment
Mobile-first
Readable on a phone at the bench — no pinching or zooming

The site is hosted on Cloudflare Pages under a custom subdomain of my personal domain (schoolorganizer.warhorsefarms.me). Cloudflare automatically provisions HTTPS, serves from edge nodes globally, and requires zero ongoing maintenance — the deployed file is static HTML.

QR code labels

The connection between the physical organizer and the digital reference is a set of QR code labels — one per compartment. Each label encodes a direct deep-link URL to that compartment's entry in the web interface (e.g. schoolorganizer.warhorsefarms.me/#comp-A1), so scanning any label immediately opens that compartment's full component list on your phone.

Labels were designed at exactly 14mm × 40mm to fit the Nelko P21 thermal label printer's GAP paper. I generated the QR codes programmatically using Python's qrcode library and ReportLab, producing a print-ready PDF with one label per page at precise physical dimensions — no browser scaling required. Each label shows the compartment ID, category name, and a short parts list alongside the QR code.

ESD compartments (A1–B1) use an amber top bar to distinguish them visually at a glance, matching the color coding used in the web interface.

Results

61
components catalogued with full specs
12
compartments, 4 with ESD foam
<3s
from QR scan to full datasheet link
$0
ongoing hosting cost

The completed system gives me instant access to any component's full specification at the bench — no digging through bags, no Googling part numbers. The ESD compartments protect the most vulnerable components from static discharge during every lab session.

The web reference also doubles as a reusable template — as the personal parts inventory grows, the same approach scales without any new infrastructure.

View Live Site ↗