Technical Overview

Frontend Architecture (React/TypeScript)

App
├── PlayerStats
│   ├── HandicapInput
│   ├── NineHoleToggle
│   └── ClubDistanceInputs
├── TeeRecommendation
│   ├── TeeDisplay
│   └── RatingInfo
├── CourseSearch
│   ├── SearchInput
│   └── ResultsList
└── CourseDisplay
    ├── ApproachStats
    ├── TeeSelector
    └── HoleDisplay

Database Schema (Supabase)

CREATE TABLE tee_types (
  id UUID PRIMARY KEY,
  name TEXT UNIQUE,
  display_name TEXT,
  sort_order INTEGER,
  yardage_description TEXT,
  min_total_yards INTEGER,
  min_nine_yards INTEGER
);

CREATE TABLE golf_courses (
  id UUID PRIMARY KEY,
  api_course_id INTEGER UNIQUE,
  club_name TEXT,
  course_name TEXT,
  address TEXT,
  city TEXT,
  state TEXT,
  country TEXT,
  latitude NUMERIC,
  longitude NUMERIC
);

CREATE TABLE golf_holes (
  id UUID PRIMARY KEY,
  course_id UUID REFERENCES golf_courses,
  hole_number INTEGER,
  par INTEGER CHECK (par BETWEEN 3 AND 6)
);

CREATE TABLE course_tees (
  id UUID PRIMARY KEY,
  course_id UUID REFERENCES golf_courses,
  tee_type_id UUID REFERENCES tee_types,
  total_yards INTEGER,
  front_nine_yards INTEGER,
  back_nine_yards INTEGER,
  course_rating NUMERIC CHECK (course_rating BETWEEN 55 AND 77),
  slope_rating NUMERIC CHECK (slope_rating BETWEEN 55 AND 155)
);

CREATE TABLE hole_tees (
  id UUID PRIMARY KEY,
  hole_id UUID REFERENCES golf_holes,
  tee_type_id UUID REFERENCES tee_types,
  yards INTEGER
);

Calculation Logic (TypeScript)

const calculateClubDistances = (
  fiveIronDistance: number,
  handicap: number,
  driverDistance: number,
  isNineHole: boolean
) => {
  const effectiveHandicap = isNineHole ? handicap * 2 : handicap;
  const gap = effectiveHandicap <= 10 ? 8 :
              effectiveHandicap <= 15 ? 10 :
              effectiveHandicap <= 20 ? 12 : 15;

  const variation = effectiveHandicap <= 10 ? 2 :
                    effectiveHandicap <= 15 ? 3 :
                    effectiveHandicap <= 20 ? 4 : 5;

  return {
    clubs: {
      '3W': Math.min(fiveIronDistance + (gap * 5), driverDistance - 15),
      '5W': fiveIronDistance + (gap * 4),
      '3i/h': fiveIronDistance + (gap * 2),
      '4i/h': fiveIronDistance + gap,
      '5i/h': fiveIronDistance,
      '6i': fiveIronDistance - gap,
      '7i': fiveIronDistance - (gap * 2),
      '8i': fiveIronDistance - (gap * 3),
      '9i': fiveIronDistance - (gap * 4),
      'PW': fiveIronDistance - (gap * 5),
      'SW': fiveIronDistance - (gap * 6),
      'LW': fiveIronDistance - (gap * 7)
    },
    variation
  };
};

API Integration (TypeScript/Axios)

import axios from 'axios';

const api = axios.create({ baseURL: 'https://api.golfcourseapi.com/v1' });

export const searchCourses = async (query: string) => {
  return api.get('/search', { params: { search_query: query } });
};

export const getCourseById = async (id: number) => {
  return api.get(`/courses/${id}`);
};

Performance Optimizations (SQL)

CREATE INDEX idx_golf_courses_api_course_id ON golf_courses(api_course_id);
CREATE INDEX idx_course_tees_course_id ON course_tees(course_id);
CREATE INDEX idx_golf_holes_course_id ON golf_holes(course_id);
CREATE INDEX idx_hole_tees_hole_id ON hole_tees(hole_id);
CREATE INDEX idx_tee_types_sort_order ON tee_types(sort_order);