Ishita230702 main

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/.dockerignore

@@ -0,0 +1,62 @@
+node_modules
+dist
+.git
+.gitignore
+README.md
+.env
+.env.local
+.env.development
+.env.test
+.env.production
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.DS_Store
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.cursor
+coverage
+.nyc_output
+.eslintcache
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+
+.DS_Store
+node_modules
+**/node_modules/**
+build
+data
+.env
+load-ids.txt
+
+server
+tmp
+types
+.git
+.gitignore
+dist
+service
+tests
+fixtures-pages
+fixtures-apps
+
+# Netlify
+.netlify
+packages/ml-air/lib
+packages/ml-air/bin
+packages/ml-air/project
+packages/ml-air/share
+packages/ml-air/random_forest_classification/
+packages/ml-air/__pycache__/
+packages/ml-air/app/__pycache__/
+packages/vcp-common/native-bridge/build
+packages/vcp-common/_tests_/dataset-ranking.csv
+node_modules/
+Dockerfile
+.gitignore

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/.env

@@ -0,0 +1,6 @@
+# .env is better suited for public variables, ie, variables that should not commited
+# For secret variables is better to use DevServerControl tool with set_env_variable: ["KEY", "SECRET"]
+
+# https://www.builder.io/c/docs/using-your-api-key
+VITE_PUBLIC_BUILDER_KEY=__BUILDER_PUBLIC_KEY__
+PING_MESSAGE="ping pong"

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.config/
+!.env

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true 

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all"
+}

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/AGENTS.md

@@ -0,0 +1,164 @@
+# Fusion Starter
+
+A production-ready full-stack React application template with integrated Express server, featuring React Router 6 SPA mode, TypeScript, Vitest, Zod and modern tooling.
+
+While the starter comes with a express server, only create endpoint when strictly neccesary, for example to encapsulate logic that must leave in the server, such as private keys handling, or certain DB operations, db...
+
+## Tech Stack
+
+- **PNPM**: Prefer pnpm
+- **Frontend**: React 18 + React Router 6 (spa) + TypeScript + Vite + TailwindCSS 3
+- **Backend**: Express server integrated with Vite dev server
+- **Testing**: Vitest
+- **UI**: Radix UI + TailwindCSS 3 + Lucide React icons
+
+## Project Structure
+
+```
+client/                   # React SPA frontend
+├── pages/                # Route components (Index.tsx = home)
+├── components/ui/        # Pre-built UI component library
+├── App.tsx                # App entry point and with SPA routing setup
+└── global.css            # TailwindCSS 3 theming and global styles
+
+server/                   # Express API backend
+├── index.ts              # Main server setup (express config + routes)
+└── routes/               # API handlers
+
+shared/                   # Types used by both client & server
+└── api.ts                # Example of how to share api interfaces
+```
+
+## Key Features
+
+## SPA Routing System
+
+The routing system is powered by React Router 6:
+
+- `client/pages/Index.tsx` represents the home page.
+- Routes are defined in `client/App.tsx` using the `react-router-dom` import
+- Route files are located in the `client/pages/` directory
+
+For example, routes can be defined with:
+
+```typescript
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+<Routes>
+  <Route path="/" element={<Index />} />
+  {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+  <Route path="*" element={<NotFound />} />
+</Routes>;
+```
+
+### Styling System
+
+- **Primary**: TailwindCSS 3 utility classes
+- **Theme and design tokens**: Configure in `client/global.css` 
+- **UI components**: Pre-built library in `client/components/ui/`
+- **Utility**: `cn()` function combines `clsx` + `tailwind-merge` for conditional classes
+
+```typescript
+// cn utility usage
+className={cn(
+  "base-classes",
+  { "conditional-class": condition },
+  props.className  // User overrides
+)}
+```
+
+### Express Server Integration
+
+- **Development**: Single port (8080) for both frontend/backend
+- **Hot reload**: Both client and server code
+- **API endpoints**: Prefixed with `/api/`
+
+#### Example API Routes
+- `GET /api/ping` - Simple ping api
+- `GET /api/demo` - Demo endpoint  
+
+### Shared Types
+Import consistent types in both client and server:
+```typescript
+import { DemoResponse } from '@shared/api';
+```
+
+Path aliases:
+- `@shared/*` - Shared folder
+- `@/*` - Client folder
+
+## Development Commands
+
+```bash
+pnpm dev        # Start dev server (client + server)
+pnpm build      # Production build
+pnpm start      # Start production server
+pnpm typecheck  # TypeScript validation
+pnpm test          # Run Vitest tests
+```
+
+## Adding Features
+
+### Add new colors to the theme
+
+Open `client/global.css` and `tailwind.config.ts` and add new tailwind colors.
+
+### New API Route
+1. **Optional**: Create a shared interface in `shared/api.ts`:
+```typescript
+export interface MyRouteResponse {
+  message: string;
+  // Add other response properties here
+}
+```
+
+2. Create a new route handler in `server/routes/my-route.ts`:
+```typescript
+import { RequestHandler } from "express";
+import { MyRouteResponse } from "@shared/api"; // Optional: for type safety
+
+export const handleMyRoute: RequestHandler = (req, res) => {
+  const response: MyRouteResponse = {
+    message: 'Hello from my endpoint!'
+  };
+  res.json(response);
+};
+```
+
+3. Register the route in `server/index.ts`:
+```typescript
+import { handleMyRoute } from "./routes/my-route";
+
+// Add to the createServer function:
+app.get("/api/my-endpoint", handleMyRoute);
+```
+
+4. Use in React components with type safety:
+```typescript
+import { MyRouteResponse } from '@shared/api'; // Optional: for type safety
+
+const response = await fetch('/api/my-endpoint');
+const data: MyRouteResponse = await response.json();
+```
+
+### New Page Route
+1. Create component in `client/pages/MyPage.tsx`
+2. Add route in `client/App.tsx`:
+```typescript
+<Route path="/my-page" element={<MyPage />} />
+```
+
+## Production Deployment
+
+- **Standard**: `pnpm build`
+- **Binary**: Self-contained executables (Linux, macOS, Windows)
+- **Cloud Deployment**: Use either Netlify or Vercel via their MCP integrations for easy deployment. Both providers work well with this starter template.
+
+## Architecture Notes
+
+- Single-port development with Vite + Express integration
+- TypeScript throughout (client, server, shared)
+- Full hot reload for rapid development
+- Production-ready with multiple deployment options
+- Comprehensive UI component library included
+- Type-safe API communication via shared interfaces