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

Create `ProjectInfo` component (left/right layout)

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

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
design, frontend

Línea de trabajo

Comienza con el prototipo de Figma e inspecciona la estructura de componentes existente antes de crear ProjectInfo.tsx en components/project o en una ubicación similar. Define los tipos de metadatos del proyecto y, después, implementa el panel izquierdo de casillas de verificación y los valores dinámicos de la derecha con un diseño responsive de MUI. Se considera terminado cuando el componente coincide con la estructura de Figma, renderiza los controles y metadatos especificados y admite una futura integración de mapas.

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

Create a reusable ProjectInfo component that renders the lower information panel shown beneath the map after a project marker is clicked¹. The component should follow the Figma design closely and be divided into two major sections: a left window (map layer toggles / controls) and a right window (project metadata and information display)².

This issue is primarily focused on creating the component structure, layout, styling, and data rendering flow using React + TypeScript + Material UI³. The left panel should support checkbox-based layer toggles, while the right panel should support dynamically rendered values based on the selected project⁴.

Some properties in the left window may later become conditionally rendered depending on whether the selected land project contains those values⁵. If possible, contributors may implement conditional rendering now, but it is not strictly required for completion of this issue¹.

Image

Goals

  • Create reusable ProjectInfo component¹
  • Implement left/right panel layout from Figma²
  • Support checkbox skeleton functionality for map layers³
  • Could Dynamically render project information values⁴
  • Use TypeScript types/interfaces for project data¹
  • Prepare component for future responsive/mobile support²

Implementation Instructions

  • Create ProjectInfo.tsx under components/project or similar folder¹
  • Use Material UI components (Box, Stack, Checkbox, Typography, etc.)²
  • Define TypeScript interfaces/types for project metadata³
  • Split layout into left window + right window⁴
  • Add placeholder/skeleton checkbox behavior for map layer toggles¹
  • Checkbox interactions should prepare for future Leaflet layer toggling²
  • Render static property labels with dynamic project values³
  • Consider conditional rendering of properties with missing/null values⁴
  • Keep layout responsive using breakpoints where possible¹
  • Styling can use MUI sx, theme folder, or styles folder²

Layout Specs (Figma)

Project info container
  • width: 1188;¹
  • height: 451;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • border-bottom-width: 2px;¹
  • padding-right: 24px;²
  • padding-left: 24px;³
  • background: #FFFFFF;⁴
  • border-bottom: 2px solid #E8E8E8;¹
Left window

⚠️ Note: Some left window properties or the entire left panel itself may later become conditionally rendered depending on available land project data¹.

Suggested condition:

  • If a project does not contain values for a property/layer, do not render that property²

This logic is optional for this issue but recommended if contributor bandwidth allows³.

Layout Specs
  • width: 300;¹
  • height: 451;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • border-right-width: 2px;¹
  • padding-top: 4px;²
  • padding-right: 24px;³
  • border-right: 2px solid #E8E8E8;⁴
Right window

⚠️ Note: The right window intentionally contains extra whitespace because additional metadata sections will be added later¹.

Layout Specs
  • width: 840;²
  • height: 451;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-top: 4px;²
  • padding-left: 24px;³

Expected Component Behavior

Left Window
  • Contains layer/property checkboxes¹
  • Checkbox interactions should prepare for future Leaflet map layer toggling²
  • Example behavior: checking “Acreage” or “Watershed” shows corresponding map layer³
  • Full Leaflet integration is optional for this issue⁴
Right Window

  • Property labels may remain static¹

  • Property values should render dynamically based on selected project²

  • Example fields:

    • Status³
    • Partner⁴
    • Acreage¹
    • Location²
    • Watershed³
    • Restoration Services⁴
    • Active Monitoring¹

Notes

  • Please reach out to the maintainer team for access to the Figma file¹
  • Use the Figma file for exact spacing/typography/details because this issue may not list every specification²
  • Consider using responsive breakpoints³
  • Structure component cleanly for future routing/services integration⁴

Acceptance Criteria

  • ProjectInfo component renders correctly with left/right layout¹
  • Left panel contains checkbox controls²
  • Right panel is setup to display dynamically rendered project metadata values³
  • Layout visually matches Figma structure⁴
  • Component uses React + TypeScript + MUI¹
  • Code structure supports future responsiveness and map integration²
  • Critical Testing validation optional but good to have

Consider helping after PR for this issue is merged

  • Once PR for this issue is merged, please check dependencies heading in #16, if all the issues there are done, please move that issue to ready column/status

Resources

¹ https://mui.com/material-ui/react-box/
² https://mui.com/material-ui/react-checkbox/
³ https://react.dev/learn/conditional-rendering
⁴ https://react.dev/learn/typescript

Figma Design (Refer for full details): 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

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 Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.