Integrate project data into UI (static/API)

Issue created with ChatGPT models' help¹

---

Description

Integrate land project data into the frontend UI so map markers, project title panels, and project information components consume real project data instead of isolated hardcoded values¹. The application currently uses static GeoJSON files to render land project markers on the Leaflet map². This issue should support both possible data flows depending on backend readiness:

• Static GeoJSON/local project data flow³
• API/server/database-driven data flow⁴

If backend/server architecture is not ready when this issue is worked on, contributors may continue using static GeoJSON project data temporarily¹. However, if backend APIs are available, the preferred implementation is consuming validated project data from the server through a structured frontend architecture².

This issue is mainly about connecting the UI layer with project data sources so components render dynamically from data instead of static placeholders³.

Please request notion table and geojson file access with the maintainer team:

• https://www.notion.so/programequity/31bfc2c48401801c8047f5a420902687?v=31bfc2c4840180818555000c840d5956&source=copy_link
• https://github.com/OpenSourceFellows/map-dashboard/blame/main/public/fixtures/land_project_sites.geojson

---

Goals

• Load land project data into frontend UI¹
• Support both static GeoJSON and API-driven data sources²
• Dynamically populate map markers and project detail components³
• Establish reusable frontend data flow architecture⁴
• Support project data loading on page load and marker click¹
• Prepare application for future backend scaling and validation²

---

Implementation Instructions

• Create reusable frontend data flow structure¹

• Suggested architecture (optional but recommended):

  • controller²
  • middleware³
  • service⁴

• Use React + TypeScript + Material UI where possible¹

• Axios may be used for API requests if preferred²

• On initial page load:

  • request/load project data³
  • render markers on Leaflet map⁴

• On marker click:

  • load/display selected project detail data¹
  • populate ProjectTitle component²
  • populate ProjectInfo component³

• If backend/server APIs are unavailable:

  • use static GeoJSON data from repo⁴

• If backend/server APIs are available:

  • consume project data through API architecture¹
  • use validated server responses if available²

• Avoid tightly coupling UI components directly to fetch logic³

• Keep service/request logic reusable for future routes/pages⁴

---

Suggested Frontend Data Flow

Option A — Static GeoJSON Flow

• GeoJSON files stored locally in repository¹
• Frontend services read/transform local data²
• Components consume transformed project objects³

Option B — API/Database Flow

• Frontend sends API request on page load⁴
• Server retrieves project data from database¹
• Frontend consumes API response through service/controller architecture²
• Components dynamically render returned project data³

---

Expected Functionalities

On Page Load

• Land project dataset loads automatically¹
• Markers render on Leaflet map²
• Project metadata becomes available for interaction³

On Marker Click

• Selected project becomes active⁴
• Project detail data loads into UI¹
• ProjectTitle renders selected title²
• ProjectInfo renders selected project metadata³

---

Architecture Notes

This issue is less about final backend implementation details and more about making the UI correctly consume project data regardless of source¹.

“Integrating data into UI” may include:

• setting up API/service requests²
• transforming response data³
• connecting data to React components⁴
• managing loading/error states¹
• validating incoming data shapes²
• rendering dynamic UI content³
• preparing reusable frontend architecture⁴

Contributors may structure implementation differently as long as the UI cleanly consumes dynamic project data¹.

---

Suggested Folder Structure (Optional)

src/
 ├── controllers/
 ├── middleware/
 ├── services/
 ├── types/
 ├── components/
 ├── pages/
 └── data/

Possible service examples:²

services/
 ├── projectService.ts
 ├── mapService.ts
 └── apiClient.ts

---

Acceptance Criteria

• Project data renders dynamically in UI¹
• Map markers load from project dataset²
• Clicking markers updates project detail components³
• Application supports static GeoJSON fallback⁴
• API integration path is supported if backend is ready¹
• Data-fetching logic is separated from UI components²
• Code structure supports future scalability and testing³
• Layout/components correctly consume dynamic project values⁴

---

Resources

¹ https://react.dev/learn/passing-data-deeply-with-context
² https://axios-http.com/docs/intro
³ https://leafletjs.com/examples/quick-start/
⁴ https://mui.com/material-ui/getting-started/overview/

Please request notion table and geojson file access with the maintainer team:

• https://www.notion.so/programequity/31bfc2c48401801c8047f5a420902687?v=31bfc2c4840180818555000c840d5956&source=copy_link
• https://github.com/OpenSourceFellows/map-dashboard/blame/main/public/fixtures/land_project_sites.geojson

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Reference Issues (these may not be accessible but please reach out to maintainer team if you would like to access):

• https://github.com/OpenSourceFellows/map-dashboard/issues/203
• https://github.com/OpenSourceFellows/dashboard_server/issues/108
• https://github.com/OpenSourceFellows/dashboard_server/issues/83
• https://github.com/OpenSourceFellows/dashboard_server/issues/72

Start with public/fixtures/land_project_sites.geojson and inspect the existing Leaflet map, ProjectTitle, and ProjectInfo components. Confirm with maintainers whether an API is available or the static GeoJSON path should be used, then trace how page-load data and marker selection currently flow. Done means dynamic markers and selected project details render through separated data-fetching logic, with the static fallback preserved.