bg-tracking-module
v1.0.0
Published
Tracking application as a Web Component - A complete tracking solution that can be embedded in any web application
Maintainers
christianirackReadme
bg-tracking-module
A complete tracking application packaged as a Web Component. Built with React 19 and designed to be embedded in any web application, regardless of the framework.
Features
- Framework Agnostic: Works with vanilla HTML, React, Vue, Angular, or any other framework
- Self-Contained: All dependencies bundled (React, Firebase, Leaflet, etc.)
- Easy Integration: Just include 2 files (JS + CSS) and use the custom element
- Real-time Tracking: Live shipment and order tracking
- Interactive Maps: Powered by Leaflet for route visualization
- Responsive Design: Works on desktop and mobile devices
Installation
npm install bg-tracking-moduleOr use via CDN:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tracking-app.css">
<script type="module" src="https://unpkg.com/[email protected]/tracking-app.js"></script>Usage
Basic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tracking App</title>
<!-- Include the CSS -->
<link rel="stylesheet" href="node_modules/bg-tracking-module/tracking-app.css">
</head>
<body>
<!-- Use the web component -->
<tracking-app></tracking-app>
<!-- Include the JS -->
<script type="module" src="node_modules/bg-tracking-module/tracking-app.js"></script>
</body>
</html>With Props
<tracking-app
base-url="/tracking"
client="bigsmart">
</tracking-app>React
import 'bg-tracking-module/tracking-app.css';
import 'bg-tracking-module/tracking-app.js';
function App() {
return (
<div>
<h1>My Application</h1>
<tracking-app base-url="/tracking" client="bigsmart"></tracking-app>
</div>
);
}Vue
<template>
<div>
<h1>My Application</h1>
<tracking-app base-url="/tracking" client="bigsmart"></tracking-app>
</div>
</template>
<script>
import 'bg-tracking-module/tracking-app.css';
import 'bg-tracking-module/tracking-app.js';
export default {
name: 'App'
}
</script>Angular
// app.component.ts
import 'bg-tracking-module/tracking-app.css';
import 'bg-tracking-module/tracking-app.js';<!-- app.component.html -->
<tracking-app base-url="/tracking" client="bigsmart"></tracking-app>Available Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| base-url | string | / | Base URL for routing |
| client | string | auto-detected | Client identifier (bigsmart, coppel, walmart) |
Browser Support
- Chrome/Edge 88+
- Firefox 85+
- Safari 14+
- Opera 74+
Size
- JavaScript: ~1.8 MB (532 KB gzipped)
- CSS: ~12.5 MB (6.3 MB gzipped)
The large size is due to all dependencies being bundled for standalone use.
Development
Built with:
- React 19
- Vite
- react-to-webcomponent
- Leaflet (Maps)
- Firebase (Real-time updates)
- Bootstrap (UI)
- Zustand (State management)
License
MIT
Support
For issues and questions, please visit GitHub Issues
Changelog
1.0.0 (2025-10-31)
- Initial release
- Complete tracking application as web component
- Support for real-time tracking
- Interactive maps
- Multi-client support