shootismoke/webapp

Sh**t! I Smoke web application

Know how many cigarettes you smoke based on the pollution of your location.

🚀 Website: https://shootismoke.app

🔨 Build it yourself

Run the following commands:

# Clone this repo
git clone https://github.com/shootismoke/webapp && cd webapp

# Install dependencies.
yarn install

# Fill in secret tokens.
cp .env.example .env.development

# Run the MongoDB daemon locally.
mongod --dbpath /path/to/my/db

# Run the app.
yarn dev

The webapp will launch at http://localhost:3000. It uses Next.js, you can check out their docs.

Note: A Docker images is in the works.

Use your own API tokens

For local development, all API secret tokens should live in the .env.development file for development, as described in the Next.js docs.

Env Variable	Description	Url	Comments
NEXT_PUBLIC_AQICN_TOKEN	World Air Quality Index, used in frontend.	http://aqicn.org/api	Required. You can use the public one in .env.example for development.
NEXT_PUBLIC_SENTRY_API_KEY	Sentry bug tracking.	https://sentry.io	Optional.
NEXT_PUBLIC_AMPLITUDE_API_KEY	Amplitude analytics	https://amplitude.com	Optional. Note: we respect DNT, and we never track PII.
BACKEND_SECRET	Secret used in headers between frontend and backend API calls. Please note that CORS is also enabled.	n/a	Required. Defaults to ssshhh! .
BACKEND_AQICN_TOKEN	World Air Quality Index, used in backend.	http://aqicn.org/api	Required. You can use the public one in .env.example for development.
BACKEND_MAILGUN_API_KEY and BACKEND_MAILGUN_DOMAIN	Credentials used for sending emails with Mailgun.	https://www.mailgun.com/	Optional. Only used in the script to send emails.
BACKEND_MONGODB_ATLAS_URI	Connection string to MongoDB.	https://www.mongodb.com/cloud/atlas	Required. Defaults to mongodb://localhost/shootismoke.

🙋 Contribute

If you find a bug, or if you have an idea for this app, please file an issue here. We really appreciate feedback and inputs!

More information on contributing here.

🔬 Tests

The codebase is covered by different types of tests:

• Unit tests: located in the src/ folder, next to the tested files, and end with .spec.ts{x}.
• Backend E2E tests: located in test/e2e/backend.
• Frontend E2E tests: located in test/cypress, using Cypress.

📰 License

GPL-3.0. See LICENSE file for more information.

⭐ Credits

Created with pride by Marcelo & Amaury.

webapp's Issues

Add Affiliate links

Share text points to dead link: shootismoke.github.io

As visible in src/frontend/localization/languages/en.json

The outdated link exists in the share text on iOS.

Thanks for the excellent app!

Add analytics

Do we keep amplitude?

Create Dockerfile

The dockerfile could be:

• based off node (probably the alpine one)
• add mongodb inside, run it
• set the correct ENV vars
• run yarn install, next build, and next start
• expose the next prot

Add F.A.Q. page

Based on same format as the mobile app.

Web application stucks when city switched

Steps to reproduce:

1. Open https://shootismoke.app/city
2. Open any place and see stats there
3. Select another city

Finally everything stucks and page stopped to respond on any actions

Chrome Version 101.0.4951.64 (Official Build) (x86_64)

I checked Safari and everything works
I wanted to find root cause of this problem, but unfortunately the project doesn't starts in web env locally

Add more unit tests!

@mdshamoon laid out the tooling around unit tests in #69 💪 We need to add more unit tests though.

If you are an external contributor, please free to post a message here and choose a couple of components to add unit tests too.

Update SearchBar to new Design

Design is here: https://www.figma.com/file/mNYulowqIWQmBw2dtZ3CpK/%5BSource-of-Truth%5D---Mobile-%26-Desktop-App?node-id=16%3A1530

React-select docs: https://react-select.com/components

Can we use the same components as in React Native?

https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/

Could we use some of the components from React Native directly in browser? I'm thinking about the Cigarettes component

cc @florenciasilva

Update TailwindCSS to 2.0

It has been released!

https://blog.tailwindcss.com/tailwindcss-v2

Change logo size

oh, I forgot to mention another difference between desktop vs. mobile: the logo is slightly bigger (160px width) on desktop then mobile (128px). I think the equivalent is 10rem… do you think you could change this later?

Improve algorithm to find the N closest cities to current location

Summary

The current algorithm for find the N closest cities to the current location is very naive. We could optimize it.

Problem Definition

If you go to the page of a city (example here), there's a ranking section, which shows the 6 closest cities to the current location, and their cigarettes information.

The current algorithm to calculate these closest cities is the following:

• We have a hardcoded list of 1000 cities, and their GPS, name and air quality information. This list can be found here: https://raw.githubusercontent.com/shootismoke/cities/master/all.json
• Gatsby loads these 1000 cities at build time:

  webapp/gatsby-node.js

  Lines 9 to 12 in dee5ac1

  	// Download cities data from our remote API.
  	const populatedCities = await fetch(
  	'https://raw.githubusercontent.com/shootismoke/cities/master/all.json'
  	).then((r) => r.json());

• The RankingSection loads all cities using useStaticQuery:

  webapp/src/components/RankingSection/RankingSection.tsx

  Line 54 in dee5ac1

  const worldCities = useStaticQuery(graphql`

• It then calculates the haversine distances between the current location and all the 1000 cities:

  webapp/src/components/RankingSection/RankingSection.tsx

  Lines 86 to 93 in dee5ac1

  	// We naively calculate the distance from our current city to all the
  	// other cities in the database.
  	const distances = worldCities
  	.map((city) => ({
  	city,
  	distance: haversine(currentCity.gps, city.gps),
  	}))
  	.filter(({ distance }) => distance !== 0) // Remove current city.

• We then sort these distances, and take the first N cities:
  

  webapp/src/components/RankingSection/RankingSection.tsx

  Lines 98 to 104 in dee5ac1

  	// We then sort the distances.
  	distances.sort((a, b) => a.distance - b.distance);
  	// We take the CITIES_TO_SHOW first cities.
  	const citiesToShow = distances
  	.slice(0, CITIES_TO_SHOW)
  	.map(({ city }) => city);

This algorithm is not optimal (O(n^2)). It's okay for 1000 cities, but there are surely better way to find the closest N cities around the current location.

Potential Solutions

• data structures such as r-tree, quad-tree or k-d tree

Add search icon in search input

Add correct icons for health tips

e.g. a mask shouldn't be shown here:

webapp/src/components/HealthSection/HealthSection.tsx

Lines 59 to 67 in e32c11f

	if (aqi <= 50) {
	return [
	<Tip imgAlt="mask" imgSrc={mask} key={1}>
	<p className="leading-6 font-extrabold text-xl">
	<span className="text-orange">Enjoy</span> your usual
	outdoor activities.
	</p>
	</Tip>,
	];

Add 5 recent blog/news articles

To show in the "Latest Stories" section

Add more tests to Cypress 🌲

We use cypress to do e2e testing. We should add more tests.

Some ideas I have:

Components:

• Search Bar
  • #43 Type inside search bar shows results from Algolia
  • #43 Click on a result takes to /city?lat=...&lng=...
• Ranking
  • #38 Click on city card goes to /city/{slug}
• AdSection
  • Can scroll right
• BlogSection
  • Can scroll
• Footer
  • #38 Correct link to FAQ

Home page:

• Test "Use my location" button (might be hard)

City page:

• Shows cigarettes after some time
• Click on weekly shows cigs * 7
• Click on monthly shows cigs * 30

Feel free to pick some tests, or add new ones you can think of!