WeatherWise

Weatherwise is a responsive weather application that provides real-time weather updates, including current conditions, hourly forecasts, and a 10-day outlook. Built with a robust backend and a user-friendly frontend, this app is designed to deliver accurate weather data with a smooth user experience.

Table of Contents

• How to Access WeatherWise
• Features
• Tech Stack
• Installation
• Usage
• Testing
• Folder Structure
• Acknowledgments
• License

How to Access WeatherWise

WeatherWise is hosted on Vercel. You can access it here.

Features

• Real-Time Weather Data: Provides current conditions, hourly forecasts, and a 10-day forecast.
• Dynamic Icons: Displays weather icons based on current conditions.
• Caching with Redis: Reduces API calls by caching responses, improving performance.
• Rate Limiting: Prevents excessive requests to ensure fair usage.
• Responsive Design: Optimized for both desktop and mobile users.

Tech Stack

• Frontend: HTML, CSS, JavaScript (with Webpack)
• Backend: Node.js with Express.js
• Database: Redis for caching
• API: Visual Crossing Weather API
• Testing: Mocha for unit and integration tests
• Build Tool: Webpack

Installation

1. Clone the Repository:

   git clone https://github.com/Maddily/weatherwise.git
   cd weatherwise

2. Update URL Passed to fetch: Go to src/fetchData.js and change the URL passed to fetch in the template literal from 'https://wwforecast.vercel.app/' to 'http://localhost:5000/'.
3. Install Dependencies:

   npm install

4. Configure Environment Variables: Create a .env file in the root directory with your API key:

   VISUAL_CROSSING_API_KEY=your_api_key

5. Start the Express.js Server:

   npm run dev

6. Run Redis Server: If Redis is not already running, start it using:

   redis-server

7. Start the Application:

   npm start

The app should now be running at http://localhost:5000.

Usage

1. Open your browser and go to http://localhost:5000.
2. Enter a city name to view the current weather, hourly forecast, and a 10-day outlook.

Testing

To run tests, first make sure the Redis server is running, then use:

npm test

This will execute both unit and integration tests using Mocha.

Testing Details

• Unit Tests: Located in tests/unit, covering individual functions and controllers.
• Integration Tests: Located in tests/integration, ensuring that the app’s components work well together.

Folder Structure

weatherwise/
│
├── controllers/            # Application controllers
├── routes/                 # API routes
├── src/                    # Source code for frontend
├── tests/                  # Testing files
│   ├── integration/        # Integration tests
│   └── unit/               # Unit tests
│
├── utils/                  # Utility files
│   └── redis.js            # Redis configuration and cache functions
│
├── .env                    # Environment variables (not included in repo)
├── .gitignore              # Files and directories to ignore in Git
├── babel.config.js         # Babel configuration for ES6+ syntax
├── package.json            # Project dependencies and scripts
├── README.md               # Project documentation
├── server.js               # Entry point for the server
└── webpack.config.js       # Webpack configuration

Acknowledgments

Background image by Łukasz Siwy from Pixabay

License

WeatherWise by Mayada Saeed is licensed under CC BY-NC-ND 4.0