GitMap Demo

A location based job board powered only by GitHub.

This demo explores the possibility of building a "serverless" location based app by using only GitHub's cool ability to render GeoJSON files as interactive maps, and the powerful GitHub API (Nicely wrapped by Github.js).

The map view is rendered by GitHub from a GeoJSON file stored on GitHub pages and new entries are added to it by forking and creating a pull request on behalf of the submitting user. This GitHub "serverless" architecture is powered by using GitHub itself as the app's database and writing to it by using GitHub's API directly from the user's browser.

How GitMap Works?

• The static site is served by GitHub pages.
• The main page loads a render.githubusercontent iframe which renders the map.geojson as a full screen map.
• When publishing a new entry, your browser will execute the calls to GitHub API by using Github.js
• A request will be sent by you to fork this repository.
• The map.geojson file in the forked repository will be edited to contain the new published data.
• A pull request will be created on your behalf, to merge the new data to the main repository.
• Your pull request will be manually approved and merged, and the new data will show up on the map after a few moments.

GitHub Authentication

GitHub OAuth requires that a secret client key will be used to convert the GitHub user login code to the authorization token. Since it is considered unsafe to expose this key, instead of storing it in the webapp I had set up a small hook.io hook to do the conversion using the secret key. Because this architecture is very irregular I am not sure that the impact of exposing the client secret fully apply to it, so I will reconsider this in the future.

Why is map.geojson filed with empty entries?

This was a very simple trick to avoid merge conflicts issues. Every user adds his new entry in a random line in the file, which makes the chances of two users editing the same line simultaneously very slim. (The probability might still be higher than what you would expect as in the similar case of the Birthday problem)

My first project with react