etcetera8 / kog-locker

A React/Redux/Router athlete motivation app using oAuth2.0 the Strava API

Kog Locker

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.

Run This Project

Front-End

• 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

Back-End

• 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

Screen Shots

Login page

Home page

Photo Gallery

Stats page

Badge page

Target Segment page

Mobile view

kog-locker's Issues

oAuth for user signin

lazy loading

photo carousel

Polyline seems a little small

Set Up Express.js backend

Test Landing Page

Add recent (last 4 weeks) to user data page

stats docs

Display Badges to Badge Container

Test Cleaner

Test API

Update target time

oauth

be able to log in as a different user

badges

center info in badge, regex for commas

Create Default Badges in Store

Set Intital API Calls to Redux Store

Seperate Badge creaters and helpers into badge helper file

Have map update immediately on new segment id

Route to Stats Page

• Display two stats cards and maybe graph?

Convert numbers in cleaner

Add User Ability to Set Goal

Create Map With gmaps API

gmaps api article

backend

be able to store user data in db

Display Target Ride best time and data

Create Base Landing Page with all components present

see page one

Add local storage to persist current user so no refresh of page on new segment

Add RegEx to add commas to numbers

Fix styling on badges

Create New Default Badges

• All Time Distance of 5, 10, 20 thousand miles

• 100 mile ride

• Hit Max Power of 1200, 1000, 800 watts in last 30 Rides

• Burn 1200 kcals in a ride

• Have average speed of 20 mph or more

After Strave Oauth welcome page flashs for a second

Change Styling of Badges based on Users Stats compared to Goals

Add User Ability to Set new Target Segment

Test Google Maps Api calls in MapCard somehow

Add postgresql backend to signup/login users and display different data

Convert units to from meters to kms

Test Actions

Polyline only sometimes loads on first try...

Refactor API calls and cleaner function

Test Reducers

Breakout Badges from badgecontainer to being 'free' on badge route main

Polyline does not persist on page change