Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hypertrack/placeline-nextjs

HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
https://github.com/hypertrack/placeline-nextjs

ant-design axios dotenv google-maps google-places heroku hypertrack localtunnel lodash moment nextjs placeline react samples styled-components template trips

Last synced: about 1 month ago
JSON representation

HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku

Host: GitHub
URL: https://github.com/hypertrack/placeline-nextjs
Owner: hypertrack
License: mit
Created: 2019-07-19T00:41:06.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T07:55:22.000Z (over 1 year ago)
Last Synced: 2024-06-28T13:34:32.664Z (3 months ago)
Topics: ant-design, axios, dotenv, google-maps, google-places, heroku, hypertrack, localtunnel, lodash, moment, nextjs, placeline, react, samples, styled-components, template, trips
Language: JavaScript
Homepage:
Size: 9.39 MB
Stars: 91
Watchers: 3
Forks: 13
Open Issues: 15
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

    



# Sample Frontend Integration: Placeline

![](https://img.shields.io/circleci/build/gh/hypertrack/placeline-nextjs?style=flat-square)

![](https://img.shields.io/david/hypertrack/placeline-nextjs?style=flat-square)

![](https://img.shields.io/github/license/hypertrack/placeline-nextjs?style=flat-square)

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](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.

Placeline is built with HyperTrack Views.

## Overview

- [Sample Frontend Integration: Placeline](#sample-frontend-integration-placeline)

  - [Overview](#overview)

  - [Features](#features)

  - [Requirements](#requirements)

  - [Installation and setup](#installation-and-setup)

    - [Local setup](#local-setup)

    - [Heroku setup](#heroku-setup)

  - [Usage](#usage)

  - [Related](#related)

  - [Credits](#credits)

  - [License](#license)

## Features

| Dashboard                        |

| -------------------------------- |

|  |

- Embed HyperTrack Views in a dashboard

- Map the live locations of all devices

- Search and browse devices by day and timezone

- Drill down to live tracking views and day’s history for each device

- Review tracking summaries for duration, distance, activities, and more

- Export tracking summaries

## Requirements

The goal of this project is to get you to a deployed integration in minutes. For this to work, you need to have:

- [ ] Set up a [HyperTrack account](https://dashboard.hypertrack.com/signup) and obtain your `AccountId` and `SecretKey` from the [Dashboard](https://dashboard.hypertrack.com/)

- [ ] 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))

## Installation and setup

You can install this project on your local machine and deploy it quickly to Heroku for free.

### Local setup

After cloning or forking this repository, you should install all dependencies on your machine:

```shell

# with npm

npm install

# or with Yarn

yarn

```

Next, 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:

```shell

# HyperTrack

HT_PUBLISHABLE_KEY = 

```

With the dependencies and configuration in place, you can start the server in development mode:

```shell

# with npm

npm run dev

# or with Yarn

yarn dev

```

**Congratulations!** You just completed a web app for your HyperTrack integration.

### Heroku setup

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:

- Web Dyno - to run the server on Heroku (free)

- NodeJS buildpack - to run NextJS on Heroku (free)

- PaperTrail - hosted logging system (free)

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 key

You 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:**

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/hypertrack/placeline-nextjs)

## Usage

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.

## Related

This web application is using [HyperTrack Views](https://www.hypertrack.com/docs/guides/track-devices-with-api#embed-views-in-your-dashboard).

## Credits

This project uses the following open-source packages:

- [nextjs](https://github.com/zeit/next.js/): SSR React Framework

- [dotenv](https://github.com/motdotla/dotenv): Load environment variables from .env files

- [ant-design](https://github.com/ant-design/ant-design): An enterprise-class UI design language and React implementation

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details