This Weather Dashboard is a comprehensive web application that allows users to look up weather conditions by location, star their favorite locations for quick access, and receive AI-generated clothing suggestions based on the current weather conditions. It utilizes the Weather API from WeatherAPI.com and AI services from Webraft to provide tailored clothing recommendations.
- Weather Lookup by Location: Enter a location to receive the current weather conditions and a 2-day forecast.
- Star Location: Save your favorite locations for quick and easy access in future queries.
- AI Clothing Suggestions: Get suggestions on what to wear based on the current weather conditions, powered by AI.
- Text Glow Effects: Visual enhancements such as text glow on weather conditions and temperature to reflect the weather visually.
- 2 Day Weather Forecast: Stay prepared with a concise 2-day weather forecast.
- Autistic Friendly Design: The interface is designed to be accessible and friendly for individuals with autism.
- No Bullshit: Straightforward, efficient, and clutter-free user experience.
To use this dashboard, simply navigate to the deployed web application and enter a location to see the Weather
Ensure you have the following installed:
- Node.js
- npm or yarn
- Clone the repository:
git clone https://github.com/taynotfound/WeatherWeb.git
- Navigate to the project directory:
cd WeatherWeb - Update the
.env.examplewith the required Tokens. - Install dependencies:
npm install
- Start the development server:
npm run dev
- Lookup Weather: Enter a location in the search bar and submit to retrieve weather information.
- Star a Location: Click the star icon next to any location to save it to your starred locations.
- Get Clothing Suggestions: Based on the current weather displayed, click the "Get Clothing Suggestions" button to receive AI-powered advice on what to wear.
- Obtain a Weather API key from WeatherAPI.com.
- Get an AI API key for clothing suggestions from Webraft AI.
- Not Fully Responsive: Some elements may not display correctly on all devices or screen sizes.
- Environment Variables Dependency: If the
.envfile is not set up correctly, the application will not function. An error handling mechanism should be implemented to catch and report these issues effectively. - Installing on Mobile on Chrome doesnt let you go back
For support, queries, or contributions, please join my Discord server: Join Discord.
For detailed code implementations and setups, refer to the following sections in the codebase:
- Weather API Integration:
src/pages/weather.astro(startLine: 1, endLine: 160) - AI Clothing Suggestions API:
src/pages/api/clothing.ts(startLine: 1, endLine: 43) - Frontend Implementation:
src/pages/index.astro(startLine: 1, endLine: 52)
This project is licensed under the MIT License - see the LICENSE.md file for details.