🌊 Inno Wave

A sleek and responsive weather application built with Next.js and Tailwind CSS.

🌦️ Features

• Real-time Weather Updates: Instant weather information at your fingertips
• Accurate Forecasts: Precision-driven weather predictions for any city
• Interactive Maps: Detailed weather mapping system
• Hourly & 5-Day Forecasts: Plan your day and week with confidence
• City Search: Find weather information for cities worldwide
• Responsive Design: Seamless experience on both desktop and mobile devices

🛠️ Tech Stack

• Next.js 15.2.0 – React framework with server-side rendering
• React 19 – JavaScript library for building user interfaces
• Tailwind CSS 4 – Utility-first CSS framework
• Framer Motion – Animation library for React
• Lucide React – Beautiful & consistent icon set

🚀 Getting Started

Prerequisites

• Node.js (18.x or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/I-Kail-I/inno-wave.git
   cd inno-wave

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables: Creaate a .env.local file in the root directory and add your API keys:

   OPENWEATHERMAP_API_KEY=your_openweathermap_api_key
   COUNTRY_LIST_API_URL=your_country_list_api_url

4. Run the development server:

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 in your browser.

📱 Application Structure

• Home Page: Introduction to Inno Wave's features and user testimonials
• Weather Dashboard: Search cities and view current weather, hourly, and 5-day forecasts
• Responsive Navigation: Mobile-friendly sidebar with smooth animations

📸 Screenshots

(Add screenshots of your application here)

🧰 Key Components

• Responsive Navbar: Includes search functionality
• Animated Sidebar: Smooth animations using Framer Motion
• Weather Cards: Dynamic icons and real-time weather data
• City Search: Autocomplete dropdown for quick city lookup
• Detailed Metrics: Comprehensive weather metrics display

🔍 API Integration

This application integrates the following APIs:

• OpenWeatherMap API: Provides weather data
• Custom API: Fetches city information

👨‍💻 Development

Available Scripts

• npm run dev – Start the development server
• npm run build – Build the application for production
• npm run start – Launch the production server
• npm run lint – Run ESLint for code quality checks

Styling

Utilizes Tailwind CSS 4 with custom fonts:

• Palanquin Dark
• Paytone One
• Belanosima
• Platypi

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License – see the LICENSE file for details.

👤 About the Developer

Created with passion by Mikail.