Issue 21 - Call the backend for photos (frontend) #197
Description
🎯 Goal
Display interactive map bubbles based on photo locations stored in MongoDB.
You will fetch all photo metadata from the backend and render bubble markers on the map.
📱 Frontend Tasks
Inside:
/frotnend/src/screens/MapScreen.tsx
1. Fetch All Photos
Call the backend:
const res = await fetch(`${API_URL}/api/v1/photos/all-photos`);
const photos = await res.json();2. Render Map Markers
For each photo:
- Extract
location.coordinates - Render a circular marker/bubble on the map
Example using react-native-maps:
<Marker
coordinate={{
latitude: photo.location.coordinates[1],
longitude: photo.location.coordinates[0]
}}
/>📤 PR Submission
Bubbles visible on the map
Each bubble represents at least one uploaded photo (No need for current Photo Display, if markers are being displayed thats Enough) .
Mock backend data fetched
Use mock data for now.
Note : Mock Data format will be like this:
[
{
"_id": "...",
"imageUrl": "...",
"clerkUserId":"...",
"location": {
"type": "Point",
"coordinates": [longitude, latitude]
},
"timestamp": "...",
"eventId": null
}
]
Use ChatGpt to generate some, otherwise I will make it available.