Fish Net Application

# Fish Net Application

## Overview
Fish Net is a Progressive Web App (PWA) for fishermen to identify fish species using AI, track catches, view locations on maps, and maintain a history of their catches. Built with Vite, React, TypeScript, and shadcn/ui.

## Project Architecture

### Technology Stack
- **Frontend Framework**: React 18 with TypeScript
- **Build Tool**: Vite 5
- **Styling**: Tailwind CSS with shadcn/ui components
- **Routing**: React Router DOM
- **AI/ML**: TensorFlow.js and Hugging Face Transformers
- **Maps**: Leaflet and Mapbox GL
- **State Management**: TanStack Query (React Query)
- **Local Storage**: IndexedDB via idb library
- **PWA**: Service Worker with offline support

### Project Structure
```
src/
├── components/        # Reusable UI components
│   ├── analyze/      # Fish analysis components
│   ├── auth/         # Authentication components
│   ├── history/      # Catch history components
│   ├── layout/       # Layout components (navigation, etc.)
│   ├── map/          # Map-related components
│   ├── offline/      # Offline indicator
│   ├── reference/    # Species library
│   ├── reports/      # PDF generation
│   ├── social/       # Social feed components
│   └── ui/           # shadcn/ui base components
├── hooks/            # Custom React hooks
├── lib/              # Utility functions
├── pages/            # Page components (routes)
├── services/         # Business logic and data services
│   ├── auth.ts       # Authentication service
│   ├── database.ts   # IndexedDB database service
│   ├── pwa.ts        # PWA/Service Worker service
│   ├── sampleData.ts # Sample data seeding
│   ├── social.ts     # Social features
│   ├── sync.ts       # Sync service
│   └── tensorflow.ts # AI/ML service
├── App.tsx           # Main app component
└── main.tsx          # Entry point
```

## Configuration

### Vite Configuration
- **Host**: 0.0.0.0 (required for Replit)
- **Port**: 5000 (Replit standard)
- **Allowed Hosts**: ["*"] (required for Replit's proxy environment)
- **HMR**: Configured for Replit's proxy environment with WSS protocol

### Workflow
- **Name**: Start application
- **Command**: `npm run dev`
- **Port**: 5000 (webview output)

### Deployment Configuration
- **Target**: Autoscale (stateless web app)
- **Build**: `npm run build`
- **Run**: `npm run preview`

## Key Features
1. **Fish Identification**: AI-powered fish species identification using camera
2. **Catch History**: Track and manage fishing catches with images
3. **Map Integration**: View catch locations on interactive maps
4. **Offline Support**: PWA with service worker for offline functionality
5. **Species Library**: Reference library for fish species
6. **Social Feed**: Share catches with the community
7. **PDF Reports**: Generate catch reports

## Development Notes

### Important Files
- `vite.config.ts`: Vite configuration with Replit-specific settings
- `src/services/database.ts`: IndexedDB implementation for local data storage
- `src/services/tensorflow.ts`: TensorFlow.js integration for AI features

### Known Issues Fixed
- Fixed import error: Changed `HistoryList` from named export to default export import in `HistoryPage.tsx`

### Environment Setup
- No backend server required (frontend-only app)
- Uses IndexedDB for local data persistence
- Service Worker handles offline capabilities
- Sample data is seeded on first load

## Recent Changes

### UI Enhancement & Internationalization (2025-09-29)
1. **Navigation Branding**: Updated all pages (Feed, My Catches, Profile) to display "Fish Net" branding consistently
2. **Loading Screens**: Added loading states (1s for login/signup, 1.5s for image upload/analyze) for better UX
3. **My Catches UI**: Fixed grid items to show dark background (active:bg-gray-900) when clicked
4. **Personal Chat**: Enhanced chat service with 3 personal conversations (2 with messages, 1 empty) with localStorage caching
5. **Real Fish Images**: Downloaded 30+ real fish photos and relocated from attached_assets to public/fish_images directory for proper Vite serving
6. **Settings Dialog**: Implemented comprehensive settings with name change, location permissions, email display, and language selection with confirmation
7. **Internationalization (i18n)**: Configured full i18n support with 12 languages:
   - English (en) - base language
   - Tamil (ta), Telugu (te), Hindi (hi), Kannada (kn), Malayalam (ml), Gujarati (gu), Marwadi (mwr), Bengali (bn), Punjabi (pa), Marathi (mr), Odia (or)
   - Language selection persisted to localStorage
   - Language change confirmation dialog
8. **Image Management**: Updated sample data to use /fish_images/ paths from public directory

### GitHub Import Setup (2025-09-29)
1. Installed npm dependencies (553 packages)
2. Added `allowedHosts: ["*"]` to vite.config.ts for Replit proxy compatibility
3. Verified workflow is running successfully on port 5000
4. Confirmed deployment configuration (autoscale target)
5. Tested application - all features working (IndexedDB, Service Worker, UI)

### Previous Changes (2025-09-29)
1. Configured Vite for Replit environment (port 5000, 0.0.0.0 host, WSS HMR)
2. Set up workflow for development server
3. Fixed import error in HistoryPage.tsx
4. Configured deployment settings for autoscale
5. Verified application runs successfully with all features working
6. Reorganized Feed page - moved Community and Chat into Messages dialog button
7. Created FishermanIndia community chat with fish-related messages and photos
8. Added 3 chat conversations (2 with messages, 1 empty) with localStorage caching
9. Fixed My Catches page image loading to show images immediately
10. Fixed Map page - replaced blue screen with OpenStreetMap tiles
11. Added custom fish image markers with hover effects on map
12. Implemented random fish images for sample data, original images for user catches