hmjatt / weather-app

An Application that let's you search weather for a specific location and toggles between Fahrenheit or Celsius. Shows a random Gif according to weather

Weather-App

Live Preview

An Application that let's you search weather for a specific location and toggles between Fahrenheit or Celsius. This project is created to practice topics like JSON, API Keys(Secrets, and Security), Async & Await in JavaScript while using Webpack as a module bundler. App shows a random Gif based on current weather of location, Enjoy!!! 😃 . Feel free to reach me at Twitter

Technologies Used

       

 

Includes the following features/components:

- Css Loader
- Asset Resource Loader
- Html Webpack Plugin
- Source Maps
- Open Weather API
- Giphy API
- Fetch API
- Async & Await
- Babel Loader
- Webpack
- Dotenv-webpack(NPM Module)

Usage

Run Dev Server (Port 5500)

```
npm install

```

```
npx webpack --watch // Clientside

```

Links to content that helped me with this project

1. The Odin Project

   • Article
   • Working With APIs
   • JSON
   • Async & Await

2. Design Inspiration

   • Dribbble(Offdesignarea)
   • Dribbble(KhoaVu)

3. Open Weather API

   • Documentation
   • API Key

4. Webpack

   • Documentation
   • Babel Loader
   • Asset Management
   • Source Maps
   • Html Webpack Plugin & Cleaning Dist Folder

5. YouTube

   • Web Dev Simplified(Build a Weather App With JavaScript)
   • James Q Quick(Securing API key)
   • Laugh a Little 😄

6. Dotenv-webpack(NPM module)

   • Documentation/Package

7. Fetch API

   • Documentation

8. Giphy API

   • Documentation

9. CSS Loader

   • Loading.io

Notes/Remarks

• I have secured the API key using environment variables created using Dotenv-webpack(NPM module). This is to prevent someone from abusing the API key. This is a security feature and adds a security layer to app. But API key is still visible in the dev tools. To secure an API properly, you should use a backend like ExpressJS.

• Fetched weather, specifically Wind Speed sometimes is inaccurate but it's coming from the API and is for educational/entertainment purposes only.

• Fetched Gif's are based on the weather of location and application fetches a random Gif according to weather fetched.

• Async & Await is a JavaScript feature that allows us to write asynchronous code in a synchronous manner. It is used to make our code more readable and easier to understand.

• I have used the Open Weather API to get the weather data. This is a free API that allows you to get the weather data for a specific location(view Documentation for details). This API has 60 requests per minute(1,000,000 requests per month) limit, view pricing information for more details.

• I have used the Giphy API to get the gifs for the weather. This is a free API that allows you to get the gifs for the weather. This API has 1,000 requests per day limit, view documentation for more details.

• As stated in the James Q Quick's video, securing an api with environment variables does add a security layer that hides API key. But there are ways around this and during a call to the API, your API key is passed as a query parameter. This means that the API key is visible in the source code in the browser(or POSTMAN).

• Using environment variables is appropriate for this project because it is a small project(no need to authenticate user for just checking the weather), API key is free and request quota is limited so someone can't abuse it. But if you were to use an API in a larger scale project(where a user needs to log in), you would need to use a more secure method of storing the API key. For example, you could use a database, JWT auth, Bcrypt Package or even a Back-end server as a wrapper as stated in James Q Quick's video to authenticate a user.

Future Changes/Fixes

• Add a Dashboard

• Add Maps

Quote

“Learning never exhausts the mind.”
— Leonardo da Vinci

📔 🖋️ 🤟