# Project export: Resonant CWPP: AI Wildfire Safety Advisor This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: AI-powered wildfire safety advisor that transforms complex CWPP policy documents into personalized, actionable, and culturally resonant guidance for residents. - Devpost: https://devpost.com/software/resonant-cwpp-ai-wildfire-safety-advisor - GitHub: https://github.com/DeveshKaushal-9/Treehacks-2026 - Video: https://www.youtube.com/embed/svFAcb_MEhk?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 0 GitHub contributor(s) β€” ## Devpost submission (written by the team) No Devpost description available. ## README (from the GitHub repository) # Resonant CWPP πŸ›‘οΈ **Built for TreeHacks 2026** California is burning. Every year, we watch as our communities are threatened by increasingly severe wildfires. But the problem isn't just the fireβ€”it's the disconnect between the data we have and the people who need it. We built **Resonant CWPP** because we believe that a Community Wildfire Protection Plan shouldn't just be a PDF sitting on a government server. It should be a living, breathing platform that connects residents, first responders, and vulnerable populations in real-time. ## The Problem Most wildfire apps are either too generic (providing just a weather forecast) or too complex (aimed only at forestry experts). They fail to account for the human element: - **Language barriers** prevent critical info from reaching everyone. - **Generic alerts** lead to "alarm fatigue." - **Vulnerable populations** (AFN) are often left as an afterthought in evacuation planning. ## Our Solution We created an **Intelligence Layer** that adapts the entire application based on who you are. ### πŸš’ For First Responders ("The Commander") We give you the data you actually need to make decisions. - **Tactical Dark Mode**: Designed for low-light environments. - **Live Unit Tracking**: Know exactly where your assets are. - **Vulnerable Population Mapping**: See exactly where AFN residents are located to prioritize evacuations. ### 🏑 For Residents ("The Protector") We turn anxiety into action. - **Defensible Space Score**: A gamified way to track how safe your home is. - **Specific Action Plans**: Instead of "be prepared," we say "Clear the dry leaves from your north gutter." - **Hyper-Local Alerts**: We use your exact location to filter out noise. ### πŸŽ“ For Youth ("The Future") We engage the next generation. - **Gamified Learning**: Earn ranks like "Junior Ranger" by learning about fire safety. - **Missions**: Simple tasks that help the whole family stay safe. ## How We Built It We used **Next.js** for a snappy, responsive frontend and **Tailwind CSS** to build a custom design system that feels premium and trustworthy. The "Command Center" uses **Framer Motion** for fluid transitions because in a crisis, clunky UI is a safety hazard. For the intelligence layer, we mocked a **Fire Weather Index (FWI)** engine that takes real-time inputs (Wind, Temp, Humidity) and determines the exact risk level for your specific micro-climate. ## Try It Out 1. Clone the repo. 2. `npm install` 3. `npm run dev` 4. Sign up as a **Resident**, **First Responder**, or **Student** to see how the UI changes for you. --- *Made with ❀️ (and a lot of caffeine) at Stanford.* ## Detected evidence (automated analysis) Indexed codebase: 27 recognized source files, 180 KB. - CSS (language) β€” detected in the code - Next.js (technology) β€” detected in the code - React (technology) β€” detected in the code - Tailwind CSS (technology) β€” detected in the code - TypeScript (language) β€” detected in the code ## Codebase structure (from repository index) ### Files (33 of 33) ``` .gitignore DEMO_GUIDE.md eslint.config.mjs LICENSE next.config.ts package.json postcss.config.mjs README.md src/app/api/chat/route.ts src/app/globals.css src/app/layout.tsx src/app/login/page.tsx src/app/page.tsx src/app/signup/page.tsx src/components/action-plan.tsx src/components/dashboards/afn-dashboard.tsx src/components/dashboards/resident-dashboard.tsx src/components/dashboards/responder-dashboard.tsx src/components/dashboards/youth-dashboard.tsx src/components/feedback-loop.tsx src/components/hero-section.tsx src/components/interactive-map.tsx src/components/live-dashboard.tsx src/components/personalization-wizard.tsx src/components/screens/alerts-screen.tsx src/components/screens/chat-screen.tsx src/components/screens/community-screen.tsx src/components/screens/dashboard-screen.tsx src/components/screens/profile-screen.tsx src/components/screens/todo-screen.tsx src/components/sidebar-layout.tsx src/lib/auth-context.tsx tsconfig.json ``` ### Dependencies - package.json: @tailwindcss/postcss@^4, @types/leaflet@^1.9.21, @types/node@^20, @types/react@^19, @types/react-dom@^19, axios@^1.13.5, clsx@^2.1.1, date-fns@^4.1.0, eslint@^9, eslint-config-next@16.1.6, framer-motion@^12.34.0, leaflet@^1.9.4, lucide-react@^0.564.0, next@16.1.6, react@19.2.3, react-dom@19.2.3, react-leaflet@^5.0.0, react-markdown@^10.1.0, recharts@^3.7.0, remark-gfm@^4.0.1, tailwind-merge@^3.4.0, tailwindcss@^4, typescript@^5 ### Recent commits (newest first) - commit - updated readme file - Merge remote-tracking branch 'origin/main' - feat: Implement Role-Based Intelligence Layer and Auth - Initial commit - Initial commit from Create Next App ## Key source files (fetched from GitHub, selected and truncated for size) ### DEMO_GUIDE.md ```markdown # Quick Demo Guide - Resonant CWPP ## πŸš€ How to Demo Your New Dashboard ### **What Changed:** βœ… **Collapsible Sidebar** - Clean navigation with 5 main screens βœ… **Mobile Responsive** - Works perfectly on all devices βœ… **5 Dedicated Screens** - Dashboard, To-Do, Community, Alerts, Profile --- ## πŸ“± Demo Flow (3 minutes) ### **1. Login/Signup (30 seconds)** 1. Go to http://localhost:3000 2. Click "Create Account" 3. Fill in: - Name: "Sarah Chen" - Email: "sarah@example.com" - Phone: "(650) 555-1234" - City: "Palo Alto" - Role: **Resident** - Password: "demo123" 4. Click "Sign Up" β†’ "Sign In" ### **2. Dashboard Screen (45 seconds)** **Show:** - βœ… Real-time fire risk gauge (pulls live weather data!) - βœ… Temperature, wind, humidity metrics - βœ… Defensible Space Score (72/100) - βœ… Property protection stats **Say:** *"This is personalized to Sarah's location and profile type. The fire risk updates in real-time based on weather conditions."* ### **3. To-Do List Screen (30 seconds)** **Click:** "To-Do List" in sidebar **Show:** - βœ… Progress bar (shows completion percentage) - βœ… Task categories (structure, landscape, community, emergency) - βœ… Difficulty levels - βœ… Click a task to mark complete **Say:** *"Instead of generic advice, residents get specific, actionable tasks they can complete."* ### **4. Community Screen (30 seconds)** **Click:** "Community" in sidebar **Show:** - βœ… Red Flag Warning banner - βœ… Updates from Fire Dept, Police, Local Gov - βœ… Priority filtering (critical, high, medium, low) - βœ… Timestamps ("45 minutes ago") **Say:** *"This is the two-way communication channel - residents get official updates from authorities, and they can provide feedback."* ### **5. Sidebar Features (15 seconds)** **Show:** - βœ… Click collapse button (top right of sidebar) - βœ… Sidebar collapses to icons only - βœ… On mobile, click hamburger menu **Say:** *"The interface adapts - collapsible on desktop, slide-out on mobile."* ### **6. Profile Screen (15 seconds)** **Click:** "Profile" in sidebar **Show:** - βœ… User info with avatar - βœ… Impact stats (47 days active, 12 tasks done) - βœ… Edit mode **Say:** *"Users can manage their account and see their progress over time."* --- ## 🎯 Key Talking Points for Judges ### **Challenge Alignment:** 1. **Accessible** βœ… - Clean navigation, not overwhelming - Gamified scoring (72/100) instead of technical jargon - Specific actions ("Clear dry leaves") not generic advice 2. **Interactive** βœ… - Real-time weather integration - Task completion tracking - Community updates with filtering 3. **Culturally Resonant** βœ… - Different dashboards for different personas - Personalized recommendations - Values-based customization --- ## πŸ”₯ Demo Tips **DO:** - βœ… Show the sidebar collapse feature - βœ… Mark a task as complete to show interactivity - βœ… Filter community updates by priority - βœ… Mention the real-time weather API **DON'T:** - ❌ Spend too long on any one screen - [truncated β€” 1164 more characters] ``` ### package.json ``` { "name": "treehacks", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint" }, "dependencies": { "@types/leaflet": "^1.9.21", "axios": "^1.13.5", "clsx": "^2.1.1", "date-fns": "^4.1.0", "framer-motion": "^12.34.0", "leaflet": "^1.9.4", "lucide-react": "^0.564.0", "next": "16.1.6", "react": "19.2.3", "react-dom": "19.2.3", "react-leaflet": "^5.0.0", "react-markdown": "^10.1.0", "recharts": "^3.7.0", "remark-gfm": "^4.0.1", "tailwind-merge": "^3.4.0" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.1.6", "tailwindcss": "^4", "typescript": "^5" } } ``` ### src/app/layout.tsx ```typescript import type { Metadata } from "next"; import { Inter, Outfit } from "next/font/google"; import "./globals.css"; import { AuthProvider } from "@/lib/auth-context"; const inter = Inter({ variable: "--font-inter", subsets: ["latin"], }); const outfit = Outfit({ variable: "--font-outfit", subsets: ["latin"], }); export const metadata: Metadata = { title: "Resonant CWPP | TreeHacks 2026", description: "A culturally resonant, interactive Community Wildfire Prevention Plan for the modern age.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### src/app/page.tsx ```typescript "use client"; import { useAuth } from "@/lib/auth-context"; import { HeroSection } from "@/components/hero-section"; import { PersonalizationWizard } from "@/components/personalization-wizard"; import { ActionPlan } from "@/components/action-plan"; import { FeedbackLoop } from "@/components/feedback-loop"; import { LiveDashboard } from "@/components/live-dashboard"; import Link from "next/link"; // For the mocked login button in Hero export default function Home() { const { user, isLoading } = useAuth(); if (isLoading) return null; // Or a loading spinner if (user) { return ; } return (
{/* Temporary Nav for creating account */}
Create Account
{/* Footer / Community */}

