A dynamic web application that provides real-time weather information for any location on Earth, built as part of an assignment to demonstrate REST API integration using Syncloop. Users can interact with a leaflet map to get detailed weather data for specific coordinates.
Important
Live Application 🔗
Explore the deployed version of GlobalWeatherHub here: GlobalWeatherHub Live Platform
Caution
If you encounter an error message saying "Weather data fetch failed", you may need to update the token used in the server.js file.
- Open
server.jsand locate the following line of code:const BEARER_TOKEN = 'Replace the existing token with the new one from your SyncLoop API dashboard';
The Syncloop API, which provides the weather data for this application, is included in the repository. You can download the API package by clicking the link below:
Once downloaded, please extract the contents and follow the setup instructions provided in the package to integrate the API into the application.
- Custom REST API built on Syncloop
- Returns comprehensive weather data for specified coordinates
- Authentication and endpoints are pre-configured in the application
Before running this application, make sure you have:
- Node.js (v12 or higher)
- npm (Node Package Manager)
- A modern web browser
- Clone the repository:
git clone https://github.com/coderiders22/GlobalWeatherHub.git
cd GlobalWeatherHub- Install required dependencies:
npm install
npm install express cors path- Start the application:
node server.js- Open your web browser and navigate to:
http://localhost:8000
-
Add the token to your application**: In the project, find the following line of code in server.js file:
const BEARER_TOKEN = 'Replace existing token with your token generated through the platform';
Replace
'Insert Bearer Token Here'with the token you generated from Syncloop API Dashboard.
Once you have added your token, the application will authenticate API requests using that token.
That's it! The application is now running with all necessary configurations set up in the code.
- Parameters:
lt: Latitudeln: Longitude
- Returns: Weather information from Syncloop API
- Serves the main HTML page
This project was created to fulfill the following requirements:
- Create REST APIs on Syncloop
- Develop a GUI to consume these APIs
- Integrate Leaflet JavaScript Map
- Implement functionality to:
- Capture coordinates on map click
- Fetch weather information using those coordinates
- Integration with Syncloop REST API for weather data
- Interactive map interface using Leaflet.js
- Real-time weather data fetching
- Location search functionality
- Detailed weather information including:
- Current temperature and conditions
- Atmospheric conditions (humidity, wind, pressure)
- Sun and moon information (sunrise, sunset)
- Local time display
- Weather alerts for extreme conditions
- Responsive design with glass-morphism UI
- Coordinates display for clicked locations
Here are some screenshots of the application:
-
Welcome Screen
This is the first screen that greets users.
-
Before Selecting Map Coordinates
The screen before any interaction with the map.
-
After Selecting Map Coordinates
The updated screen after selecting a location on the map.
-
Features a weather alert system for extreme conditions
-
Tablet View
A responsive view on tablet device.
-
Mobile View
A responsive view on mobile device.
-
Frontend:
- HTML5
- CSS3 with Tailwind CSS
- JavaScript
- Leaflet.js for mapping
- Font Awesome for icons
-
Backend:
- Node.js
- Express.js
- Syncloop API for weather data
- OpenStreetMap for geocoding
The application includes comprehensive error handling for:
- Invalid coordinates
- Failed API requests
- Geocoding failures
- Network issues
Manav Rai
Email: manavrai454@gmail.com
College: Punjab Engineering College, Chandigarh
For any additional questions or issues, please open an issue in the repository: https://github.com/coderiders22/GlobalWeatherHub/issues