🌤 WeatherWise.ai

Step into a smarter way to plan your day with WeatherWise.ai. This app connects to the OpenWeather API to provide current weather data tailored to your location. It integrates with OpenAI's ChatGPT for personalized activity suggestions and attire recommendations, ensuring you're perfectly prepared, no matter the weather.

👨🏻‍💻 Check out Demo

Click Here 👈

🛠 Tech Stack

E2E testing:

✅ Features

📍 Weather Data: Get real-time weather data based on your geolocation, ensuring you're always aware of what's outside.

🤖 ChatGPT Integration: Receive tailored activity suggestions and dressing advice etc. from ChatGPT, customized to the current weather conditions.

🌍 Global Reach: Whether you're in your hometown or traveling abroad, WeatherWise.ai delivers accurate weather forecasts wherever you are.

🌐 Responsive Design: Enjoy a seamless experience on any device, thanks to a responsive interface powered by Tailwindcss and Vite.

🔄 Dynamic Updates: Weather data is constantly refreshed to provide the most current information, powered by TanStack Query (React Query) for efficient data management.

📱 User-Friendly Interface: Navigate easily through a clean, modern UI that makes weather checking intuitive and quick.

🌫️ Air Quality Index: Monitor air quality and the presence of harmful pollutants in the air.

📅 5-Day Forecast: Plan ahead with a detailed 5-day weather forecast.

🌗 Theme Switch: Choose between dark or light mode of UI. By default the app will switch to the preferences set up by your system or your browsers settings.

🚀 Integration Details

OpenAI Integration  🦾

WeatherWise.ai leverages the power of OpenAI's ChatGPT to provide personalized suggestions. The integration is managed through custom endpoints and webhooks configured in Make.com, ensuring seamless communication and data processing.

Weather Data from OpenWeatherMap  🌦

The application fetches real-time weather data from the OpenWeatherMap API. Based on the user's geolocation or browser coordinates, it provides accurate and up-to-date weather information.

Air Quality Monitoring  🌬

In addition to weather data, WeatherWise.ai includes an air quality index feature. This provides users with information about the levels of various pollutants, helping them make informed decisions about outdoor activities. This data is also fetched from OpenWeatherMap API.

Theme Switch  🌗

WeatherWise.ai reads your system or browser theme preferences and adapts to it. In every moment you can switch between dark and light mode by using dedicated intuitive button placed in the header section (just right to main logo of the app).

📖 How to Use

1. Clone the Repository:

   git clone https://github.com/traczoskar/ai_weather_app.git
   cd ai_weather_app
   

2. Install Dependencies:

   npm install
   

3. Set Up Webhook with Make.com

4. Set Up Environment Variables:

   • Create a .env file in the root directory.
   • Add your OpenWeatherMap API key:

     VITE_API_KEY=your_api_key
     

   • Add your Make.com WebHook URL:

     VITE_MAKE_API_URL=your_webhook_url
     

5. Run the Application:

   npm start
   

6. To run E2E tests use the command below:

   npx cypress open
   

   • And select E2E tests to open in Chrome Browser.

To integrate OpenAI responses using Make.com, follow these steps to create a webhook:

Creating a Webhook in Make.com

1. Log in to Make.com: Go to Make.com and log in to your account.

2. Create a New Scenario:

   • Click the Create a new scenario button.
   • Click the + button to add a new module.
   • Select Webhooks from the list of applications.
   • Choose Custom webhook as the triggering event.
   • Click Add to create a new webhook.
   • Enter a name for the webhook and click Save.
   • Copy the generated webhook URL to your clipboard.

3. Configure the Webhook:

   • In the webhook settings, specify the data structure if needed.
   • Optionally, add validation for incoming data.

4. Integrate with OpenAI:

   • Add another module to your scenario for OpenAI.
   • Configure the OpenAI module to process the incoming data and generate a response.
   • Add a Webhook Response module to send the response back to the caller.

5. Test the Webhook:

   • Run the scenario and trigger the webhook by sending a request to the copied URL.
   • Ensure that the scenario processes the request and returns the expected response.

📬 Feedback

I'd love to hear your thoughts and suggestions! Feel free to open an issue or submit a pull request.