{"id":13989600,"url":"https://github.com/hypertrack/placeline-nextjs","last_synced_at":"2026-02-20T20:42:51.140Z","repository":{"id":40940754,"uuid":"197675330","full_name":"hypertrack/placeline-nextjs","owner":"hypertrack","description":"HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku","archived":false,"fork":false,"pushed_at":"2023-01-07T07:55:22.000Z","size":9851,"stargazers_count":92,"open_issues_count":15,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-29T08:39:20.991Z","etag":null,"topics":["ant-design","axios","dotenv","google-maps","google-places","heroku","hypertrack","localtunnel","lodash","moment","nextjs","placeline","react","samples","styled-components","template","trips"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hypertrack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-19T00:41:06.000Z","updated_at":"2024-11-10T12:37:27.000Z","dependencies_parsed_at":"2023-02-06T15:15:30.041Z","dependency_job_id":null,"html_url":"https://github.com/hypertrack/placeline-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/hypertrack/placeline-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypertrack%2Fplaceline-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypertrack%2Fplaceline-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypertrack%2Fplaceline-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypertrack%2Fplaceline-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypertrack","download_url":"https://codeload.github.com/hypertrack/placeline-nextjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypertrack%2Fplaceline-nextjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266483501,"owners_count":23936352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","axios","dotenv","google-maps","google-places","heroku","hypertrack","localtunnel","lodash","moment","nextjs","placeline","react","samples","styled-components","template","trips"],"created_at":"2024-08-09T13:01:49.579Z","updated_at":"2026-02-20T20:42:51.075Z","avatar_url":"https://github.com/hypertrack.png","language":"JavaScript","readme":"\u003ca href=\"https://www.hypertrack.com/\"\u003e\n    \u003cimg src=\"https://hypertrack-blog-img.s3-us-west-2.amazonaws.com/Green0svg.svg\" alt=\"HyperTrack logo\" title=\"HyperTrack\" align=\"right\" height=\"40\" /\u003e\n\u003c/a\u003e\n\n# Sample Frontend Integration: Placeline\n\n![](https://img.shields.io/circleci/build/gh/hypertrack/placeline-nextjs?style=flat-square)\n![](https://img.shields.io/david/hypertrack/placeline-nextjs?style=flat-square)\n![](https://img.shields.io/github/license/hypertrack/placeline-nextjs?style=flat-square)\n\nPlaceline 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.\n\n\u003e 💬 [Check out this blog post](https://hypertrack.com/blog/2019/09/09/open-sourcing-placeline-a-sample-app-to-track-the-movement-history-of-your-workforce/) to learn why this is important, how HyperTrack is using it internally, and how it all ties together with HyperTrack platform.\n\nPlaceline is built with HyperTrack Views.\n\n## Overview\n\n- [Sample Frontend Integration: Placeline](#sample-frontend-integration-placeline)\n  - [Overview](#overview)\n  - [Features](#features)\n  - [Requirements](#requirements)\n  - [Installation and setup](#installation-and-setup)\n    - [Local setup](#local-setup)\n    - [Heroku setup](#heroku-setup)\n  - [Usage](#usage)\n  - [Related](#related)\n  - [Credits](#credits)\n  - [License](#license)\n\n## Features\n\n| Dashboard                        |\n| -------------------------------- |\n| \u003cimg src=\"public/dashboard.png\"\u003e |\n\n- Embed HyperTrack Views in a dashboard\n- Map the live locations of all devices\n- Search and browse devices by day and timezone\n- Drill down to live tracking views and day’s history for each device\n- Review tracking summaries for duration, distance, activities, and more\n- Export tracking summaries\n\n## Requirements\n\nThe goal of this project is to get you to a deployed integration in minutes. For this to work, you need to have:\n\n- [ ] Set up a [HyperTrack account](https://dashboard.hypertrack.com/signup) and obtain your `AccountId` and `SecretKey` from the [Dashboard](https://dashboard.hypertrack.com/)\n- [ ] Integrate the HyperTrack SDK in your mobile application ([iOS](https://github.com/hypertrack/quickstart-ios), [Android](https://github.com/hypertrack/quickstart-android), or [React Native](https://github.com/hypertrack/quickstart-react-native)) or use our sample app to send location data ([iOS](https://github.com/hypertrack/live-app-ios) or [Android](https://github.com/hypertrack/live-app-android))\n\n## Installation and setup\n\nYou can install this project on your local machine and deploy it quickly to Heroku for free.\n\n### Local setup\n\nAfter cloning or forking this repository, you should install all dependencies on your machine:\n\n```shell\n# with npm\nnpm install\n\n# or with Yarn\nyarn\n```\n\nNext, you need to set your environmental variables. The project uses [dotenv](https://github.com/motdotla/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:\n\n```shell\n# HyperTrack\nHT_PUBLISHABLE_KEY = \u003cHT_PUBLISHABLE_KEY\u003e\n```\n\nWith the dependencies and configuration in place, you can start the server in development mode:\n\n```shell\n# with npm\nnpm run dev\n\n# or with Yarn\nyarn dev\n```\n\n**Congratulations!** You just completed a web app for your HyperTrack integration.\n\n### Heroku setup\n\nThis 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:\n\n- Web Dyno - to run the server on Heroku (free)\n- NodeJS buildpack - to run NextJS on Heroku (free)\n- PaperTrail - hosted logging system (free)\n\nSimilar to the local setup, you need to have your keys ready before the deployment. The Heroku page will ask you for the following:\n\n- `HT_PUBLISHABLE_KEY`: Your HyperTrack publishable key\n\nYou 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.\n\n**Deploy this project now on Heroku:**\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/hypertrack/placeline-nextjs)\n\n## Usage\n\nOnce 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.\n\n## Related\n\nThis web application is using [HyperTrack Views](https://www.hypertrack.com/docs/guides/track-devices-with-api#embed-views-in-your-dashboard).\n\n## Credits\n\nThis project uses the following open-source packages:\n\n- [nextjs](https://github.com/zeit/next.js/): SSR React Framework\n- [dotenv](https://github.com/motdotla/dotenv): Load environment variables from .env files\n- [ant-design](https://github.com/ant-design/ant-design): An enterprise-class UI design language and React implementation\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypertrack%2Fplaceline-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypertrack%2Fplaceline-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypertrack%2Fplaceline-nextjs/lists"}