Why It Matters

California faces an urgent task. We need to bridge the gap between technical data and human connection. Your participation shapes the future of our safety.

Β© 2026 Resonant CWPP Prototype. Built for TreeHacks.
); } ``` ### src/app/login/page.tsx ```typescript "use client"; import { useState } from "react"; import { motion } from "framer-motion"; import { useRouter, useSearchParams } from "next/navigation"; import { Shield, Loader2, AlertCircle } from "lucide-react"; import Link from "next/link"; import { useAuth } from "@/lib/auth-context"; export default function LoginPage() { const router = useRouter(); const searchParams = useSearchParams(); const { login } = useAuth(); // This line is used later in the handleLogin function. The instruction's comment seems to be a typo. I will keep it. const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const [formData, setFormData] = useState({ email: "", password: "" }); const registered = searchParams.get("registered"); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setError(""); // Simulate API delay await new Promise(resolve => setTimeout(resolve, 1000)); // Check "database" const users = JSON.parse(localStorage.getItem("cwpp_users_db") || "[]"); // eslint-disable-next-line @typescript-eslint/no-explicit-any const user = users.find((u: any) => u.email === formData.email && u.password === formData.password); if (user) { // Remove password before session storage const safeUser = { ...user }; delete safeUser.password; login(safeUser); router.push("/"); } else { setError("Invalid email or password"); setIsLoading(false); } }; return (
Resonant CWPP

Welcome Back

Join your community's wildfire defense network.

{registered && (
Account created! Please sign in.
)}
setFormData({ ...formData, email: e.target.value })} />
setFormData({ ...formData, password: e.target.value })} />
{error && (
{error}
)}

