Placeline Nextjs

screenshot of Placeline Nextjs
nextjs
react
styled-components
ant-design

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

Overview

Placeline is a ReactJS/NextJS sample application that allows users to track the movement of their mobile workforce throughout the workday. It provides features such as live location tracking, activity tracking, and outage tracking for business assets. Users can also view tracking summaries for metrics like miles driven, steps walked, stops taken, and inactive times. The application allows users to drill down into device locations organized by activity segments for each day and export selected segments to third-party applications like expense management software. Placeline is built with HyperTrack Views.

Features

  • Dashboard: Embed HyperTrack Views in a dashboard to map the live locations of all devices and search and browse devices by day and timezone.
  • Live Tracking: Drill down to live tracking views and see the day's history for each device.
  • Tracking Summaries: Review tracking summaries for duration, distance, activities, and more.
  • Export: Export tracking summaries to third-party applications.

Local Setup

  1. Clone or fork the repository.
  2. Install all dependencies by running npm install in the root folder of the project.
  3. Create a .env file in the root folder of the project and add the following environmental variables:
    • AccountId: [Your HyperTrack account ID]
    • SecretKey: [Your HyperTrack secret key]
  4. Start the server in development mode by running npm run dev.

Heroku Setup

  1. Click on the one-click-deploy button to deploy the project to Heroku.
  2. You will need a Heroku account to complete the deployment.
  3. During the deployment process, you will be prompted to enter the following environmental variables:
    • HT_PUBLISHABLE_KEY: [Your HyperTrack publishable key]
    • AccountId: [Your HyperTrack account ID]
    • SecretKey: [Your HyperTrack secret key]
  4. Enter the required keys and Heroku will pre-set the environmental variables for the deployment.

Summary

Placeline is a sample application built with ReactJS/NextJS and HyperTrack Views that allows users to track the movement of their mobile workforce. It offers features such as live location tracking, activity tracking, and outage tracking for business assets. The application provides users with the ability to view tracking summaries and export them to third-party applications. Placeline can be easily installed and deployed locally or on Heroku by following the provided installation instructions.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.