This is a serverless single-page application for Web and Mobile. Its purpose is to show all TriMet vehicles within a radius of 3 miles of your location.
You can see a live example at https://sgnix.github.io/nike/. The application will scale its size if viewed from a mobile device.
Please make sure that your browser or mobile device allow geolocation services, and that you do not have any tracker blockers, such as Ghostery or uBlock. They can sometimes block Google Maps.
This project was created on a Wednesday evening as part of this coding challenge for Nike. The challenge objective has been slightly modified to adapt it better to Portland's TriMet API, which does not provide departure times.
Create a service that gives real-time location for public transportation in the immediate vicinity of the user. The app should geolocalize the user, and it should display all vehicles on a map, where the user could see them move in (almost) real time.
Given that only publicly available API endpoints have been used, such as TriMet Vehicle Location Service and Google Maps, it has been determined that this application does not need a back end. The latter would have been required if either of the services used required authentication.
Therefore, a serverless single-page application with responsive design has been created using the following tools:
- The VanillaJS JavaScript framework - a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.
- The MiniCSS framework - providing responsive grids and pleasant typefaces.
- TriMet Vehicle Location Service - providing real-time location data for all TriMet vehicles.
- Google Maps - provides API to display and customize maps.
VanillaJS was picked for this project for its robustness, speed and browser support. It provides blazing fast code compilation time and rendering. The author of this application believes that VanillaJS is the mother of all JavaScript web frameworks, and one who can wield VanillaJS can handle any other arbitrary framework.
As the application grows, it may benefit from moving to another framework, such as Knockout.js or Rivets.js, which will handle event and element dependencies better.
It is well known that most web application using Bootstrap (and such) only utilize around 20% of its definitions. The result is very often application obesity - a bloated big application that wastes resources and takes too long to load.
MiniCSS is miniscule, yet it handles 99% of the UX cases. This application only uses it for its responsive grids. MiniCSS is loaded from CDN, so fast delivery times are guaranteed.
The entire application is contained inside a single JavaScript closure, so it does not pollute the global namespace. It defines a number of private functions and classes. The outside world only has access to the app object, which contains functions needed to bootstrap the application and initialize Google Maps - run and initMap respectively.
The position of the user is established using the built-in geolocation service.
A map of the vicinity (3 miles of radius) is displayed
A call to the TriMet API is periodically made, the data is parsed, processed and updated in the list of vehicles as well as the bus markers on the map.
For more details, please refer to the source code of app.js, which is fairly small, clean and well commented.
- mempe - Local storage code pastes shared over web socket
- Short Link Privacy (repo available upon request) - Short Link Privacy (SLP) provides an easy and convenient way to encrypt one's web communications. It works in social media sites, web based email clients, forums, bulletin boards and any other web based communication tools.