Modern Location Tracker

A modern, responsive location tracking application built with Next.js 14, TypeScript, Tailwind CSS, and Firebase.

Features

• 🗺️ Interactive Map: Click to add locations with Mapbox integration
• 📍 Location Management: Add, view, and search locations
• 🎨 Modern UI: Beautiful, responsive design with Tailwind CSS
• 🔍 Search & Filter: Find locations quickly with search functionality
• 📱 Mobile Friendly: Responsive design that works on all devices
• ⚡ Fast Performance: Built with Next.js 14 and modern React patterns

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Database: Firebase Firestore
• Maps: Mapbox GL JS with react-map-gl
• UI Components: Custom components with Radix UI primitives
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Firebase project
• Mapbox account

Installation

1. Clone the repository:

git clone <your-repo-url>
cd modern-location-tracker

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env.local file in the root directory:

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token_here

4. Get your Mapbox token:

   • Go to Mapbox
   • Create a new token or use your existing one
   • Add it to your .env.local file

5. Firebase is already configured with the existing project credentials in src/lib/firebase.ts

6. Run the development server:

npm run dev

7. Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── page.tsx           # Home page with map and add form
│   ├── locations/         # Locations listing page
│   └── add/              # Add location page
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── Header.tsx        # Navigation header
│   ├── MapComponent.tsx  # Interactive map component
│   └── LocationCard.tsx  # Location display card
└── lib/                  # Utility functions
    ├── firebase.ts       # Firebase configuration
    ├── database.ts       # Database operations
    └── utils.ts          # Helper utilities

Usage

Adding Locations

1. Click anywhere on the map to select a location
2. Enter a description for the location
3. Click "Add Location" to save

Viewing Locations

• Home Page: See recent locations and add new ones
• Locations Page: Browse all locations with search and filtering
• Add Page: Dedicated page for adding new locations

Features

• Search: Use the search bar to find locations by description
• Map Interaction: Click on map markers to see location details
• Responsive Design: Works seamlessly on desktop and mobile
• Real-time Updates: Locations update immediately after adding

Improvements Over Original

• ✅ Modern Tech Stack: Next.js 14, TypeScript, latest Firebase SDK
• ✅ Better UI/UX: Modern design with Tailwind CSS and custom components
• ✅ Enhanced Features: Search, filtering, better location management
• ✅ Performance: Optimized with modern React patterns
• ✅ Type Safety: Full TypeScript support
• ✅ Responsive: Mobile-first design
• ✅ Accessibility: Better keyboard navigation and screen reader support

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

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