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 React, TypeScript, and Tailwind CSS, and communicates with the API via REST endpoints.

Features

  • Authentication: JWT-based authentication with the Tracker API
  • Dashboard: Overview of tracker statistics and map visualization
  • Tracker Management: View tracker details and location history
  • Image Gallery: Upload, view, and select images for use in various parts of the application
  • Dark Mode: Toggle between light and dark themes for better visibility in different environments

Architecture

The front-end is a standalone React 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.

The front-end uses the following technologies:

  • React 19: JavaScript library for building user interfaces
  • TypeScript: Typed superset of JavaScript
  • Tailwind CSS: Utility-first CSS framework
  • React Query: Data fetching and caching library
  • React Router: Routing library for React
  • React Hook Form: Form handling library
  • Axios: HTTP client for API requests
  • Leaflet: JavaScript library for interactive maps
  • Docker: Containerization platform
  • Node.js 20: JavaScript runtime

Documentation Sections