ZebraHack4.0
← All challenges

SAMPLE CHALLENGE · 2025 · 1 / 4

Raza de acțiune a unui agent economic

Original 2025 brief, including the API references and rules from that edition. The 2026challenges will be released at the opening ceremony.

Descriere

Obiectivul este dezvoltarea unei aplicații web care să arate „raza de acțiune” a unui agent economic din industria lemnului, pe baza datelor din SUMAL 2.0. Utilizatorul selectează un emitent sau destinatar, iar aplicația afișează:

  • rutele de transport asociate companiei pe o hartă interactivă;
  • o zonă de acoperire aproximativă (rază) derivată din datele SUMAL;
  • o listă de transporturi cu detalii (aviz, specii, volum, număr de puncte, ultima actualizare).

Datele provin din ZebraHack3.0 Data API, în special din endpoint‑urile:

  • GET /companies – pentru listarea companiilor, inclusiv centrul (center) și raza (radius_meters) estimată a activității;
  • GET /routes – pentru rutele și transporturile individuale ale unei companii, inclusiv geometrie GeoJSON și detalii agregate.

Utilizatorii finali (cetățeni, jurnaliști, ONG‑uri) pot explora astfel zona în care operează un agent economic, cât de mult și unde se mișcă lemnul, și pot folosi aplicația ca punct de pornire pentru investigații.

Funcționalități:

  1. Pagină de introducere care explică pe scurt problema tăierilor de păduri, riscurile și cum ajută vizualizarea razei de acțiune a companiilor.
  2. Pagini principale ale aplicației cu header și meniu de navigare (Introducere, Hartă / Rază de acțiune).
  3. Panou de căutare și listă de companii, filtrabile după rol (emitent / destinatar) și nume.
  4. Hartă interactivă care afișează rutele companiei selectate și zona aproximativă de acoperire (cerc/poligon).
  5. Panou de detalii pentru compania selectată, inclusiv tabel cu transporturile, volumul și specii de lemn.
  6. Interfață modernă și responsive, optimizată pentru desktop, tabletă și mobil.

[!IMPORTANT]

  • Se va implementa exclusiv partea de front‑end: fișiere statice HTML, CSS și JavaScript + librării front‑end încărcate prin <script src="...">.
  • Nu se folosesc backend propriu, server‑side rendering, bundlers sau transpileri (fără Webpack, Vite, Babel, TypeScript etc.).
  • Pentru date se folosește ZebraHack3.0 Data API:
  • Autentificare: cheia de acces este numele echipei și se trimite ca header X-App-Key la fiecare request.

[!TIP] > Librării recomandate (fără bundler, direct din CDN):

Task 1: Pagina de introducere despre importanta acestei aplicatii

Creați o pagină de tip landing care explică pe scurt contextul și scopul aplicației.

Criterii de acceptare:

  • Pagina conține mai multe sectiuni in care se discuta despre importanta monitorizarii taierilor si riscurile taierilor abuzive.
  • Este prezentată, pe scurt, legătura cu SUMAL 2.0 și Inspectorul Pădurii, cu linkuri externe:
    • https://mmediu.ro/domenii/paduri/sumal/
    • https://inspectorulpadurii.ro/#/
  • Există o secțiune „Cum funcționează aplicația” care explică în pași simpli:
    • utilizatorul intră în aplicație și vede o hartă a României;
    • alege tipul de companie (emitent / destinatar) și caută după nume;
    • selectează un agent economic și vede rutele și zona sa de acțiune.
  • Se explică, în limbaj accesibil, ce înseamnă „raza de acțiune” a unei companii (zona în care apar transporturile din datele SUMAL).
  • Pagina include un buton „Intră în aplicație” care duce spre pagina principală cu harta și căutarea.
  • Conținutul este static (doar HTML și CSS), fără apeluri la API.

Task 2: Header-ul aplicației și navigarea

Construiți un header comun tuturor paginilor și un meniu de navigare simplu.

Criterii de acceptare:

  • Header-ul include:
    • un logo (poate fi un logo simplu „ZebraHack”/„Monitor transporturi”) sau o imagine;
    • titlul aplicației, de exemplu „Raza de acțiune a agentului economic”.
  • Meniul de navigare permite accesul la cel puțin paginile: Introducere și Hartă / Rază de acțiune.
  • Pagina curentă este evidențiată vizual (ex.: culoare diferită, underline).
  • Pe dispozitive mobile, meniul se transformă într-un meniu tip hamburger sau un alt fel de meniu mic.
  • Header-ul este reutilizat pe toate paginile (prin copy‑paste sau componentă JS simplă).

Task 3: Căutare și listă de companii (endpoint /companies)

Implementați un mod de a lista și filtra companiile într-un panou de control.

