Unlocking the World of Weather Trends and Providing Insights You Can Trust.

View Demo  ·  Report Bug  ·  Request Feature

Preview

Links

• Demo:	https://weatherwiseapp.vercel.app/
  Backend:	https://github.com/0xabdulkhalid/weatherwise-backend

Pagespeed Insights Score

• Overall Score 99.3%, Average of Mobile and Desktop (Mobile devices score is shown below)
  Check out Pagespeed Insights to get live score

Features

• ES6 Modules: JavaScript code is organized into ES6 modules for improved maintainability.

• Webpack Bundling: Optimize resource loading by bundling JavaScript modules with Webpack.

• API Integration: The core functionality of the app is to display real-time weather data. To achieve this, you've integrated external weather APIs, which provide up-to-date weather information to your application.

• Backend Security: Enhanced security by creating a backend with Express.js to hide API keys.

• Location Search: Implemented a Geolocation API that enables users to initiate location searches through a search bar. The API returns a list of matching results, allowing users to select their desired location before retrieving weather information. This user-friendly approach streamlines the process of obtaining weather data for specific locations.

• User-Friendly Interface: Include a search bar and real-time data updates for a seamless user experience.

• Cross-Browser Compatibility: Ensure smooth performance across various web browsers.

• Responsive Design: Adapt to different screen sizes for a mobile-friendly experience.

• Code Formatting Guidelines: The project adheres to coding standards and maintains code consistency by implementing ESLint along with Prettier for code formatting.

• Automated Deployment with Vercel: Leveraging Vercel's automation capabilities, the project seamlessly handles the build process, which includes minifying HTML and CSS and bundling JavaScript with Webpack using npm scripts. These optimizations are automatically triggered by Vercel upon each GitHub commit, ensuring that the latest optimized code is deployed to production.

Built With

              

Tools Used

              

Installation

To set up the WeatherWise Application locally, follow these steps:

1. Clone the GitHub repository to your local machine:

   git clone https://github.com/0xabdulkhalid/weatherwise.git

2. Navigate to the project's directory:

   cd weatherwise

3. Install the project's dependencies using npm:

   npm install

4. Build the project to bundle JavaScript, minify HTML and CSS, and move images:

   npm run build

5. The build files can be found on dist (distribution) directory.

6. For API setup and backend configuration, please follow the instructions in the WeatherWise Backend Repository.

Acknowledgment

• Design credit goes to RocketSeat
• WeatherWise is powered by Open Meteo & WeatherAPI

Let's Connect 👋