WhereRoulette 💻🎰🌍

https://whereroulette.com

WhereRoulette is a web application designed to randomly select a point of interest (POI) within a specified area. This tool solves the problem of choosing a place to go when you need somewhere to meet with friends, but the specific location isn't that important.

Features

• Choose a POI randomly in a region specified by:
  • District name
  • Central point and a radius
  • Bounding box
  • The equidistance between your and your friends' locations
• Encode your location into a URL to quickly share with friends and find "somewhere in the middle."
• Quickly filter POIs for bars, restaurants, or cafes.
• Subcategory filters for when you're more picky about where you want to go.
• Access information about each POI through map interactions.
• Share the selected location via a URL with encoded data.
• SPIN THE WHEEL animation + sound effects 🎰

Powered By Open Data

The application heavily relies on open data from OpenStreetMap.

External Libraries and Resources

WhereRoulette uses several external libraries and resources:

• Nominatim for geocoding
• Overpass API for serving OpenStreetMap data
• Maplibre-gl for rendering interactive maps
• Maplibre-gl-directions for directions
• osmtogeojson for converting OpenStreetMap data to GeoJSON
• FontAwesome for icons
• Webpack for bundling assets
• Umami for privacy-focused analytics
• Postgres for storing analytics data

Development

Project Structure

The project is structured as follows:

• app/: Webapp.
• .github/: CI config.
• .env: Variables to be set as secrets.

Frontend

To serve the webapp frontend locally, navigate to the app/ directory, install the requirements, and run a development server:

cd app/
npm install
npm run serve

The site should now be served on http://localhost:8080/.

To bundle the frontend, change into the app/ directory and run the build command:

cd app/
npm install
npm run build

Deployment

Frontend - GitHub Pages

The site is hosted using GitHub Pages. A GitHub action bundles the site and deploys all content in the app/dist subdirectory for the main branch.

The site gets deployed to https://whereroulette.com.

Analytics

The site uses Umami for privacy-focused analytics.

An instance is hosted on fly.io. The configuration is defined in the analytics repository.

A DNS record is set up such that the stats.whereroulette.com subdomain points to the Umami instance.

The analytics script is available at https://stats.whereroulette.com/script.js, which is downloaded and stored in this repository in src/assets/analytics.js.

Webpack is configured to include the analytics script in the build and it is used in the index.html file.

To update the script, run the following command:

curl https://stats.whereroulette.com/script.js -o src/assets/analytics.js

Shoutouts

Thanks to Casper Ashdown (github.com/surelybassy) for creating a amazing logo!