Storage in the cloud instead of locally, or increased local storage #7
Description
Example! - open source Beyond Table Top uses firebase
Idea
My main issue is user management and storing images, what if i just had a s3 bucket for images, but stored everything else locally? Maybe make an id per localstorage session per user and store s3 images in folder under that id?
User management
Local backend options
- Local Storage
- File API - give user option to store info in a file on their computer that the can manage
Cloud backend options
Monbo DB
Try Cloudflare R2 or Images for Image storage
https://www.cloudflare.com/lp/pg-developer-platform/
From Bytes.dev
Cloudflare saved us thousands of dollars
Here’s how: We own a relatively popular site called npm trends, which serves millions of requests a day. Owning a site like that is kind of like doing an Olive Garden eat-the-menu challenge. It’s (mostly) fun and games — until the host brings you the bill.After months of spending a gluttonous amount on hosting, we finally decided to save some dough and refactored our backend to use Cloudflare Workers instead of [REDACTED] — which made me feel like both a genius and an idiot. A genius because it instantly saved us thousands of dollars and easily scales to our needs, and an idiot for not switching sooner.
One more Cloudflare hack: Using R2 object storage to store and serve user data.
It’s fast, powerful, and way cheaper than Amazon S3 because it has no egress fees and an incredible free tier. And since it’s fully compatible with S3, you can save a bunch of money by using R2 for your object storage.
Try out the free tiers — you’ll thank me later.
AWS S3
- S3 bucket for storing images
- use S3 API to get images and add them
- use cloudfront cdn? probably overkill
- S3 pricing
- DynamoDB for database?
Firebase
- Firestore (https://firebase.google.com/products/firestore)
- ⭐️ Realtime Database (https://firebase.google.com/products/realtime-database)
- (https://firebase.google.com/docs/database/web/start)
- better for apps that make a lot of tiny changes and are just a json object
- If your app will be sending a stream of tiny updates, such as in a digital whiteboard app, we recommend Realtime Database.
- use for data (just get 1GB free)
- Cloud Storage
- use for storing images (get 5GB free, or 2,500 2MB photos)
- Phone Auth
- Get 10,000 phone auth verifications a month for free
Alt Auth: Use Clerk.dev
- great for user management
- Free for 500 users
- Integrates with firebase
Google Sheets
Store data in database per user instead of locally => google sheet?
login with google account so can use google sheet as backend?
Bigger local storage options
IndexDB
Use IndexedDB to store data locally instead of LocalStorage ?
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- tutorial on how to store images and files in indexeddb - READ FIRST
https://www.npmjs.com/package/idb
- wrapper for indexdb that helps with usability
⭐️ https://localforage.github.io/localForage/#multiple-stores
- library that has localstorage like api but uses indexdb
https://jlongster.com/future-sql-web
- use sql with index db -> very fast
https://web.dev/storage-for-the-web/#how-much
Bonus: Why use a wrapper for IndexedDB #
IndexedDB is a low level API that requires significant setup before use, which can be particularly painful for storing simple data. Unlike most modern promise-based APIs, it is event based. Promise wrappers like idb for IndexedDB hide some of the powerful features but more importantly, hide the complex machinery (e.g. transactions, schema versioning) that comes with the IndexedDB library.