Git Product home page Git Product logo

breethe-client's Introduction

Breethe Client

Breethe is a Progressive Web App built by simplabs. We build custom web and mobile solutions for our clients to rely on.

Improving Understanding of Air Quality Across the World

Breethe allows instant access to up to date air quality data for locations across the world. Pollution and global warming are getting worse, rather than better, and it affects everyone's daily lives - easily accessible data on how bad things are might help to raise attention and awareness. ๐ŸŒณ๐Ÿ’จ

The data is retrieved from the openaq API - be sure to check that project out!

The Stack

Build Status

Breethe is built with Glimmer.js, the lightning fast UI components library backed by Ember.js' rendering engine Glimmer VM. The data layer is based on Orbit.js and uses json:api to communicate with the server. Styles are compiled with css-blocks.

We built Breethe for maximum efficiency and performance. The main JS bundle weighs in at just over 50KB and we use server-side-prerendering to provide users with a meaningful response already while they wait for the app to start. Of course the app is functional offline, using a Service Worker and IndexedDB via Orbit.js.

This project is still in a relatively early stage and there are likely still bugs and there is definitely lots of room for even more improvement. If you run into any problems, would like to give feedback or help improve this, please reach out on github!

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone [email protected]:simplabs/breethe-client.git
  • cd breethe-client
  • yarn --pure-lockfile

Running / Development

To run the app without SSR and using the mock data you can use:

If you want to run the app behind an HTTP server (in this case Caddy - https://caddyserver.com) with real data:

  • Build the app for the production API API_HOST=https://ppm-server.herokuapp.com ember b
  • Run the SSR server in one tab with API_HOST=https://ppm-server.herokuapp.com node ssr-server.js
  • Run the Caddy server in a second tab with sudo caddy (sudo is required so caddy can bind to privileged port 443)
  • Open https://dev.breethe/ in your browser (assuming you have an entry for dev.breethe in your /etc/hosts)

This is helpful for running benchmarks

Building

  • ember build (development)
  • ember build --environment production (production)

Tests

  • ember test --server (unit tests)
  • API_HOST=http://localhost:3001 ember b && yarn test-integration (integration tests using puppeteer)

Further Reading / Useful Links

License

Breethe is developed by and ยฉ simplabs GmbH and contributors. While we invite everyone to use this for inspiration and reference, we do not grant a license to reuse or redistribute this in any form.

If you would like to use this for educational or charitable purposes, please reach out at [email protected]

breethe-client's People

Contributors

dependabot-preview[bot] avatar dependabot-support avatar ember-tomster avatar ghislaineguerin avatar jorgelainfiesta avatar marcoow avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.