Don't have an account? Create Account

); } ``` ### src/app/signup/page.tsx ```typescript "use client"; import { useState } from "react"; import { motion } from "framer-motion"; import { useRouter } from "next/navigation"; import { Shield, Loader2 } from "lucide-react"; import Link from "next/link"; import { UserProfileType, User } from "@/lib/auth-context"; export default function SignupPage() { const router = useRouter(); // const { login } = useAuth(); // We'll manually handle login redirect after signup const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const [formData, setFormData] = useState({ name: "", email: "", phone: "", city: "Palo Alto", // Default profileType: "resident_general" as UserProfileType, password: "", confirmPassword: "" }); const handleSignup = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setError(""); if (formData.password !== formData.confirmPassword) { setError("Passwords do not match"); setIsLoading(false); return; } // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)); // Create User Object (Simulating backend creation) const newUser: User = { id: Math.random().toString(36).substr(2, 9), name: formData.name, email: formData.email, phone: formData.phone, city: formData.city, profileType: formData.profileType, location: { lat: 37.4, lng: -122.1 } // Default lat/long for now }; // Store in localStorage 'db' to simulate persistence for the Login page to find const users = JSON.parse(localStorage.getItem("cwpp_users_db") || "[]"); users.push({ ...newUser, password: formData.password }); localStorage.setItem("cwpp_users_db", JSON.stringify(users)); // Redirect to Login Page as requested router.push("/login?registered=true"); }; return (
Resonant CWPP

Create Account

Join your community's wildfire defense network.

setFormData({ ...formData, name: e.target.value })} />
setFormData({ ...formData, email: e.target.value })} />
setFormData({ ...formData, phone: e.target.value })} />