https://github.com/amber305/location-flow
A modern React application for seamless location and address management, featuring Google Maps integration, intuitive address saving, and a polished user interface. Built with TypeScript, Tailwind CSS, and Zustand for state management.
https://github.com/amber305/location-flow
address-management css geolocation google-maps location-services maps-api react tailwind tailwindcss typescript vite zustand
Last synced: 8 months ago
JSON representation
A modern React application for seamless location and address management, featuring Google Maps integration, intuitive address saving, and a polished user interface. Built with TypeScript, Tailwind CSS, and Zustand for state management.
- Host: GitHub
- URL: https://github.com/amber305/location-flow
- Owner: amber305
- Created: 2024-12-31T15:27:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-31T15:29:11.000Z (about 1 year ago)
- Last Synced: 2025-02-23T02:44:48.751Z (about 1 year ago)
- Topics: address-management, css, geolocation, google-maps, location-services, maps-api, react, tailwind, tailwindcss, typescript, vite, zustand
- Language: TypeScript
- Homepage: https://location-flow-app.netlify.app/
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Location Flow
A modern, user-friendly location and address management system built with React and Google Maps API. This application allows users to easily manage delivery locations with a smooth, intuitive interface.
## 🌟 Features
- **Location Permission Handling**
- Smart geolocation permission requests
- Fallback to manual address entry
- Clear user feedback and error handling
- **Interactive Map Integration**
- Google Maps integration
- Draggable location pin
- Current location detection
- Address autocomplete
- **Address Management**
- Save addresses with custom labels (Home, Office, Other)
- Add detailed address information
- Favorite frequently used locations
- Edit and delete saved addresses
- **Responsive Design**
- Mobile-first approach
- Smooth animations
- Intuitive user interface
## 🚀 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- Google Maps API key
### Environment Setup
1. Clone the repository
2. Create a `.env` file in the root directory
3. Add your Google Maps API key:
```
VITE_GOOGLE_MAPS_API_KEY=your_api_key_here
```
### Installation
```bash
# Install dependencies
npm install
# Start development server
npm run dev
```
## 🛠️ Built With
- **React** - UI Framework
- **TypeScript** - Type Safety
- **Tailwind CSS** - Styling
- **Google Maps API** - Location Services
- **Zustand** - State Management
- **Vite** - Build Tool
## 📱 Core Components
- `LocationFlow` - Main component orchestrating the location flow
- `LocationPermissionModal` - Handles location permission requests
- `Map` - Interactive Google Maps component
- `AddressForm` - Form for detailed address entry
- `ErrorMessage` - User-friendly error display
## 🔧 Configuration
The application can be configured through:
- `src/config/maps.ts` - Google Maps settings
- `tailwind.config.js` - Styling customization
- Environment variables - API keys and endpoints
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Google Maps Platform
- React Community
- Tailwind CSS Team