Industrija
Alati za developere
Studija slučaja
Web Screenshot Tool
Hteo sam da proučavam kompletne strukture sajtova bez ručnog otvaranja svake stranice. Nalepiš jedan URL, alat prati sitemap indekse, snima svaku stranicu, šalje napredak i čuva PNG fajlove u folderima koji prate URL hijerarhiju sajta.
Pregled projekta
Proučavanje sajta stranicu po stranicu je sporo, a ravan folder screenshotova uklanja strukturu koja je važna za analizu. Napravio sam ovaj alat za ponovljivo istraživanje dizajna i AI-assisted analizu.
Interfejs je namerno mali: Vanilla TypeScript, HTML i CSS koji se bundle-uju direktno kroz Bun.build.
Bun i Hono alat koji pronalazi stranice kroz sitemap traversal, pravi celostranične screenshotove širine 1920 piksela i šalje live napredak laganom TypeScript interfejsu.
Usluge
- UX/UI dizajn
- Web razvoj
- Produkt strategija
Ključni rezultati
- Responzivan dizajn
- Prilagođeni razvoj
- Poboljšanja korisničkog iskustva
Tip platforme
Web platforma
Tehnologije
- TypeScript
- Bun
- Hono
- Puppeteer
- Server-Sent Events
Izazov
Početni URL može voditi do sitemape, sitemap indeksa sa dodatnim sitemapama ili sajta bez sitemape. Proces mora da pronađe ono što može, obradi greške i sačuva URL hijerarhiju u izlazu.
Dugi batch procesi takođe zahtevaju vidljiv napredak bez posebnog socket servisa ili pokretanja novog browsera za svaku stranicu.
Pristup
Hono prima URL, xml2js parsira sitemap XML, a rekurzivni traversal širi sitemap indekse u listu stranica. Ako otkrivanje ne uspe, početna stranica postaje fallback cilj.
Jedna Puppeteer browser instanca obrađuje stranice redom. Backend šalje status događaje kroz streaming HTTP odgovor, dok frontend čita stream i prikazuje trenutnu stranicu, broj završenih, ukupan broj i status.
Rešenje
Alat izlaže Server-Sent Events workflow na POST `/api/screenshot/stream`. Svaka pronađena stranica dobija celostranični PNG širine 1920 piksela i upisuje se u putanju foldera izvedenu iz URL-a.
Browser interfejs je namerno mali: Vanilla TypeScript, HTML i CSS koje direktno kompajlira Bun. Fokus ostaje na pouzdanom otkrivanju, snimanju, strukturisanom izlazu i napretku, a ne na frontend frameworku.
Ključni izazovi
-
prolazak kroz ugnježdene sitemap indekse bez duplih URL-ova
-
nedostajuće ili neispravne sitemape sa korisnim fallbackom
-
lazy-loaded i veoma visoke stranice unutar ograničenja browsera
-
praćenje batch napretka uz predvidivu potrošnju memorije
Rezultat
Rezultat je fokusiran istraživački alat: uneseš jedan URL, pratiš otkrivanje i snimanje, a zatim pregledaš screenshotove u istoj hijerarhiji kao originalni sajt.
Ponovna upotreba jednog browsera i slanje napretka kroz Server-Sent Events čine duge procese razumljivim bez težeg frontenda ili realtime infrastrukture.
Kontekst
Sitemap samog sajta daje strukturu. Alat je čuva umesto da rezultat pretvori u nepovezanu gomilu slika.
Povezane studije slučaja
Drugi projekti sa sličnim arhitektonskim odlukama, platformama ili produktnim izazovima.
Generator carousel sadržaja
Cross-platform desktop pipeline koji strukturisan sadržaj i pravila brenda pretvara u determinističke carousel objave, postove i highlight grafike.
Python · FastAPI · Playwright · PyWebView · Pillow
Pogledaj studiju slučaja →Generator sadržaja za priče
Lokalni desktop editor za pisanje, pregled i izvoz determinističkih 1080 sa 1920 story sekvenci iz strukturisanog sadržaja.
Python · FastAPI · Playwright · PyWebView · Pillow
Pogledaj studiju slučaja →Višejezični sajt za profesionalne usluge
Dvojezični Astro sajt sa tipizovanim sadržajem, rutama svesnim prevoda, zaštitom objavljivanja i production-safe tehničkim SEO-om.
TypeScript · Astro 5 · Content Collections · Zod
Pogledaj studiju slučaja →Spremni da započnete projekat?
Javite se i razgovarajmo o tome kako mogu da pomognem.