This is an app using the Strava Api to 'gamify' cycling by having tokens that an individual can unlock after reaching certain levels i.e. miles, power targets, elevation, distance and set personal targets on segments of trail or road.
I have an node/express backend handling the oAuth and allowing users to login. After allowing my app to use their data users are able to see their personal stats, their collected tokens, and a target segment. At the bottom I have implemented a lazy-load image gallery to allow users to see their most memorable moments from activities.
Users have the ability to set a 'target' segment that defaults to giving them a 3% increase in time goal, however the user can adjust this however they want to. The users have the ability to update the target segment. I wasn't sure how to set the default target segment so I set it to one my personal favorite climbs in Colorado.
I built this app using React/Router and Redux.
- Clone down the project into a folder
- run
npm install
- Apply and receive an api key from google
- create a file in the src directory, name it apiKey.js
- In that file add in
export const gKey = "yourGoogleApiKeyHere";
- Run
npm start
and visit localhost:3000
- Clone down into the root project directory the strava api proxy from
https://github.com/JamesRandall/StravaAPIProxy.git
- Get a Strava Developer account setup from Strava
- Go into the back-end and open up App.js, place your client ID and client secret into the appropriate variables.
npm install
npm start
and visit localhost:3100