A modern, interactive React TypeScript application for creating and managing location pins with a clean, minimalist interface featuring bidirectional hover interactions between sidebar and map.

• Interactive Map: Click anywhere on the map to drop numbered pins
• Pin Management: View, drag, and delete pins with simplified interface
• Automatic Numbering: Pins are automatically numbered (Pin #1, Pin #2, etc.)
• Persistent Storage: Pins are saved to localStorage and persist across browser sessions

• Draggable Pins: Move pins by dragging them to new locations
• Bidirectional Tooltips: Hover over pins in sidebar to highlight corresponding map pins
• Clean UI: Simplified interface showing only pin numbers and coordinates
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Custom Pin Icons: Professional black pins with white center dots

• Framework: React 18+ with TypeScript
• Language: TypeScript for type safety
• Build Tool: Vite 7.1.6 for fast development and building
• Styling: TailwindCSS 4.1.13 with inline styles for components
• Mapping: Leaflet 1.9.4 with react-leaflet 5.0.0 integration
• State Management: Zustand 5.0.8 for efficient state handling
• Icons: Custom SVG pin icons and Lucide React 0.544.0
• Storage: Browser localStorage for data persistence

• Node.js (version 18 or higher)
• npm package manager

1. Clone the repository

   git clone https://github.com/mohini3493/map-pin-board.git
   cd map-pin-board

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:8080 to view the application

npm run build

1. Click anywhere on the map to drop a new pin
2. Pins are automatically numbered sequentially (Pin #1, Pin #2, etc.)
3. Coordinates are immediately visible in both sidebar and map tooltips

• View Details: Click on any pin to see its popup with coordinates and delete option
• Move Pins: Drag pins to new locations on the map
• Delete Pins: Use the delete button in pin popups or click individual delete buttons
• Clear All: Remove all pins at once using the "Clear All" button
• Hover Interaction: Hover over pins in the sidebar to highlight corresponding map pins

• Bidirectional Tooltips: Sidebar hover triggers map pin tooltips
• Pin Numbering: Consistent numbering between sidebar and map
• Real-time Coordinates: Live coordinate display with 4-decimal precision

pinmap/
├── public/
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── MapComponent.tsx      # Interactive map with pin rendering and tooltips
│   │   ├── MapComponent_backup.tsx # Backup of previous version
│   │   └── PinList.tsx          # Sidebar pin list with hover interactions
│   ├── hooks/
│   │   └── usePins.ts           # Custom hook for pin state management
│   ├── store/
│   │   └── pinStore.ts          # Zustand store for pins with localStorage
│   ├── types/
│   │   └── index.ts             # TypeScript type definitions
│   ├── utils/
│   │   └── geocoding.ts         # Utility functions (currently unused)
│   ├── assets/
│   │   └── react.svg            # React logo
│   ├── App.tsx                  # Main application with hover state management
│   ├── App_old.tsx              # Previous version backup
│   ├── index.css               # Global styles and font imports
│   ├── main.tsx                # Application entry point
│   └── vite-env.d.ts           # Vite type definitions
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── vite.config.ts
├── eslint.config.js
├── postcss.config.js
└── README.md

• npm run dev - Start development server on port 8080
• npm run dev:clean - Clean port 8080 and start development server
• npm run build - Build for production (TypeScript + Vite)
• npm run lint - Run ESLint for code quality
• npm run preview - Preview production build

The application uses a modern approach with:

• TailwindCSS: Utility-first CSS framework
• Inline Styles: Component-specific styling for precise control
• Google Fonts: Inter font family for clean typography
• Custom Icons: Black SVG pin markers with white center dots
• Responsive Design: Mobile-first approach with breakpoint optimization
• Hover Effects: Smooth transitions and interactive feedback

• Default Location: Melbourne, Australia (-37.8136, 144.9631)
• Zoom Level: Starts at level 13 for optimal city view
• Tile Layer: OpenStreetMap standard tiles with attribution
• Pin Icons: Custom black SVG pins (25x41px) with shadows

• Local Storage Key: map-pin-board-pins
• Data Format: JSON array of pin objects with id, coordinates, and timestamp
• Persistence: Automatic save on all pin modifications

• Bidirectional: Sidebar hover triggers map tooltips
• Key-based Re-rendering: Ensures tooltips update correctly
• Coordinate Precision: 4-decimal places for accuracy

• Hover over pins in the sidebar to instantly highlight corresponding map pins
• Seamless connection between list items and map markers
• Real-time tooltip activation for enhanced user experience

• Clean interface showing only essential information: pin numbers and coordinates
• No clutter from addresses, timestamps, or copy functionality
• Focus on core location tracking and management

• Custom black pin icons with white center dots
• Consistent numbering system across all interfaces
• Smooth hover effects and visual feedback

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is open source and available under the MIT License.

• OpenStreetMap for providing free map tiles
• Leaflet for the excellent mapping library
• React Leaflet for seamless React integration
• TailwindCSS for utility-first styling
• Zustand for simple state management

Built with ❤️ using React, TypeScript, and modern web technologies