ghassan/takeone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
takeone/TODO_explore_clubs.md

2.2 KiB
Raw Blame History

Explore Clubs Feature - Implementation Checklist

1. Change "My Family" to "Family"

  • Update navigation dropdown in resources/views/layouts/app.blade.php
  • Update page heading in resources/views/family/dashboard.blade.php

2. Create Club Controller

  • Create app/Http/Controllers/ClubController.php
  • Implement index() method for explore page
  • Implement nearby() method for API endpoint
  • Implement all() method for getting all clubs
  • Implement Haversine formula for distance calculation

3. Create Routes

  • Add explore route in routes/web.php
  • Add nearby clubs API route in routes/web.php
  • Add all clubs API route in routes/web.php

4. Create Explore View

  • Create resources/views/clubs/explore.blade.php
  • Integrate Leaflet.js for map display (using OpenStreetMap - FREE)
  • Implement Browser Geolocation API (FREE)
  • Display clubs list with distances
  • Add interactive map with markers
  • Add user location marker
  • Add search radius circle
  • Add click handlers for club items
  • Add responsive design

5. Update Navigation

  • Update Explore button link in resources/views/layouts/app.blade.php

6. Testing

  • Test geolocation functionality
  • Verify clubs display correctly
  • Test distance calculations
  • Ensure responsive design

Implementation Summary

Technologies Used (All FREE):

  1. Browser Geolocation API - Built-in browser feature for getting user's GPS location
  2. Leaflet.js - Free, open-source JavaScript library for interactive maps
  3. OpenStreetMap - Free map tiles (no API key required)
  4. Haversine Formula - Mathematical formula for calculating distances between GPS coordinates

Features Implemented:

  • User can click "Use My Location" to get their current GPS coordinates
  • System calculates distance to all clubs using Haversine formula
  • Clubs are displayed on an interactive map with numbered markers
  • Clubs are listed in a sidebar, sorted by distance
  • Clicking a club in the list focuses the map on that club
  • Shows clubs within 50km radius by default
  • Displays club information including owner details and contact info
  • Fully responsive design for mobile and desktop