KL Running Club Landing Page

A modern React landing page for the KL Running Club featuring events, Strava integration, and merchandise shop.

Technologies

• React 18 with TypeScript
• Vite for build tooling
• Tailwind CSS v4 for styling
• Radix UI for accessible components
• Supabase for backend services
• pnpm for package management

Setup Instructions

Prerequisites

• Node.js 18+
• pnpm (recommended package manager)

Installation

1. Clone and install dependencies:

   git clone <repository-url>
   cd klrun-no
   pnpm install

2. Environment Configuration:

   # Copy the environment template
   cp env.example .env.local
   
   # Edit .env.local with your actual values
   # The Supabase credentials are already configured for the demo

3. Development:

   pnpm dev

4. Type Checking:

   pnpm check        # Check TypeScript types
   pnpm check:fix    # Check with strict mode

5. Build:

   pnpm build

Project Structure

src/
├── components/          # React components
│   ├── ui/             # Reusable UI components (Radix UI)
│   ├── figma/          # Figma-generated components
│   ├── About.tsx       # About section
│   ├── Events.tsx      # Events and activities
│   ├── StravaIntegration.tsx  # Strava integration (UI only)
│   ├── Shop.tsx        # Merchandise shop
│   └── ...
├── utils/
│   └── supabase/       # Supabase configuration
├── supabase/
│   └── functions/       # Serverless functions
└── styles/             # Global styles

Backend Integration

Supabase Setup

The project uses Supabase for backend services. The configuration is already set up with:

• Project ID: lrokijdtbaiswckxhykv
• Database: Key-value store pattern
• Functions: Hono-based serverless functions

Strava Integration (Future)

The Strava integration is currently UI-only. To implement real integration:

1. Register your app at Strava API
2. Add your credentials to .env.local:

   VITE_STRAVA_CLIENT_ID=your_client_id
   VITE_STRAVA_CLIENT_SECRET=your_client_secret
   VITE_STRAVA_REDIRECT_URI=http://localhost:3000/auth/strava/callback
   

3. Implement OAuth flow and API endpoints

Development Guidelines

• Use pnpm for package management
• Follow strict TypeScript configuration
• Use Tailwind CSS for styling
• Follow React best practices (hooks, functional components)
• Use Radix UI components for accessibility

Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm check - TypeScript type checking
• pnpm check:fix - Strict TypeScript checking