booua / smogbar

SMOGBar

An awesome, little menubar app for checking out air quality near you!
Download the SMOGBar!

Report Bug · Request Feature

Table of Contents

• About
  • Built With
• Getting Started
• Important Notes/Todolist
• Issues
• Contributing
• License
• Contact

About

There are many great apps for checking out air quality such as Airly, SmogSmok, however, I didn't find one that really suit my needs so I created this one, available right from your menubar (OSX) or taskbar in Windows. I wanted something easy to read, accesable and minimalistic. With help from Airly API, this is what I came up with ;)

Oh, did I mention it comes with light and dark themes? 🚀

Built With

As a source of air quality data I'm using API kindly provided by Airly. The app itself is built with:

• Electron
• React (create-react-app)
• GraphQL

Getting Started

If you'd like to set up your your project locally, here's how:

1. Get your API Key at https://developer.airly.org/docs
2. Clone the server repo

git clone https://github.com/booua/airly_widget_server

3. Install NPM packages

npm install

4. Enter your API in .env file

AIRLY_API_KEY = 'YOUR API KEY';

Don't forget to run the server ;)

5. Clone this repo

git clone https://github.com/booua/airly_widget

6. Install concurrently and wait-on

npm install concurrently wait-on

7. Install rest of the dependencies:

npm install

8. In App.js point the ApolloClient to your server:

const client = new ApolloClient({
  uri: "http://server:3000",
  cache: new InMemoryCache(),
});

9. Run dev

npm run dev

Important Notes/Todolist

• For now the app is using my own server instance with one API key limited to 100 request / day. I'm caching the data (in a nice way btw ;)) fetched from Airly and allowing it to be refreshed manually (button on top right corner) or once every 30mins. Best solution would be to allow individual users to register their accounts, but this would mean the app would be more cumbersome to use :C  

• in order to exit the app you need to use keyboard shortcut CMD + Q (Mac) or Alt + f4 (windows). It would be nice to have a context menu or a separate button  

• app is taking a location based on users' IP address, which (I KNOW I KNOW, chill) is not really precise and can lead to showing the air quality near your ISP building, not yours, but electron is forcing usage of Google API (more info here: https://www.electronjs.org/docs/api/environment-variables#google_api_key) which I don't like and don't intend to pay for.  

• fix bugs 🐛🐛🐛?

Issues

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch or Bugfix Branch (git checkout -b feature/newAmazingFeature or git checkout -b bugfix/iFixedABugWhichYouIntroducedYouMoron)
3. Commit your Changes (git commit -m 'Add some newAmazingFeature')
4. Push to the Branch (git push origin feature/newAmazingFeature)
5. Open a Pull Request
6. Give yourself a hig...self five!

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Jack Paciorek - jack.paciorek(at)gmail.com