Skip to content

🚀 GKIT-VTG-App Startup & Testing Guide

Last Updated: January 25, 2026
Project: Veien til Golf (VTG) - Golf Training Application
Repository: https://github.com/Golfklubb-IT/GKIT-VTG-app
Firebase Project: gkit-vtg-app

📊 Current System Status

Git Repository Status

Branch: main
Last Commit: b64e718 - feat: Refactor PDF chapter images integration and training card service
Remote: origin (GitHub/Golfklubb-IT/GKIT-VTG-app)
Status: ✅ All changes committed and pushed

Firebase Status

Project ID: gkit-vtg-app
Authenticated As: owe-admin@golfklubb-it.com
CLI Version: 15.2.1 (Update available: 15.4.0)
Hosting: ✅ Connected
Database: Firestore (Modern - No deprecated secrets)

Application Versions

Angular: 21.1.0
Firebase SDK: 10.7.0
Node.js: Required (see setup)
npm: Required (see setup)

⚙️ Environment Setup

Required Environment Variables

Create .env.local in project root:

# Firebase Configuration (from Firebase Console)
VITE_FIREBASE_API_KEY=AIzaSyD8_____________
VITE_FIREBASE_AUTH_DOMAIN=gkit-vtg-app.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=gkit-vtg-app
VITE_FIREBASE_STORAGE_BUCKET=gkit-vtg-app.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=886644287929
VITE_FIREBASE_APP_ID=1:886644287929:web:7a5c8b9e0f2a3c4d5e

# Backend Configuration (if running backend)
COSMOS_ENDPOINT=https://your-cosmos-db.documents.azure.com:443/
COSMOS_KEY=your-cosmos-db-key
COSMOS_DATABASE=vtg-database
JWT_SECRET=your-jwt-secret-key-min-32-chars
JWT_REFRESH_SECRET=your-jwt-refresh-secret-min-32-chars

# Azure Storage (if using image uploads)
AZURE_STORAGE_ACCOUNT=yourstorageaccount
AZURE_STORAGE_KEY=your-storage-key

Backend Environment (.env)

PORT=3000
NODE_ENV=development
COSMOS_ENDPOINT=https://your-cosmos-db.documents.azure.com:443/
COSMOS_KEY=your-cosmos-db-key
COSMOS_DATABASE=vtg-database
COSMOS_CONTAINER_USERS=users
COSMOS_CONTAINER_PROGRESS=progress
COSMOS_CONTAINER_COURSES=courses
COSMOS_CONTAINER_GOBBS=gobbs
JWT_SECRET=your-secret-key
JWT_REFRESH_SECRET=your-refresh-secret
JWT_EXPIRATION=15m
JWT_REFRESH_EXPIRATION=7d
CORS_ORIGIN=http://localhost:4200
LOG_LEVEL=info

🔧 Quick Start Commands

Initial Setup

# 1. Install dependencies
npm install

# 2. Install backend dependencies (if needed)
cd backend && npm install && cd ..

# 3. Verify Firebase CLI
firebase --version

# 4. Login to Firebase
firebase login --reauth

Development

# Start development server
npm run dev
# Opens: http://localhost:4200

# Run tests
npm run test

# Run E2E tests
npm run e2e

Building

# Build for production
npm run build

# Preview production build locally
npm run preview

Deployment

# Deploy to Firebase Hosting
firebase deploy

# Deploy with message
firebase deploy -m "feat: Add new training cards"

# Deploy only hosting
firebase deploy --only hosting

📋 Testing Checklist

Pre-Testing Checkpoint

  • [ ] All code committed to Git (git status shows clean)
  • [ ] Latest changes pushed to GitHub
  • [ ] Firebase logged in and verified
  • [ ] Environment variables configured
  • [ ] Dependencies installed (npm install)
  • [ ] No TypeScript errors (ng build succeeds)

Feature Testing Cycle

  1. Create Feature Branch (Optional) 

    git checkout -b feature/testing-branch

  2. Make Changes

  3. Modify code as needed

  4. Save all files

  5. Local Testing 

    npm run dev
# Test in browser at http://localhost:4200

  6. Run Tests 

    npm run test
npm run e2e

  7. Commit Changes 

    git add .
git commit -m "test: [Your test description]"

  8. Create Testing Checkpoint (Save Current State) 

    # See CHECKPOINT MANAGEMENT section below

Test Scenarios

  • [ ] Login/Authentication: Test email/password login
  • [ ] Navigation: Test all chapter links and routing
  • [ ] Content Display: Verify all training cards display correctly
  • [ ] Responsive Design: Test on mobile, tablet, desktop
  • [ ] Images: Verify PDF chapter images load
  • [ ] Firebase Integration: Check Firestore data persistence
  • [ ] Performance: Monitor build size and load time

💾 Checkpoint Management

Save Current State

# Create a checkpoint (saves commit hash and timestamp)
git log -1 --format="%H %ai" > checkpoints/checkpoint-$(date +%Y%m%d-%H%M%S).txt

# Or create a Git tag
git tag -a "checkpoint-testing-phase-1" -m "Checkpoint: Before major refactoring"
git push origin --tags

List All Checkpoints

# View saved tags
git tag -l

# View recent commits
git log --oneline -10

Return to Previous Checkpoint

# Go back to specific commit
git checkout 8cc9572

# Or go back to tagged checkpoint
git checkout checkpoint-testing-phase-1

# Return to main branch
git checkout main

Create Release Version

# Tag for release
git tag -a "v1.0.0" -m "Release version 1.0.0"
git push origin --tags

