Butikkbrowser
En «nettleser for nettbutikker». Du legger selv inn butikkene, grupperer dem i kategorier og søker etter varer i mange butikker samtidig.
- Søk på tvers: du velger butikker eller kategorier, skriver et søkeord og åpner søket i hver butikk, eller i alle på én gang.
- Hent produkter (fase 2): serveren henter søkesidene og viser produktene samlet, med filter på butikk og sortering på pris.
- Butikker og kategorier: legg til, rediger, slett og sorter. Søkemalen foreslås automatisk og kan testes.
- Import/eksport: alle data kan lastes ned og opp som JSON.
- Norsk UI, mobil først, lys og mørk modus, installerbar som PWA. Snarveien
/ fokuserer søkefeltet.
Teknologi
Next.js 16 (App Router), TypeScript, Tailwind CSS v4 og cheerio (HTML-parsing på serveren).
Lagring: alt lagres i nettleserens localStorage. Dataene ligger altså bare på enheten du bruker. Bruk eksport/import for backup eller for å flytte data mellom enheter. Lagringen ligger bak grensesnittet Repository i src/lib/storage.ts, så en Supabase-backend kan kobles på senere uten endringer i UI-et.
Kom i gang lokalt
Krever Node.js 20.9 eller nyere.
npm install
npm run dev
Åpne http://localhost:3000. Første gang lastes fem eksempelbutikker inn (Brando, Volt, Retro, NLY Man og Decades). Søkemalene deres er beste gjetning og er ikke verifisert. Bruk «Test mal» i redigeringsvinduet og juster ved behov.
Andre kommandoer:
npm run build
npm run lint
Miljøvariabler
Ingen er påkrevd. Alle er valgfrie og gjelder bare server-API-ene.
| Variabel | Standard | Beskrivelse |
|---|
SCRAPER_USER_AGENT | Butikkbrowser/1.0 (...) | User-Agent ved henting av butikksider. Legg gjerne inn en kontaktadresse. |
SEARCH_CACHE_TTL_SEC | 300 | Hvor lenge produktresultater caches (sekunder). |
SEARCH_RATE_LIMIT_PER_MIN | 20 | Maks antall «Hent produkter»-søk per klient-IP per minutt. |
SCRAPER_HOST_INTERVAL_MS | 1500 | Minste tid mellom forespørsler mot samme butikk. |
SCRAPER_ALLOW_PRIVATE | – | Bare for lokal testing (1) mot butikker på localhost. Har ingen effekt i produksjon. |
Deploy til Vercel
- Push repoet til GitHub.
- Gå til vercel.com/new og importer repoet. Rammeverket (Next.js) oppdages automatisk, og standardinnstillingene fungerer.
- (Valgfritt) Legg inn miljøvariablene over under Settings → Environment Variables.
- Klikk Deploy. Hver ny push til hovedgrenen deployes automatisk.
Eller fra kommandolinjen:
npx vercel --prod
Etter deploy kan du installere appen fra nettleseren («Legg til på Hjem-skjerm» på iPhone, eller installer-ikonet i Chrome).
Hvordan det fungerer
Søke-URL-maler
En mal er en adresse der {query} byttes ut med søkeordet, f.eks. https://butikk.no/search?q={query}. Når du legger inn en ny butikk, gjør GET /api/template?url=… dette:
- leter etter en OpenSearch-beskrivelse på forsiden,
- leter etter et søkeskjema (
<form> med søkefelt),
- tester vanlige mønstre (
/search?q=, /sok?q=, /?s=, /catalogsearch/result/?q= …) og godtar bare mønstre der testordet faktisk vises på resultatsiden.
«Test mal» (GET /api/template?test=…) sjekker en mal på samme måte. Noen butikker laster resultatene med JavaScript. Da kan testen ikke bekrefte malen, så åpne testsøket og sjekk selv.
Hent produkter (POST /api/search)
Nettleseren sender søkeordet og de valgte butikkene (med maler og selektorer, siden dataene ligger i nettleseren). Serveren svarer med en NDJSON-strøm, én linje per butikk så snart den er ferdig:
- Butikkene hentes parallelt med 8 sekunders timeout per butikk.
- robots.txt respekteres etter Googles regler og RFC 9309: lengste regel vinner, Allow vinner ved likhet,
*/$ støttes, egen User-agent: butikkbrowser-gruppe går foran *, stier normaliseres (æ/ø/å, prosentkoding), og innhold etter 500 KiB ignoreres. Filen huskes i 24 timer. Søkesider som er sperret, hentes ikke. Kan ikke robots.txt leses (nettverksfeil, 5xx eller 429), hentes ingenting, og appen prøver igjen etter ett minutt.
- «Ignorer robots.txt (jeg søker selv)» er en bryter per butikk under «Avansert» og er av som standard. robots.txt er beskjeden til roboter som går gjennom nettstedet automatisk. Med bryteren på hentes produktene likevel når du selv søker: én forespørsel per søk, som når du åpner søkesiden selv. Eksempel: Brando sperrer søk i robots.txt, men gir produkter via Shopify-API-et når bryteren er på.
- Har butikken et produkt-API (se under), brukes det først. Ellers trekkes produktene ut av søkesiden med JSON-LD (schema.org
Product/ItemList), deretter OpenGraph, og til slutt CSS-selektorer du legger inn under «Avansert» i butikkinnstillingene.
- Resultatene caches kort, og det er rate limiting både per klient og per butikk.
- Butikker som feiler, vises som «kunne ikke hente» med en lenke til søkesiden.
- Henting fra interne/private IP-adresser er blokkert (SSRF-vern).
Produkt-API-er
Mange butikker viser søkeresultatene med JavaScript, så HTML-en inneholder ingen produkter. Butikkens eget søke-API gir da raske og rene data. Du velger det under «Avansert → Produkt-API»:
| Type | Endepunkt | Eksempel |
|---|
| Shopify | /search/suggest.json?q=… | Shopify-butikker |
| WooCommerce | /wp-json/wc/store/v1/products?search=… | Kleins |
| Egendefinert JSON | Din egen URL-mal med {query}, pluss stier som data.products, name, price.amount og images.0.url | Retro (/api/navigation/product?query=…), Decades (Voyado Elevate: /publicapi/esales/search?q=…) |
This is the beginning of the README. Read the rest at the original. Read the full README ↗
