Bantay Bakir Web

A web dashboard for monitoring tagged trees, mapped areas, and ranger activity.

Project Photo / Screenshot

• Splash Screen

• Map View

• Tagged Trees

• Areas

• Active Ranger

Features

• Interactive map dashboard with KPI cards and detail panels
• Tagged Trees directory with status, DBH, survival, locate, and delete actions
• Tagged Areas directory with progress tracking and boundary stats
• Rangers directory pulled from Firestore users collection (excluding admins)
• Search/filter controls in the sidebar
• Theme support (light, dark, system)

Tech Stack

• React + TypeScript + Vite
• Tailwind CSS
• Zustand
• Firebase Firestore
• React Router
• Leaflet / React-Leaflet

Pages

• / Map View (Dashboard)
• /trees Tagged Trees
• /areas Tagged Areas
• /rangers Active Rangers
• /settings Settings

Getting Started

1. Install dependencies:

npm install

2. Start local development server:

npm run dev

3. Build for production:

npm run build

4. Preview production build:

npm run preview

Firebase Setup

Create a .env.local file in the project root and provide:

• VITE_FIREBASE_API_KEY
• VITE_FIREBASE_AUTH_DOMAIN
• VITE_FIREBASE_PROJECT_ID
• VITE_FIREBASE_STORAGE_BUCKET
• VITE_FIREBASE_MESSAGING_SENDER_ID
• VITE_FIREBASE_APP_ID
• VITE_FIREBASE_MEASUREMENT_ID (optional)
• VITE_ADMIN_EMAILS (optional, comma-separated)

See .env.example for the template.

Firestore collections used by the app:

• trees
• tagAreas
• users

Notes

• Static assets such as logos or screenshots can be placed in public/.
• The sidebar logo currently uses public/icon.png.