2026 Goals Tracker

An Angular Universal application to track your 2026 sport and gaming goals.

Features

• Sport Goals: Track biking (7,500km), running (2,500km), and swimming (250km) via Strava API
• Gaming Goals: Monitor progress toward Diamond rank in TFT/LoL, Champion in Rocket League, and Level 10 in Faceit
• Progress Visualization: Charts and progress bars showing your progress over time
• On-Track Analysis: See if you're on track to meet your goals by the end of 2026

Setup

1. Install dependencies:

npm install

2. Configure environment variables in src/environments/environment.ts:

   • Strava: Client ID, Client Secret, Redirect URI
   • Riot Games: API Key, Region, Summoner Names
   • Faceit: API Key, User ID
   • Tracker.gg: API Key, Rocket League Platform/Username

3. Run development server:

npm start

4. Build for production:

npm run build

5. Run SSR server:

npm run serve:ssr

API Setup

Strava

1. Go to https://www.strava.com/settings/api
2. Create a new application
3. Set redirect URI to http://localhost:4200/auth/strava/callback
4. Copy Client ID and Client Secret

Riot Games

1. Go to https://developer.riotgames.com/
2. Create an account and get an API key
3. Note your region (e.g., euw1, na1)
4. Provide your summoner names for LoL and TFT

Faceit

1. Go to https://developers.faceit.com/
2. Create an API key
3. Provide your Faceit user ID

Tracker.gg

1. Check https://tracker.gg/developers/docs for API access
2. Get API key if available
3. Provide your Rocket League platform and username

Project Structure

• src/app/core/ - Services, models, and interceptors
• src/app/features/ - Feature components (dashboard, sport, gaming)
• src/app/shared/ - Shared components and utilities
• src/environments/ - Environment configuration

Technologies

• Angular 19 with Universal SSR
• Tailwind CSS for styling
• Chart.js with ng2-charts for visualizations
• RxJS for reactive programming
• TypeScript with strict mode