GymTrack

A gym-themed fitness tracking web application with real-time data sync, Keycloak authentication, and a bold dark-mode UI.

---

Tech Stack

Layer	Technology	Description
	Angular 19	Standalone Components, Signals, zoneless-ready
	TypeScript 5.7	Strict mode, type-safe throughout
	Tailwind CSS 4.3	Dark theme, CSS-native @theme tokens
	Firebase 12	Firestore real-time sync, onSnapshot subscriptions
	Keycloak 26	OpenID Connect, PKCE S256, SSO-ready
	Vercel	Static SPA deployment, build-time env injection

Features

• Workout Tracking — Log exercises, sets, reps, and weights per session
• Smart Scheduling — Weekly calendar view, drag workouts into your plan
• Real-Time Sync — Firestore onSnapshot keeps data live across devices
• Auth & SSO — Keycloak login/register with social provider support (Google, GitHub)
• Membership Tiers — Basic (free), Premium, Elite plans
• Admin Panel — User management, role-based access control
• Dark Mode UI — Orange primary (#f97316), green accent (#22c55e), OLED-friendly

Getting Started

Prerequisites

• Node.js >= 22.x
• Docker & Docker Compose (for local Keycloak)

1. Install dependencies

npm install

2. Start Keycloak (local)

cd docker
docker compose up -d

Keycloak will be available at http://localhost:8080

• Admin console: http://localhost:8080/admin (admin / admin)
• Test user: [email protected] / testpass123

3. Configure Firebase

Update src/environments/environment.ts with your Firebase project credentials:

firebase: {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT.firebasestorage.app',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
}

4. Start the dev server

ng serve

Open http://localhost:4200

Project Structure

src/app/
  core/
    guards/          - Route protection (auth, admin)
    interceptors/    - HTTP interceptors (bearer token)
    models/          - TypeScript interfaces (Workout, User)
    services/        - AuthService, FirestoreService, WorkoutService
  shared/
    components/      - Navbar, Footer, LoadingSpinner
    pipes/           - Custom pipes
  features/
    admin/           - Admin panel (user management, stats)
    dashboard/       - User dashboard (workout summary)
    landing/         - Public landing page (hero, features, pricing)
    membership/      - Membership plans & upgrade
    profile/         - User profile settings
    schedule/        - Weekly workout calendar
    workouts/        - Workout CRUD
      workout-create/  - Create/edit workout form
      workout-detail/  - Single workout view
      workout-list/    - All workouts list

Deployment (Vercel)

Set these environment variables in Vercel project settings:

Variable	Description
KEYCLOAK_URL	Keycloak URL with /auth suffix if needed
KEYCLOAK_REALM	Realm name
KEYCLOAK_CLIENT_ID	Client ID
FIREBASE_API_KEY	Firebase API key
FIREBASE_AUTH_DOMAIN	Firebase auth domain
FIREBASE_PROJECT_ID	Firebase project ID
FIREBASE_STORAGE_BUCKET	Firebase storage bucket
FIREBASE_MESSAGING_SENDER_ID	Firebase messaging sender ID
FIREBASE_APP_ID	Firebase app ID
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name (for exercise image uploads)
CLOUDINARY_UPLOAD_PRESET	Cloudinary unsigned upload preset name

The build command npm run build:vercel runs scripts/set-env.js to inject these into the production environment at build time.

Note: Cloud-IAM uses the /auth path prefix — set KEYCLOAK_URL to https://<instance>.cloud-iam.com/auth

Cloudinary Setup (exercise images)

Exercise image uploads use Cloudinary's free tier (25GB storage + 25GB bandwidth/month, no card required) instead of Firebase Storage, since Firebase Storage now requires the paid Blaze plan. Uploads go directly from the browser to Cloudinary via an "unsigned upload preset" — no backend or secret key needed.

1. Sign up free at cloudinary.com.
2. Copy the Cloud name shown on your dashboard.
3. Go to Settings → Upload → Upload presets → Add upload preset, set Signing Mode to Unsigned, save, and copy the preset name.
4. For local dev, put both values directly into src/environments/environment.ts under cloudinary: { cloudName, uploadPreset }.
5. For production, set CLOUDINARY_CLOUD_NAME and CLOUDINARY_UPLOAD_PRESET in Vercel project settings (same place as the FIREBASE_* vars above).

Both values are safe to embed in client code — an unsigned preset never exposes your Cloudinary API secret.

Keycloak Production Setup

For production, you need a Keycloak server accessible via HTTPS.

Cloud-IAM (Recommended)

Managed Keycloak-as-a-Service — no Docker, no server management, always online:

1. Sign up at cloud-iam.com
2. Create a Keycloak instance (free tier: 1 realm, 100 users) For ex: https://console.cloud-iam.com/deployments/f4f50617-4d9e-4aab-91dc-8be86b7d5b4a/summary
3. Your instance URL: https://<your-instance>.cloud-iam.com/auth.
4. Create realm and client (Public, OpenID Connect)
5. Set KEYCLOAK_URL in Vercel to your Cloud-IAM URL (with /auth)

Self-Hosted Alternatives

Option	Notes
Railway.app	Free trial credit, Docker support
Fly.io	Free tier VM with Docker
Render.com	Free tier (512MB RAM, cold starts)
Any VPS	Docker + quay.io/keycloak/keycloak:26.0
Phase Two	Managed Keycloak with extensions (free tier)

Production Client Config

• Client type: Public (OpenID Connect)
• Valid redirect URIs: https://your-domain.vercel.app/*
• Web origins: https://your-domain.vercel.app
• PKCE: S256