ocean-cleanup/.kiro/steering/tech.md

Technology Stack

Frontend

• React 19 with TypeScript for type-safe development
• Vite for build tooling and dev server
• React Router for client-side routing
• Tailwind CSS v4 for styling (utility-first)
• Clerk (@clerk/clerk-react) for authentication
• React Query (@tanstack/react-query) for server state management

Mapping & Visualization

• Leaflet for interactive maps (free, open-source)
• OpenStreetMap tiles as base layer
• Leaflet.heat for heat map overlays
• Leaflet.markercluster for marker clustering
• Recharts for charts and data visualization

Utilities

• date-fns for date manipulation

Backend (Planned)

• Node.js with Express.js REST API
• MySQL 8.0+ database with spatial data support
• Prisma ORM for database access
• Clerk for authentication (backend SDK)
• Multer for file uploads
• exifr for EXIF metadata extraction
• Redis for caching external API responses

Path Aliases

Use TypeScript path aliases for cleaner imports:

import { Report } from '@/types';
import { apiClient } from '@/services/api';
import { useGeolocation } from '@/hooks';

Available aliases:

• @/* → src/*
• @/components/* → src/components/*
• @/pages/* → src/pages/*
• @/services/* → src/services/*
• @/hooks/* → src/hooks/*
• @/utils/* → src/utils/*
• @/types/* → src/types/*

Environment Variables

Required in .env.local:

# Clerk Authentication
VITE_CLERK_PUBLISHABLE_KEY=your_publishable_key

# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api

Common Commands

# Development
npm run dev          # Start dev server (http://localhost:5173)

# Build
npm run build        # Production build to dist/

# Preview
npm run preview      # Preview production build locally

# Linting
npm run lint         # Run ESLint

TypeScript Configuration

• Strict mode enabled
• noUnusedLocals and noUnusedParameters enforced
• noUncheckedIndexedAccess for safer array/object access
• JSX: react-jsx (React 17+ transform)
• Module resolution: bundler mode

Code Quality

• ESLint with React hooks and React refresh plugins
• Strict TypeScript checking
• No unused variables/parameters allowed