Initial Commit
This commit is contained in:
26
.kiro/steering/product.md
Normal file
26
.kiro/steering/product.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# Product Overview
|
||||
|
||||
The Beach Litter Mapping Platform is a crowdsourced environmental monitoring web application for Irish coastal areas. It enables users to report beach litter with photos and GPS coordinates, visualize pollution patterns on interactive maps, organize cleanup events, and analyze environmental data.
|
||||
|
||||
## Core Features
|
||||
|
||||
- **Litter Reporting**: Submit reports with photos, GPS location, litter type categorization, and quantity estimates
|
||||
- **Interactive Mapping**: View reports on Leaflet maps with clustering, heat maps, and filtering by date/type/quantity
|
||||
- **Hotspot Analysis**: Identify high-concentration litter areas (5+ reports within 500m radius)
|
||||
- **Event Management**: Create and coordinate community cleanup events with participant registration
|
||||
- **Analytics Dashboard**: Visualize trends, statistics, and export data for research
|
||||
- **User Profiles**: Track contributions, impact scores, and personal report history
|
||||
- **Verification System**: Community-driven report verification and quality control
|
||||
- **Environmental Context**: Integrate weather, tide, and water quality data from public APIs
|
||||
|
||||
## Target Users
|
||||
|
||||
- Beach visitors reporting litter
|
||||
- Community organizers coordinating cleanups
|
||||
- Environmental researchers analyzing pollution patterns
|
||||
- Volunteers responding to local issues
|
||||
- Policy advocates using data for campaigns
|
||||
|
||||
## Geographic Scope
|
||||
|
||||
Primary focus on Irish coastal areas with coordinate validation for Irish boundaries.
|
||||
119
.kiro/steering/structure.md
Normal file
119
.kiro/steering/structure.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# Project Structure
|
||||
|
||||
## Directory Organization
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # React components organized by feature
|
||||
│ ├── auth/ # Authentication components (SignIn, SignUp, ProtectedRoute)
|
||||
│ ├── layout/ # Layout components (Header, Footer, Navigation)
|
||||
│ └── map/ # Map components (MapView, MapFilters)
|
||||
├── pages/ # Page-level components for routing
|
||||
├── services/ # API clients and external service integrations
|
||||
├── hooks/ # Custom React hooks
|
||||
├── utils/ # Utility functions and helpers
|
||||
├── types/ # TypeScript type definitions
|
||||
├── App.tsx # Main application component with routing
|
||||
├── main.tsx # Application entry point
|
||||
└── index.css # Global styles with Tailwind directives
|
||||
```
|
||||
|
||||
## Component Organization
|
||||
|
||||
Components are organized by **feature/domain** rather than by type:
|
||||
|
||||
- `components/auth/` - All authentication-related components
|
||||
- `components/map/` - All mapping-related components
|
||||
- `components/layout/` - Shared layout components
|
||||
- Each feature folder includes an `index.ts` for clean exports
|
||||
|
||||
## File Naming Conventions
|
||||
|
||||
- **Components**: PascalCase (e.g., `MapView.tsx`, `ReportForm.tsx`)
|
||||
- **Hooks**: camelCase with `use` prefix (e.g., `useAuth.ts`, `useGeolocation.ts`)
|
||||
- **Services**: camelCase (e.g., `api.ts`, `reportService.ts`)
|
||||
- **Utils**: camelCase (e.g., `validation.ts`, `coordinates.ts`)
|
||||
- **Types**: PascalCase for interfaces/types in `types/index.ts`
|
||||
|
||||
## Import/Export Patterns
|
||||
|
||||
Each feature directory includes an `index.ts` barrel file for clean exports:
|
||||
|
||||
```typescript
|
||||
// components/map/index.ts
|
||||
export { MapView } from './MapView';
|
||||
export { MapFilters } from './MapFilters';
|
||||
|
||||
// Usage elsewhere
|
||||
import { MapView, MapFilters } from '@/components/map';
|
||||
```
|
||||
|
||||
## Page Structure
|
||||
|
||||
Pages in `src/pages/` correspond to routes:
|
||||
|
||||
- `HomePage.tsx` - Landing page
|
||||
- `MapPage.tsx` - Interactive map view
|
||||
- `ReportFormPage.tsx` - Report submission form
|
||||
- `EventsPage.tsx` - Event listing and management
|
||||
- `AnalyticsPage.tsx` - Analytics dashboard
|
||||
|
||||
All pages are exported through `pages/index.ts` for centralized route configuration.
|
||||
|
||||
## Type Definitions
|
||||
|
||||
Centralized in `src/types/index.ts`:
|
||||
|
||||
- Domain models (Report, Event, User)
|
||||
- DTOs (Data Transfer Objects)
|
||||
- Enums (LitterType, QuantityLevel, VerificationStatus)
|
||||
- API response types
|
||||
|
||||
## Service Layer
|
||||
|
||||
Services in `src/services/` handle external communication:
|
||||
|
||||
- `api.ts` - Base API client with HTTP methods
|
||||
- `reportService.ts` - Report-related API calls
|
||||
- `eventService.ts` - Event-related API calls
|
||||
- `analyticsService.ts` - Analytics API calls
|
||||
- `exifService.ts` - EXIF metadata extraction
|
||||
|
||||
## Hooks
|
||||
|
||||
Custom hooks in `src/hooks/`:
|
||||
|
||||
- `useAuth.ts` - Authentication state and methods (Clerk wrapper)
|
||||
- `useGeolocation.ts` - Device geolocation access
|
||||
- Additional hooks as needed for shared logic
|
||||
|
||||
## Utilities
|
||||
|
||||
Helper functions in `src/utils/`:
|
||||
|
||||
- Coordinate validation
|
||||
- Distance calculations
|
||||
- File validation
|
||||
- Date formatting
|
||||
- Other pure utility functions
|
||||
|
||||
## Styling Approach
|
||||
|
||||
- **Tailwind CSS** for component styling
|
||||
- Utility classes directly in JSX
|
||||
- Global styles in `index.css` (minimal)
|
||||
- No CSS modules or styled-components
|
||||
|
||||
## Authentication Pattern
|
||||
|
||||
- Clerk handles all authentication
|
||||
- Use `<SignedIn>` and `<SignedOut>` components for conditional rendering
|
||||
- Use `<ProtectedRoute>` wrapper for authenticated pages
|
||||
- Access user with `useUser()` hook from Clerk
|
||||
|
||||
## State Management
|
||||
|
||||
- **Local state**: React useState for component-specific state
|
||||
- **Server state**: React Query for API data fetching/caching
|
||||
- **Auth state**: Clerk provider
|
||||
- No Redux or other global state libraries
|
||||
93
.kiro/steering/tech.md
Normal file
93
.kiro/steering/tech.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# 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:
|
||||
|
||||
```typescript
|
||||
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`:
|
||||
|
||||
```env
|
||||
# Clerk Authentication
|
||||
VITE_CLERK_PUBLISHABLE_KEY=your_publishable_key
|
||||
|
||||
# API Configuration
|
||||
VITE_API_BASE_URL=http://localhost:3000/api
|
||||
```
|
||||
|
||||
## Common Commands
|
||||
|
||||
```bash
|
||||
# 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
|
||||
Reference in New Issue
Block a user