Building a React App with AI: It’s All About the Mindset

import { useState, useEffect } from 'react'; 

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'; 
import { Download, Search, CloudRain, Thermometer, Wind, Gauge, Droplets } from 'lucide-react'; 
import Papa from 'papaparse'; 
import { useState, useEffect } from 'react'; 
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'; 
import { Download, Search, CloudRain, Thermometer, Wind, Gauge, Droplets } from 'lucide-react'; 
import Papa from 'papaparse';

interface City { 
  name: string; 
  latitude: number; 
  longitude: number; 
  country: string; 
  admin1?: string; 
}

interface MetricConfig { 
  key: string; 
  label: string; 
  unit: string; 
  color: string; 
  icon: JSX.Element; 
} 

const METRICS: Record<string, MetricConfig> = { 
  temperature_2m: { key: 'temperature_2m', label: 'Temperature', unit: '°C', color: '#f97316', icon: <Thermometer className="w-4 h-4" /> }, 
  relative_humidity_2m: { key: 'relative_humidity_2m', label: 'Humidity', unit: '%', color: '#3b82f6', icon: <Droplets className="w-4 h-4" /> }, 
  surface_pressure: { key: 'surface_pressure', label: 'Air Pressure', unit: 'hPa', color: '#a855f7', icon: <Gauge className="w-4 h-4" /> }, 
  wind_speed_10m: { key: 'wind_speed_10m', label: 'Wind Speed', unit: 'km/h', color: '#10b981', icon: <Wind className="w-4 h-4" /> }, 
}; 