# Deploy from tag
firebase deploy -m "Release: v1.0.0"

📁 Project Structure

GKIT-VTG-app/
├── src/                          # Angular frontend
│   ├── app.component.ts          # Main app
│   ├── app.routes.ts             # Routing
│   ├── components/               # Angular components
│   ├── services/                 # Services (API, content, etc.)
│   └── environments/             # Firebase config
├── backend/                      # Node.js backend (optional)
│   ├── src/
│   │   ├── server.ts             # Express server
│   │   ├── config.ts             # Configuration
│   │   ├── routes/               # API routes
│   │   └── services/             # Business logic
│   └── package.json
├── public/                       # Static assets
│   └── chapter-images/           # PDF extracted images
├── docs/                         # GitHub Pages documentation
│   └── _config.yml               # Jekyll config
├── firebase.json                 # Firebase configuration
├── firestore.rules               # Firestore security rules
├── angular.json                  # Angular CLI config
├── package.json                  # Frontend dependencies
└── STARTUP.md                    # This file

🔐 Firestore Security Rules

Current rules: - ✅ Public read access to courses and chapters (no auth required) - ✅ Authenticated users can save their own profile - ✅ Progress tracking limited to own user - ✅ Admin write access with isAdmin() verification

Review rules at: Firebase Console → Firestore → Rules

📊 Firebase Hosting Status

Current Live Deploy: January 20, 2025 (1769287087347)
URL: https://gkit-vtg-app.web.app

Files Deployed

  • ✅ index.html (Main entry point)
  • ✅ main-FTSRJOHH.js (Application bundle)
  • ✅ Chapter images (PDF extracted assets)
  • ✅ Prerendered routes configuration

🚨 Common Issues & Solutions

Issue: Firebase CLI not authenticated

# Solution: Re-authenticate
firebase login --reauth

Issue: Build fails with TypeScript errors

# Solution: Check for errors
ng build

# Fix strict mode if needed
# Update tsconfig.json if needed

Issue: Port 4200 already in use

# Solution: Use different port
ng serve --port 4300

Issue: Large file warning

# The .docx file is 62MB (GitHub recommends max 50MB)
# Solution: Consider using Git LFS for large files
git lfs install
git lfs track "*.docx"

Issue: Changes not reflecting in browser

# Solution: Clear cache and rebuild
npm run build
# Clear browser cache (Ctrl+Shift+Del)

📈 Performance Metrics

Target Build Metrics: - Build time: < 60 seconds - Bundle size: < 500KB (gzipped) - First paint: < 3 seconds - Lighthouse score: > 90

Check metrics: 

# Build with stats
npm run build -- --stats-json

# Analyze bundle size
npm install webpack-bundle-analyzer

🔄 Git Workflow

Normal Workflow

# 1. Check status
git status

# 2. Make changes and test locally
npm run dev

# 3. Stage changes
git add .

# 4. Commit with meaningful message
git commit -m "feat: [Feature description]"

# 5. Push to GitHub
git push origin main

# 6. Deploy to Firebase
firebase deploy

Feature Branch Workflow (for major changes)

# Create feature branch
git checkout -b feature/your-feature-name

# Make changes and commit
git add .
git commit -m "feat: [Feature description]"

# Push feature branch
git push origin feature/your-feature-name

# Create Pull Request on GitHub
# After review and approval:
git checkout main
git pull origin main
git merge feature/your-feature-name
git push origin main

✅ Deployment Checklist

  • [ ] All tests passing (npm run test, npm run e2e)
  • [ ] No console errors or warnings
  • [ ] Git status clean (git status)
  • [ ] Latest code pushed to GitHub (git push)
  • [ ] Firebase CLI authenticated (firebase login --reauth)
  • [ ] Environment variables configured
  • [ ] Build successful (npm run build)
  • [ ] Production build tested locally (npm run preview)
  • [ ] Firestore rules reviewed and correct
  • [ ] No large uncommitted files

Deploy to Firebase

# Run pre-deployment checks
npm run build
npm run test

# Deploy
firebase deploy

# Verify deployment
firebase hosting:channel:list

📞 Support & Resources

  • Firebase Console: https://console.firebase.google.com/u/0/project/gkit-vtg-app
  • GitHub Repository: https://github.com/Golfklubb-IT/GKIT-VTG-app
  • Angular Documentation: https://angular.io/docs
  • Firebase Documentation: https://firebase.google.com/docs
  • Firestore Rules: https://firebase.google.com/docs/firestore/security/start

📝 Recent Changes Log

Date Commit Description
Jan 25, 2026 b64e718 Refactor PDF chapter images integration and training card service
Jan 23, 2026 8cc9572 Replace Unsplash images with extracted PDF chapter images
Jan 22, 2026 c0ff2ed Add comprehensive URL navigation & analysis tests
Jan 20, 2026 defa96c Fix: Persist chapters in signal on navigation
Jan 19, 2026 d836185 Implement PDF color palette and Calibri font

🎯 Next Steps

  1. Complete Testing Phase
  2. Run full test suite
  3. Test on multiple devices

  4. Verify Firebase integration

  5. Deploy to Production

  6. Create release tag
  7. Deploy to Firebase

  8. Monitor live performance

  9. Document Changes

  10. Update CHANGELOG.md
  11. Update API documentation

  12. Update user guides

  13. Archive Checkpoints

  14. Keep Git tags for reference
  15. Document breaking changes
  16. Plan next features

Last Updated: January 25, 2026
Created by: GitHub Copilot
Maintained by: Development Team