Skip to content

Front End

The Tracker API includes a front-end client application that provides a user-friendly interface for end users to interact with the system. The front-end is built with SvelteKit, TypeScript, and Tailwind CSS/daisyUI, and communicates with the API via REST endpoints.

Features

  • Authentication: JWT-based authentication with the Tracker API, plus SSO login support
  • Dashboard: Overview of tracker statistics and map visualization
  • Tracker Management: View tracker details and location history
  • Campaign Management: Manage brands, production runs (campaigns), and their trackers
  • Locations: Manage delivery and storage locations
  • Reports: Reporting views over tracker data
  • Dark Mode: Theme selection via daisyUI themes for better visibility in different environments

Architecture

The front-end lives at tracker-frontend-svelte and is a standalone SvelteKit application that communicates with the Tracker API via REST endpoints. It is designed to be deployed separately from the API, allowing for independent scaling and maintenance. A sibling app, tracker-admin-svelte, serves the internal admin UI and shares most of its code with the customer-facing app.

Both apps share common components, API clients, and state modules through the tracker-shared npm workspace package at packages/tracker-shared. Anything reusable (API request functions, auth state, dashboard/campaign UI components, theming) lives there rather than being duplicated per app.

The front-end uses the following technologies (see tracker-frontend-svelte/package.json for exact versions):

  • SvelteKit 2 / Svelte 5: Application framework, built on Svelte 5 runes ($state, $derived, $effect) rather than component classes or hooks
  • TypeScript: Typed superset of JavaScript
  • Tailwind CSS 4 and daisyUI: Utility-first CSS framework and component theme layer
  • Vite: Build tool and dev server, with @sveltejs/adapter-static for production output
  • Leaflet (leaflet, leaflet.markercluster, leaflet-geosearch): Interactive map rendering and clustering for tracker locations
  • svelte-hero-icons: Icon set
  • Vitest: Test runner for unit tests
  • fetch (native): The API client in packages/tracker-shared/src/api/client.ts uses the browser fetch API directly rather than a third-party HTTP client
  • Docker: Containerization platform
  • Node.js: JavaScript runtime

Documentation Sections