Skip to content

App that creates a "mosaic" with all images from a user's account, using numpy to arrange smaller images into a larger one.

License

Notifications You must be signed in to change notification settings

skhaz/steamosaic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Steamosaic: Generate a mosaic of your steam account

https://steamosaic.com/

Why firestore?

The very first version was using a Google Cloud Function that takes a user as input and generates the mosaic, then returns the image. On the frontend side, I used XMLHttpRequest to request the mosaic and that's it.

But as you can see many issues can occur, like timeouts, cache misses, waste of resources, etc.

So instead of pulling out an over-engineered task queue or something like that, I changed the cloud function to subscribe to a pubsub topic and on the frontend side creates or start to listen to the firestore document that holds the needed.

On the firebase side, whenever a document is created, a function publishes on the topic that another worker function is listening.

When the worker function finishes, it writes back to the document the public URL of the mosaic image triggering the frontend to display it.

If you want to take a look more deeply, these are the main files main.py, index.js and app.js.

Deploy

Cloud Run

cd cloudrun && make deploy

Firebase Functions

cd functions && npm run deploy

Firebase Hosting

cd website && npx firebase-tools deploy --only hosting

About

App that creates a "mosaic" with all images from a user's account, using numpy to arrange smaller images into a larger one.

Topics

Resources

License

Stars

Watchers

Forks