Prototype Website for the Enhanced National Greening Program (ENGP)

This is a prototype web application recreating and modernizing the official portal of the Enhanced National Greening Program (ENGP) under the Forest Management Bureau of the Department of Environment and Natural Resources (FMB-DENR).

---

⚠️ Disclaimer

Important

This website was created solely for the purposes of a job application in the Forest Management Bureau of the Department of Environment and Natural Resources (FMB-DENR). It is a functional prototype showcasing modern web design, frontend interactions, data visualizations, and client-side routing capabilities.

---

🛠️ Tech Stack

This modern web application is built using the following technologies:

• Frontend Core: React (v18+) – Component-based interactive UI library.
• Build Tool / Bundler: Vite – Ultra-fast hot-reloading development environment.
• Routing: React Router DOM (v6+) – Declarative client-side routing.
• Styling: Vanilla CSS3 – Highly customized layouts utilizing modern properties:
  • Custom CSS variables for site-wide design tokens (colors, animations, shadow variables).
  • Modern grid systems (flexbox, CSS grid).
  • Responsive media query breakpoints for seamless mobile, tablet, and desktop viewing.
• Animations & Interactivity:
  • IntersectionObserver API for scroll-reveal staggered animations.
  • Interactive SVG coordinates rendering dynamic data line and bar charts.
  • Custom React state-driven tracker bands and tooltips.

---

🌟 Key Features

1. Modern Layout Overhaul: Refined margins, font hierarchies, typography (Inter), shadows, and polished colors mirroring the FMB-DENR identity.
2. Interactive Accomplishments Dashboard:
   • Filterable statistics table (NGP, ENGP, Combined, or Current Year).
   • Fully searchable datasets with instant, client-side input filtering.
   • Beautiful, responsive SVG charts with mouse-tracker lines and hover tooltips showing exact statistics.
3. Pillar & Species Galleries: Custom grid components, smooth zoom effects, and high-fidelity image representations.
4. Maintenance Fallbacks: Styled maintenance notice matching the official portal layout.
5. Interactive Comment Forums: Functional local feedback capture sections at the bottom of pages.