• Overview
  • Screenshot
  • Features
  • Links
• My process
  • Built with
  • Implementation
  • Known issues
  • Useful resources
• Author

• Live Site Demo
• Code Repository

• Search for weather reports by location name or by clicking on the world map
• The weather report shows both the current weather and an up to 24 hour forecast
• An interactive map that can be clicked to trigger new location search
• The map can display different weather markers for Current location, Favorite locations or Current click location
• Save current location if wanted
• Save up to 8 favorite locations
• Copy and share the weather report url
• Clear and concise error handling

• Semantic HTML5 markup
• SCSS
• JavaScript
• LeafletJs
• MomentJs
• Webpack
• NodeJS
• ExpressJS
• Tailwind
• FontAwesome
• Netlify and Render for deployment

To ensure the security of API keys used for this weather app, I created a simple server API with NodeJS and ExpressJS. The client fetches data from this API, with the App component acting as a controller, receiving actions from the views and communicating with the Model to set its state based on the information received from the views. State dispatches from the Model are then triggered to the listening views.

To promote more decoupled components, the required classes are instantiated inside the index.js file, and dependencies needed for each module were injected instead of doing so inside the classes. This follows the Dependency Injection design pattern. The Observer pattern is used to communicate state updates from the Model to the Views. A PubSub-like event class registers new events and listeners, dispatching data to the listeners of events. To store the listeners, a Map was used instead of an array or object, as it performs better in scenarios involving frequent additions and removals of key-value pairs.

Weather data is retrieved from the OpenWeatherMap API, and the map tiles are obtained from the MapTiler API. The map is implemented through the LeafletJS library, allowing users to obtain weather reports based on their click coordinates. The Geolocation API is used to permit users to set a current location, which triggers a home marker to be displayed on the map if location permission is granted.

Users can favorite up to 8 locations and they can also copy and share the current report url. This feature was implemented using window.location and window.history. Whenever the report view gets activated by a user search or map click, the URL gets updated with the correct path. If an error occurs, the app displays an error view, allowing the user to receive information and return to the home view, where they can start searching for a new location and get a new weather report.

For the deployment of the app I have used Netlify for the client side and Render for the server side.

One important feature that is missing is a solid page routing solution so I would like to implement the use of some tried and tested routing library for this project in the future.

• MDN Javascript documentation
• LeafletJs documentation
• MomentJs documentation
• ExpressJs documentation
• Tailwind documentation
• Webpack documentation
• OpenWeatherMap API documentation
• FontAwesome documentation

• Github - @MariusHor
• Frontend Mentor - @MariusHor