Integrate project data into UI (static/API)

[SAUMILDHANKAR]

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³.

---

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/

Reference Figma Design:
https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3802&t=R2HRz2FxbgryeS8U-0

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