https://github.com/pnvdev/weather-location-search
A modern web application built with Next.js that allows users to search and visualize locations on an interactive map. The application features automatic location detection, predictive search, and a clean, responsive interface.
https://github.com/pnvdev/weather-location-search
Last synced: 12 months ago
JSON representation
A modern web application built with Next.js that allows users to search and visualize locations on an interactive map. The application features automatic location detection, predictive search, and a clean, responsive interface.
- Host: GitHub
- URL: https://github.com/pnvdev/weather-location-search
- Owner: pnvdev
- Created: 2025-04-10T18:22:40.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-04-11T04:51:25.000Z (12 months ago)
- Last Synced: 2025-04-11T05:24:03.581Z (12 months ago)
- Language: TypeScript
- Homepage: https://weather-location-search-beta.vercel.app
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Location Search
A modern web application built with Next.js that allows users to search and visualize locations on an interactive map. The application features automatic location detection, predictive search, and a clean, responsive interface.
## Features
- 🔍 **Predictive Search**: Real-time location suggestions as you type
- 🗺️ **Interactive Map**: Visual representation of searched locations
- 📍 **Automatic Location Detection**: Automatically centers the map on the user's location
- ⚡ **Debounced Search**: Optimized search performance with debouncing
- 🎨 **Modern UI**: Built with Shadcn UI components for a polished look
- 🌓 **Dark Mode Support**: Automatically adapts to system preferences
## Tech Stack
- **Framework**: Next.js 14 with App Router
- **UI Components**: Shadcn UI
- **Styling**: Tailwind CSS
- **Maps**: Pigeon Maps
- **Geocoding**: OpenStreetMap Nominatim
- **Type Safety**: TypeScript
## Getting Started
### Prerequisites
- Node.js 18.17 or later
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/pnvdev/location-search.git
cd location-search
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## How It Works
1. **Location Detection**:
- The application automatically detects the user's location using server-side IP geolocation
- Falls back to a default location if detection fails
2. **Search Functionality**:
- Type in the search box to get real-time location suggestions
- Click on a suggestion or press Enter to center the map on the selected location
- The map updates instantly with a marker at the selected location
3. **Map Interaction**:
- Interactive map with zoom and pan controls
- Marker indicates the current selected location
- Smooth transitions when moving between locations
## Development
### Project Structure
```
src/
├── app/ # Next.js app router
│ ├── actions.ts # Server actions
│ └── page.tsx # Main page component
├── components/ # React components
│ ├── MapSearch.tsx # Main map and search component
│ └── ui/ # Shadcn UI components
└── lib/ # Utility functions
```
### Environment Variables
No environment variables are required for development. The application uses free services for all functionality.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.