Skip to content
WMATA Pinging
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of Wai-Yan:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
controllers
models
routes
scripts
.DS_Store
.gitignore
Procfile
README.md
nodemon.json
package-lock.json
package.json
server.js
yarn-error.log

README.md

BusTrakr

BusTrakr is a single-page application that informs users of the current status of a WMATA bus for every route. Users have the option of bookmarking routes and stops.

Features

  • Bus positions are updated every 15 seconds

  • You can search for a route of your own in the search bar (Autocomplete-enabled)

  • Create an account or log in to enable the bookmarking feature.

  • See bookmarked lines by clicking

  • See which buses are on the road with

  • Use current location to center the map on where you are.

  • Click on a bus marker to see destination, direction, and deviation from its schedule.

    • Negative Deviation indicates the bus is running ahead of schedule. -1 means one minute early.
    • Positive Deviation indicates the bus is running late. +3 means three minutes late.
  • Click on a stop marker to see which buses will visit that stop.

    • Here you can also see a prediction of when the bus might arrive.

Technologies & Frameworks

Code Example

import React, { Component } from "react";
import Home from "./pages/Home";
import Nav from "./components/Nav";
import Login from "./components/Login";
import FavNav from "./components/FavNav"
import { Provider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";
import { BrowserRouter as Router, Route } from "react-router-dom";
import About from "./pages/About";
import "./App.css";

const options = {
  timeout: 5000,
  position: "bottom center"
};

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isSignedIn: false,
      uuid: null,
      open: false,
      routes: []
    };
  }
  
  onSignInSuccess = (currentUid, usersRoutes) => {
    this.setState({
      isSignedIn: true,
      uuid: currentUid,
      open: false,
      routes: usersRoutes
    });
  }
  
  onSignOutSuccess = () => {
    this.setState({
      isSignedIn: false,
      uuid: null
    });
  }

  openSignInModal = () => {
    this.setState({
      open: true
    });
  }

  closeSignInModal = () => {
    this.setState({
      open: false
    });
  }

  render() {
    return (
      <Router>
        <Provider template={AlertTemplate} {...options}>
            <Nav>
            <Login onSignInSuccess={this.onSignInSuccess.bind(this)} onSignOutSuccess={this.onSignOutSuccess.bind(this)} isOpenSignIn={this.state.open} isCloseSignIn={this.closeSignInModal.bind(this)}/>
            </Nav>
            <Route exact path="/" render={() => <Home isSignedIn={this.state.isSignedIn} userID={this.state.uuid} openSignIn={this.openSignInModal.bind(this)} userSavedRoutes={this.state.routes}/> }/>
            <Route exact path="/about" component={About} />
        </Provider>
      </Router>
    );
  }
}

export default App;

Screenshots

Installation

Authors

Acknowledgments

  • George Washington University Instructor and TA's
You can’t perform that action at this time.