export default function App() { 
  const [query, setQuery] = useState('Houston'); 
  cont [searchResults, setSearchResults] = useState<City[]>([]); 
  const [selectedCity, setSelectedCity] = useState<City>({ name: 'Houston', latitude: 29.7604, longitude: -95.3698, country: 'United States' }); 
  const [selectedMetrics, setSelectedMetrics] = useState<string[]>(['temperature_2m', 'wind_speed_10m']);
  
  // Date selection state 
  const [startDate, setStartDate] = useState('2024-01-01'); 
  const [endDate, setEndDate] = useState(new Date().toISOString().split('T')[0]); 

  const [weatherData, setWeatherData] = useState<any[]>([]); 
  const [loading, setLoading] = useState(false);
  
  
  // Search Cities via Open-Meteo Geocoding 
  const handleSearch = async () => { 
    if (!query) return; 
    const res = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(query)}&count=5&language=en&format=json`); 
    const data = await res.json(); 
    if (data.results) setSearchResults(data.results); 
  }; 
  
 
  // Fetch Weather Data (Forecast or Historical Archive) 
  useEffect(() => { 
    const fetchWeather = async () => { 
      setading(true); 
      const metricsParam = Object.keys(METRICS).join(',');
  
  // Choose Archive endpoint for older dates, Forecast for modern dates 
      const isHistorical = new Date(startDate) < new Date(Date.now() - 7 * 24 * 60 * 60 * 1000); 
      const baseUrl = isHistorical  
        ? 'https://archive-api.open-meteo.com/v1/archive'  
        : 'https://api.open-meteo.com/v1/forecast';

    
      const url = `${baseUrl}?latitude=${selectedCity.latitude}&longitude=${selectedCity.longitude}&start_date=${startDate}&end_date=${endDate}&hourly=${metricsParam}`;
   
      
      try { 
        const res = await fetch(url); 
        const data = await res.json(); 

        if (data.hourly && data.hourly.time) { 
          const formatted = data.hourly.time.map((timeStr: string, idx: number) => { 
            const entry: any = { time: timeStr.replace('T', ' ') }; 
            Object.keys(METRICS).forEach((m) => { 
              entry[m] = data.hourly[m][idx]; 
            }); 
            return entry; 
          }); 
          setWeatherData(formatted); 
        } 
      } catch (err) { 
        console.error("Failed to fetch weather data:", err); 
      } finally { 
        setLoading(false); 
      } 
    };
    
    fetchWeather(); 
  }, [selectedCity, startDate, endDate]); 

  const toggleMetric = (key: string) => { 
    setSelectedMetrics(prev =>  
      prev.includes(key) ? prev.filter(m => m !== key) : [...prev, key] 
    ); 
  }; 
    
   // Export current active dataset view to CSV 
  const downloadCSV = () => { 
    if (!weatherData.length) return; 
    const csv = Papa.unparse(weatherData); 
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); 
    const link = document.createElement('a'); 
    link.href = URL.createObjectURL(blob); 
    link.setAttribute('download', `${selectedCity.name}_weather_${startDate}_to_${endDate}.csv`); 
    document.body.appendChild(link); 
    link.click(); 
    document.body.removeChild(link); 
  };
  
  return ( 
    <div className="min-h-screen bg-slate-950 text-slate-100 p-6 font-sans"> 
      <header className="max-w-7xl mx-auto mb-8 border-b border-slate-800 pb-4 flex justify-between items-center"> 
        <div className="flex items-center gap-3"> 
          <CloudRain className="w-8 h-8 text-blue-500" /> 
          <h1 className="text-2xl font-bold tracking-wide">OmniGraph Weather Analytics</h1> 
        </div> 
        <button  
          onClick={downloadCSV} 
          className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 text-slate-200 px-4 py-2 rounded-lg border border-slate-700 transition" 
        > 
          <Download className="w-4 h-4" /> Export CSV 
        </button> 
      </header> 
  
      
      <main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6"> 
        {/* Sidebar Controls */} 
        <div className="bg-slate-900 border border-slate-800 p-5 rounded-xl flex flex-col gap-6"> 
          {/* Location Search */} 
          <div> 
            <label className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2 block">Location</label> 
            <div className="flex gap-2"> 
              <input  
                type="text"  
                value={query}  
                onChange={(e) => setQuery(e.target.value)} 
                placeholder="Search city..." 
                className="bg-slate-950 border border-slate-800 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:border-blue-500 text-slate-100" 
              /> 
              <button onClick={handleSearch} className="bg-blue-600 hover:bg-blue-500 p-2 rounded-md text-white"> 
                <Search className="w-4 h-4" /> 
              </button> 
            </div> 
            {searchResults.length > 0 && ( 
              <ul className="mt-2 bg-slate-950 border border-slate-800 rounded-md overflow-hidden"> 
                {searchResults.map((city, idx) => ( 
                  <li
                    key={idx}  
                    onClick={() => { setSelectedCity(city); setSearchResults([]); }} 
                    className="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer text-slate-300" 
                  > 
                    {city.name}, {city.admin1 ? `${city.admin1}, ` : ''}{city.country} 
                  </li> 
                ))} 
              </ul> 
            )} 
          </div>
          
          
          {/* Date Range Controls */} 
          <div> 
            <label className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2 block">Date Range (1940 – Present)</label> 
            <div className="flex flex-col gap-2"> 
              <input  
                type="date"  
                value={startDate}  
                onChange={(e) => setStartDate(e.target.value)} 
                className="bg-slate-950 border border-slate-800 rounded-md px-3 py-1.5 text-sm text-slate-200" 
              /> 
              <input  
                type="date"  
                value={endDate}  
                onChange={(e) => setEndDate(e.target.value)} 
                className="bg-slate-950 border border-slate-800 rounded-md px-3 py-1.5 text-sm text-slate-200" 
              /> 
            </div> 
          </div>
          
          {/* Metric Selector Buttons */} 
          <div> 
            <label className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2 block">Data Metrics</label> 
            <div className="flex flex-col gap-2"> 
              {Object.values(METRICS).map((m) => { 
                const active = selectedMetrics.includes(m.key); 
                return ( 
                  <button 
                    key={m.key} 
                    onClick={() => toggleMetric(m.key)} 
                    className={`flex items-center justify-between px-3 py-2 rounded-md text-sm border transition ${ 
                      active  
                        ? 'bg-slate-800 border-slate-600 text-white'
                        : 'bg-slate-950 border-slate-800 text-slate-500 hover:text-slate-300' 
                    }`} 
                  > 
                    <span className="flex items-center gap-2">{m.icon} {m.label}</span> 
                    <span className="text-xs font-mono" style={{ color: active ? m.color : 'inherit' }}>{m.unit}</span> 
                  </button> 
                ); 
              })} 
            </div> 
          </div> 
        </div>
        
        {/* Chart Visualization Panel */} 
        <div className="lg:col-span-3 bg-slate-900 border border-slate-800 p-6 rounded-xl flex flex-col"> 
          <div className="flex justify-between items-center mb-6">
            <div> 
              <h2 className="text-xl font-semibold text-slate-100">{selectedCity.name}</h2> 
              <p className="text-xs text-slate-400"> 
                {selectedCity.latitude.toFixed(2)}°N, {selectedCity.longitude.toFixed(2)}°E | {startDate} to {endDate} 
              </p> 
            </div> 
            {loading && <span className="text-xs text-blue-400 animate-pulse">Loading dataset...</span>} 
          </div> 

          <div className="h-[450px] w-full"> 
            {weatherData.length > 0 ? ( 
              <ResponsiveContainer width="100%" height="100%"> 
                <LineChart data={weatherData}> 
                  <CartesianGrid strokeDasharray="3 3" stroke="#334155" /> 
                  <XAxis dataKey="time" stroke="#64748b" tick={{ fontSize: 11 }} /> 
                  <YAxis stroke="#64748b" tick={{ fontSize: 11 }} />
                  <Tooltip  
                    contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', color: '#f8fafc' }} 
                    itemStyle={{ fontSize: '12px' }} 
                  /> 
                  {selectedMetrics.map((metricKey) => ( 
                    <Line 
                      key={metricKey} 
                      type="monotone" 
                      dataKey={metricKey} 
                      name={METRICS[metricKey].label} 
                      stroke={METRICS[metricKey].color} 
                      dot={false} 
                      strokeWidth={2} 
                    /> 
                  ))} 
                </LineChart> 
              </ResponsiveContainer> 
            ) : ( 
              <div className="h-full flex items-center justify-center text-slate-600"> 
                No data available for selected criteria. 
              </div> 
            )} 
          </div> 
        </div> 
      </main> 
    </div> 
  );
}