Criterii de acceptare:

  • Panoul de control conține:
    • un selector pentru tipul companiei (emitent / destinatar);
    • un câmp de căutare text pentru nume (ex.: „SC Lemn SRL”).
  • La schimbarea tipului sau la modificarea căutării, aplicația trimite un request GET către https://zebrahack.iqnox.tech/api/companies cu parametrii:
    • role – valoarea din selector;
    • search – textul din câmpul de căutare (poate fi gol).
  • Request‑ul include cheia de autentificare, de exemplu:
    • header X-App-Key: nume-echipa.
  • Lista de rezultate afișează, pentru fiecare companie:
    • name (numele complet),
    • transport_count (număr de transporturi),
    • opțional, un badge cu emitent / destinatar.
  • Se afișează mesaje clare pentru stările: „Se încarcă…”, „Niciun rezultat”, „Eroare la încărcare”.

Task 4: Pagina Hartă – integrarea librăriei de mapping și rutele companiei (endpoint /routes)

Implementați pagina principală cu hartă interactivă pentru rutele companiei selectate.

Criterii de acceptare:

  • Pagina conține o zonă de hartă clar vizibilă, ușor de explorat.
  • Este utilizată o librărie de hărți încărcată prin <script src="..."> (ex.: MapLibre GL JS, Leaflet, Mapbox GL JS, Google Maps).
  • Harta este centrată pe România, cu un nivel de zoom potrivit pentru a vedea țara.
  • Utilizatorul poate face zoom și pan pe hartă.
  • La selectarea unei companii din listă, aplicația trimite un request GET către https://zebrahack.iqnox.tech/api/routes cu parametrii:
    • company – numele exact al companiei (name din /companies),
    • role – emitent sau destinatar.
  • Răspunsul conține o listă de rute cu câmpul geometry (GeoJSON LineString / MultiLineString). Aplicația desenează pe hartă toate rutele ca linii.
  • Harta se reîncadrează (fit) pentru a include toate rutele companiei selectate (padding rezonabil, zoom maxim limitat).
  • La click pe o rută se evidențiază vizual (ex.: culoare/ grosime) și se sincronizează cu tabelul de transporturi (Task 5).

Task 5: Zonă de acoperire și panou de detalii pentru companie

Construiți panoul de detalii și reprezentați vizual raza de acțiune a companiei.

Criterii de acceptare:

  • La selectarea unei companii, o zonă de detalii afișează:
    • numele companiei;
    • rolul (emitent / destinatar);
    • radius_meters convertit și afișat ca distanță aproximativă în kilometri (ex.: „Rază: 120.5 km”);
    • center afișat în format latitudine/longitudine;
    • last_activity în format dată + oră locale.
  • Pe hartă se desenează un cerc sau poligon care reprezintă zona de acoperire aproximativă a companiei, folosind coordonata center și radius_meters.
  • Sub detaliile companiei se afișează un tabel de transporturi pentru rutele întoarse de /routes, cu coloane precum:
    • transport_id,
    • notice_id (aviz),
    • species (listă de specii și volum),
    • point_count (număr de puncte GPS),
    • updated_at (ultima actualizare).
  • Rândurile din tabel sunt evidențiate în funcție de volum (de exemplu, cu o bară de fundal mai lungă / culoare mai intensă pentru rute cu volum mai mare).
  • La click pe un rând din tabel, ruta corespunzătoare este evidențiată pe hartă și, opțional, harta face zoom pe acea rută.
  • Pentru liste de rute foarte lungi, tabela poate fi pliată/expandată printr-un buton (ex.: „Ascunde / arată transporturile”).

Task 6: Design interfață utilizator (UI) și responsive

Asigurați o experiență plăcută și coerentă pe toate paginile și dispozitivele.

Criterii de acceptare:

  • Toate paginile folosesc o paletă de culori coerentă.
  • Sunt implementate componente interactive:
    • butoane cu efect hover,
    • carduri pentru secțiuni de conținut (ex.: pe pagina de introducere sau pentru fiecare companie în listă).
  • Fonturile sunt lizibile și uniforme; se poate folosi un font web‑safe sau Google Fonts încărcat prin <link>.
  • Layout‑ul este responsive:
    • pe ecrane mari, informațiile (căutare, hartă, detalii) sunt organizate clar și ușor de urmărit;
    • pe ecrane mici, interfața se adaptează astfel încât harta, lista și tabelul de transporturi să fie ușor de folosit, fără scroll orizontal excesiv.
  • Elementele interactive (butoane, carduri, rânduri de tabel) sunt suficient de mari și spațiate pentru interacțiuni touch pe ecrane mici.
  • Se oferă feedback vizual pentru acțiuni (stări „loading”, hover, selectat).
  • Sunteți încurajați să explorați layout‑uri și stiluri proprii, atâta timp cât comportamentul și informațiile de mai sus rămân clare pentru utilizator.