HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Placeline is a ReactJS/NextJS sample application to track the movement of your mobile workforce through the workday. Use this web app to track the live location, activity, and outages of your business assets; track summaries for miles driven, steps walked, stops taken and inactive times; drill down to device locations organized in activity segments for each day, and export selected segments to 3rd party applications such as expense management software.
💬 Check out this blog post to learn why this is important, how HyperTrack is using it internally, and how it all ties together with HyperTrack platform.
Placeline is built with HyperTrack Views.
Dashboard |
---|
The goal of this project is to get you to a deployed integration in minutes. For this to work, you need to have:
AccountId
and SecretKey
from the Dashboard
You can install this project on your local machine and deploy it quickly to Heroku for free.
After cloning or forking this repository, you should install all dependencies on your machine:
# with npm
npm install
# or with Yarn
yarn
Next, you need to set your environmental variables. The project uses dotenv, so it's best to create a .env
file in the root folder of the project. This file is listed in .gitignore
and shall not be checked into public repositories. Below is the content on the file - please ensure to replace the keys with your own:
# HyperTrack
HT_PUBLISHABLE_KEY = <HT_PUBLISHABLE_KEY>
With the dependencies and configuration in place, you can start the server in development mode:
# with npm
npm run dev
# or with Yarn
yarn dev
Congratulations! You just completed a web app for your HyperTrack integration.
This project is set up to be deployed to Heroku within seconds. You need a Heroku account. All you need to do is to click on the one-click-deploy button below. It will provide the following services and add-ons:
Similar to the local setup, you need to have your keys ready before the deployment. The Heroku page will ask you for the following:
HT_PUBLISHABLE_KEY
: Your HyperTrack publishable keyYou need to enter all of these keys for the project to run successfully. Heroku uses the input to pre-set the environmental variables for the deployment. You can change after the setup as well.
Deploy this project now on Heroku:
Once the main page (index.js) is opened, it will load an embeddable view from HyperTrack to display all tracked devices. The HyperTrack View enables interaction, so drilling down onto a single device and its history is easily possible.
This web application is using HyperTrack Views.
This project uses the following open-source packages:
This project is licensed under the MIT License - see the LICENSE file for details