Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Integrate project data into UI (static/API)

Abierto
  • ¿Algo no está bien?
#17 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend, web-dev

Línea de trabajo

Comienza con public/fixtures/land_project_sites.geojson e inspecciona los componentes existentes Leaflet, ProjectTitle y ProjectInfo. Confirma con los maintainers si hay una API disponible o si debe usarse la ruta estática de GeoJSON, y luego sigue cómo fluyen actualmente los datos al cargar la página y la selección de marcadores. La tarea estará terminada cuando los marcadores dinámicos y los detalles del proyecto seleccionado se rendericen mediante una lógica separada de obtención de datos, conservando el fallback estático.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Advanced California Tribal GIS Hackathon
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:

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:

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):

Lenguaje dominante
HTML
Estrellas
2
Forks
11
Sin PR fusionados en 30 d

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de OpenSourceFellows/map_dashboard_hackathon

Todos los issues de OpenSourceFellows/map_dashboard_hackathon

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.