🌦️ Weather Onchain AI App

📌 About the Project

I was inspired to create a weather application that goes beyond just showing the temperature.
The goal was to answer practical everyday questions like:

• “What should I wear?”
  
• “Is it a good day to go for a run?”
  

The Onchain aspect was inspired by the idea of creating a permanent, verifiable public record of environmental data.
While the current version focuses on the frontend, the project is built with the foundation to log weather data immutably on the blockchain.

⚙️ How I Built It

Tech Stack & Features:

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
  
  • Used TailwindCSS (CDN) for rapid, responsive styling
    
• Dynamic Visuals:
  
  • Custom CSS animations for immersive weather backgrounds
    
  • JavaScript checks conditions (e.g., "Rain", "Clouds") and applies matching animations
    
• Real-Time Data (API):
  
  • Integrated OpenWeatherMap API for:
    
  • Fetching live weather data
    
  • Smart city search with autocomplete (optimized via debounce)
    
• AI Assistant:
  
  • A rule-based engine written in JavaScript
    
  • Uses weather data + predefined logic to generate contextual advice
    
• Data Visualization:
  
  • Chart.js bar chart showing frequency of searched weather conditions
    
• Blockchain Foundation:
  
  • Project includes Ethers.js and a Hardhat environment (contracts, scripts)
    
  • Lays groundwork for future on-chain weather logging
    

🚧 Challenges I Faced

1. API Rate Limiting

   • City autocomplete made too many API calls
     
   • Solved by adding a debounce function in JavaScript
     

2. Performant Animations

   • Hundreds of CSS raindrops slowed UI
     
   • Optimized animations for smooth rendering
     

3. AI Logic Complexity

   • Needed useful, varied advice
     
   • Built a nested rule structure considering multiple factors
     

🎓 What I Learned

• Asynchronous JavaScript: Effective use of async/await and promises
  
• Advanced CSS: Pure CSS-based animations + responsive layouts
  
• API Integration: Handling keys, rate limits, and parsing data structures
  
• DOM Manipulation: Dynamically updating UI elements without frameworks
  
• Project Scoping: Balancing ambitious features with practical delivery
  
  • Rule-based AI as a lightweight substitute for backend
    

Built With

• css
• html
• javascript
• node.js
• python
• tailwind