Electronic

Overview

Electronic — قطعهبان on the site itself — is a Persian-language library of electronic components: nineteen parts across eight categories, each with a datasheet, a drawn pinout, practical notes, a price in toman and a stock count. Search covers the Persian name, the technical part number and the specs, and a resistor colour-code calculator sits at the bottom of the page.

It started as a fun project about showing circuit parts, but the thing that made it worth building properly was the gap it fills. A beginner with a breadboard and a handful of loose components has three problems at once: they don’t know what the part is, they can’t find the datasheet, and they can’t read the colour bands on a resistor. A page that answers all three in one place, in Persian, with the pinout already drawn, removes a real source of friction rather than just looking nice.

The brief

• One browsable catalogue: every part has a category, a datasheet and a pinout.
• Search across Persian name, part number and specifications in a single field.
• A datasheet view per component — full spec table, drawn pinout, and the notes that don’t fit in a table.
• Let a visitor mark parts they care about and have that survive a page refresh.
• A resistor colour-code calculator that converts bands to ohms, tolerance and a real-world range.
• Persian interface, RTL, with Persian numerals throughout.

Approach

The data model came first, because everything else is a view of it. Each component is one record: part number, Persian name, category, a specs table, pinout geometry, practical notes, price, stock and a stock state. The catalogue grid, the search index and the datasheet panel all read from the same records, so correcting a spec is a one-line edit and can’t leave the card disagreeing with the datasheet.

Pinouts are drawn rather than photographed. A photograph of a DIP-8 package is unrecognisable at card size and doesn’t survive a theme change or a resize; a drawn pinout is legible at any width and encodes which pin is which instead of asking the reader to count. Storing the geometry as data rather than as markup also means a new part brings its own diagram with it.

Search is deliberately forgiving. The same part is known by three names — NE555, NE555P, and تایمر NE555 — and a user may type any of them, in Persian or Latin digits. Matching runs across all the text fields and normalises digits before comparing, so ۵۵۵ and 555 find the same part. That single normalisation step is the difference between a search that works and one that looks broken.

Favourites are stored locally, not on a server. There is no account system and no backend, so persistence belongs in the browser; the list survives a refresh and costs nothing to run. The same reasoning applies to the calculator, which is pure client-side arithmetic — pick the band colours, get the value, the tolerance and the range the resistor is actually allowed to be.

The visual language is a bench instrument: revision number, a live scope readout, monospaced labels. It gives the page a point of view instead of looking like a generic product grid, and it signals what the content is before a word of it is read.

Stack

Vite for development and the build, with the catalogue, search, datasheets and calculator written directly against the DOM — no UI framework and no backend.

Outcome

Electronic is live and does the job it was built for: a beginner can look up a part, read its pinout, and decode a resistor without leaving the page. The parts that took the longest were not the calculator but the datasheet layout — fitting a spec table, a drawn pinout and notes into a panel that works on a phone without turning into a wall of text. Getting the RTL typography right across tables and Persian numerals was the other half of the work.

If I extend it, the obvious next step is scale: nineteen parts is a curated sample, and the structure is ready for a hundred. That means moving the records out of the bundle and loading them, and adding a way to contribute a part without editing the source.

View the website →