Skip to content
No description, website, or topics provided.
JavaScript Ruby CSS HTML CoffeeScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bin
config
db
frontend
lib
log
public
storage
test
tmp
vendor
.DS_Store
.byebug_history
.gitattributes
.gitignore
.ruby-version
Gemfile
Gemfile.lock
README.md
Rakefile
config.ru
package-lock.json
package.json
upshift.code-workspace
webpack.config.js

README.md

UpShift

Live Link

Upshift, is my take on cloning Strava which allows you to create and track your workout routes and activities. This application was built in 10 days and is a single page app built with a Rails backend, postgress database, and a React and Redux frontend.

Screen-Shot-2019-11-22-at-12-32-21-PM

Built With:

Technologies

  • Ruby on Rails
  • PostgreSQL
  • HTML
  • SCSS/CSS

Libraries

  • React JS
  • Redux
  • JQuery for AJAX calls
  • BCrypt for user authentication
  • Google Maps API
    • Google directions service
    • Google elevations service
    • Google static maps

Challenges

One of the biggest challenges I encountered while building this app was deciding on how I was going to map workout routes and store them in the database. I had considered a few differnet mapping API options but ultimately decided on using Google Maps. I considered two differnt ways of drawing routes on a map. The first option was using markers and a polyline to connect the markers with the Snap to Roads functionality in the Roads API but decided against this due to the lack of context the service provides for transportation mode(cycling or running). I ultimately used the directions service to map between all the different waypoints the user inputs by clicking on the map. This allowed for me to route inteligently based on if the user is trying to map a ride or run. I wrote the below request to the google maps directions service API using the local React state to store all the waypoints of the route and the transportation mode.

  calcRoute() {
    const request = {
      origin: this.state.waypoints[0].location,
      destination: this.state.waypoints[this.state.waypoints.length-1].location,
      // this.state.waypoints is an array of all clicks on the map
      waypoints: this.state.waypoints.slice(1, -1),
      // use the state to store the route type
      travelMode: this.state.route_type === 'Running' ? 'WALKING' : 'BICYCLING',
      optimizeWaypoints: false,
      avoidFerries: true,
      avoidHighways: true,
      avoidTolls: true,
    };

    this.directionsService.route(request, (result, status) => {
      if (status == 'OK') {
        this.directionsRenderer.setDirections(result);
        
        //  map all the distances between waypoints to routeDistance array
        const routeLegDistances = result.routes[0].legs.map( leg => (
          leg.distance.value));
        // Set routedistance to the sum of all leg distances
        let routeDistance = routeLegDistance.reduce((a,b) => a + b, 0)
        // convert to miles
        routeDistance = routeDistance / 1609.344;
        // Set the local state of distance to later save to the database
        this.setState( { distance: routeDistance } );
      }
    });
  }

Screen-Shot-2019-11-22-at-11-02-07-AM

Another challenge I encountered was deciding on how I was going to store my route data in my database. I initially wanted to store the route data in a gpx(XML format) file. This would allow users to use a common data format supported by most fitness tracking device to upload past workout files and routes directly to the app and have it parsed into google maps latLng route waypoints. With the consideration of time I settled on storing the data as a JSON object converted into a string. In the future I will implement a GPX parsing algorithim to store the data in a more flexible format.

Future Features

  • Ability for users to upload workout data with GPX Files
  • Profile picture stored on AWS
  • Elevation chart on route show page
You can’t perform that action at this time.