Dashboard & Landing Page Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Poneglyph web application serves as an open dataset hub designed for NGOs, researchers, and journalists. It provides a visual and interactive platform to explore global humanitarian and environmental stories derived from large-scale survey data. The frontend is built using Next.js, leveraging a shared UI library for consistent design tokens and component primitives.
The user journey begins with a high-fidelity Landing Page that introduces the platform's core value propositions, followed by a data-rich Dashboard. The Dashboard allows users to browse articles, filter by humanitarian topics (such as Health, Climate, and Economics), and drill down into specific data stories linked to internal datasets.
Sources: apps/web/src/app/page.tsx, apps/web/src/app/dashboard/page.tsx:135-145, apps/web/README.md
Landing Page Architecture
The landing page is designed for high visual impact, utilizing animations and structured sections to guide new users. It is implemented as a "client-side" component to support complex GSAP and Framer Motion animations.
Visual and Interactive Elements
- Hero Section: Features a dynamic animated gradient background and GSAP-driven parallax effects for clouds and birds to create an immersive environment.
- How It Works: A three-step guide detailing the process of discovery, AI-assisted analysis, and community contribution.
- Blog Section: Displays the latest news, research breakthroughs, and community spotlights using Framer Motion for entrance animations.
Component Breakdown
| Component | Responsibility | Key Features |
|---|---|---|
HowItWorks | Onboarding | Interactive cards representing "Browse", "Analyze", and "Submit". |
DataCategories | Discoverability | Showcases the types of data available on the platform. |
CommunityPillars | Trust/Vision | Highlights the mission and community values of Poneglyph. |
BlogSection | Engagement | Previews external or internal articles with category tagging. |
Sources: apps/web/src/app/page.tsx:14-118, apps/web/src/components/landing/HowItWorks.tsx:28-40, apps/web/src/components/landing/BlogSection.tsx:10-28
The diagram shows the modular structure of the landing page, separating visual effects from informational sections.
Sources: apps/web/src/app/page.tsx, apps/web/src/components/landing/HowItWorks.tsx
Dashboard System
The Dashboard is the primary interface for consuming data-driven articles. It features a carousel for featured stories, a topic-based filter system, and a paginated grid of articles.
Data Model: Article
The Dashboard revolves around the Article interface, which links textual narratives to specific dataset identifiers.
export interface Article {
id: string;
heading: string;
imageUrl: string;
content: string;
datasetIds: string[];
}
Sources: apps/web/src/app/dashboard/components/article-card.tsx:5-11
Feature Implementation
- Carousel Navigation: A state-managed carousel allows users to shift through featured articles using a "fading" transition. It tracks
carouselStartindex and enforces visibility limits. - Topic Filtering: Articles are categorized into domains like Health, Education, and Climate. Selecting a topic updates the
selectedTopicstate, which triggers auseMemohook to filter the article list and reset pagination to page 1. - Pagination Logic: The grid calculates
totalPagesbased on the filtered result count and theITEMS_PER_PAGEconstant (set to 3).
This sequence illustrates how user interaction with the filter system triggers a UI update.
Sources: apps/web/src/app/dashboard/page.tsx:105-125
Article Detail View
When a user selects an article, they are routed to apps/web/src/app/dashboard/[id]/page.tsx. This page provides the full narrative and links directly to the raw data.
Interactive Features
- Linked Datasets: The sidebar fetches and displays actual dataset metadata from the API using the
apiClient. If the API call is successful, it lists the first five datasets associated with the topic. - Reference Tools: Includes a "Copy URL" feature for researchers to cite the article and social sharing buttons for Facebook, Twitter, and LinkedIn.
- Visualization Integration: Articles include a "Chart section" where data stories are paired with visual assets and source citations.
Sources: apps/web/src/app/dashboard/[id]/page.tsx:255-330, apps/web/src/app/dashboard/[id]/page.tsx:430-470
Categorization Mapping
The application uses a static mapping to resolve internal IDs to human-readable categories:
| ID | Category |
|---|---|
| 1, 5 | Health |
| 3 | Climate |
| 4 | Economics |
| 8 | Technology |
| 9 | Food & Agriculture |
Sources: apps/web/src/app/dashboard/[id]/page.tsx:19-31
Shared Navigation
The Navigation component provides a consistent header across both the Landing Page and Dashboard. It includes responsive logic for mobile devices and dynamic styling to highlight the active route.
- Responsive Menu: Utilizes a
mobileOpenstate to toggle a hamburger menu on small screens. - Authentication Hooks: Provides dedicated "Sign in" and "Upload" CTAs that redirect users to the authentication and dataset ingestion flows respectively.
Sources: apps/web/src/components/navigation.tsx:35-105
Conclusion
The Dashboard and Landing Page components form the core of the Poneglyph user experience. By combining high-end animations on the landing page with structured, filterable content on the Dashboard, the application balances marketing engagement with technical utility for humanitarian researchers. The system is designed for extensibility, allowing new articles and datasets to be linked through a unified ID-based architecture.