All Projects → hypertrack → Placeline Nextjs

hypertrack / Placeline Nextjs

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Placeline Nextjs

React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (+46.59%)
Mutual labels:  nextjs, template, styled-components
Moveit
🚀 NLW #4 | React+ TypeScript + NextJS + StyledComponents + Firebase + MongoDb +Axios
Stars: ✭ 39 (-55.68%)
Mutual labels:  nextjs, axios, styled-components
Next Starter
Next.js Starter using GraphQL, MobX (Next.js, TypeScript, Babel, Express.js, Apollo Client, React Apollo, React Apollo Hooks, GraphQL Codegen, MobX, mobx-state-tree, styled-components, next-optimized-images, Serverless Framework, AWS Lambda, Dotenv)
Stars: ✭ 90 (+2.27%)
Mutual labels:  dotenv, nextjs, styled-components
Vue Typescript Music
🔥 基于 vue 全家桶 音乐项目(Music project) vue+typescript 实现 高仿 网易云音乐 移动端WebApp
Stars: ✭ 94 (+6.82%)
Mutual labels:  lodash, moment, axios
twitch-chat-visualizer
A Node.js Project. Would you like to see your chat stream with a custom design? This is for you!
Stars: ✭ 14 (-84.09%)
Mutual labels:  heroku, dotenv, axios
Styled Components Website
The styled-components website and documentation
Stars: ✭ 513 (+482.95%)
Mutual labels:  nextjs, styled-components
Brian Lovin Next
My personal site
Stars: ✭ 522 (+493.18%)
Mutual labels:  nextjs, styled-components
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+764.77%)
Mutual labels:  lodash, styled-components
Heroku Aiohttp Web
A project starter template for deploying an aiohttp app to Heroku
Stars: ✭ 14 (-84.09%)
Mutual labels:  heroku, template
Coderplanets web
the most sexiest community for developers, build with React, Mobx/MST, GraphQL, Styled-Components, Rxjs, Ramda ... and ❤️
Stars: ✭ 314 (+256.82%)
Mutual labels:  nextjs, styled-components
Security Checklist
A checklist for staying safe on the internet
Stars: ✭ 908 (+931.82%)
Mutual labels:  nextjs, styled-components
Emptyd Admin Webpack
基于typescript react webpack的脚手架
Stars: ✭ 30 (-65.91%)
Mutual labels:  lodash, moment
Vscodethemes
Preview themes from the VSCode marketplace.
Stars: ✭ 374 (+325%)
Mutual labels:  heroku, nextjs
Mxstbr.com
The source for my personal website
Stars: ✭ 370 (+320.45%)
Mutual labels:  nextjs, styled-components
Pizzaql
🍕 Modern OSS Order Management System for Pizza Restaurants
Stars: ✭ 631 (+617.05%)
Mutual labels:  nextjs, styled-components
Heroku Nextjs
⏩ Deploy Next.js universal web apps to Heroku
Stars: ✭ 323 (+267.05%)
Mutual labels:  heroku, nextjs
Heroku Wp
WordPress on Heroku
Stars: ✭ 865 (+882.95%)
Mutual labels:  heroku, template
Glutenproject.com
Google for Certified Gluten Free Products
Stars: ✭ 37 (-57.95%)
Mutual labels:  nextjs, styled-components
Getlink Next
Get Link!
Stars: ✭ 48 (-45.45%)
Mutual labels:  nextjs, ant-design
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+12363.64%)
Mutual labels:  axios, ant-design
HyperTrack logo

Sample Frontend Integration: Placeline

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.

Overview

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:

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:

# 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.

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

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.

Credits

This project uses the following open-source packages:

  • nextjs: SSR React Framework
  • dotenv: Load environment variables from .env files
  • ant-design: An enterprise-class UI design language and React implementation

License

This project is licensed under the MIT License - see the LICENSE file for details

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].