shelf-cms.io commerce 💖 Firebase
Tags: cms, headless, firebase, shopping
Published: 2023-07-20 11:50:40


![Shelf logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0zm9yzq0b5z3ztk4vgl.png)

## The Promise

What if I told you, that you can transform your firebase project into a headless commerce cms for your online store or application ?

## Meet [shelf-cms.io](https://shelf-cms.io)

shelf turns your firebase resources into a headless commerce platform.


![shelf screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe0k7mhxtizvsw7vgynl.png)

![shelf screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn06zdx3egcbeeb5lgoe.png)

shelf is a **CMS** (Content Management System) essentially. Out of the box, it does this while utilizing the following resources, that are available to you

## Firestore Database
Firestore is the leading no-SQL database offering by Google. Some of it's benefits
- Very generous free tier
- pay as you go pricing above the free tier
- Infinitely scalable as opposed to other common databases

`shelf` manages your firestore to create the a fully functional commerce platform. It does so by managing the following collections:

* `/products` collection to store product information
* `/collections` collection to store collections information
* `/storefronts` collection to manage storefront data
* `/tags` collection to manage laconic key value tags (helpful for filtering)
* `/users` collection to manage users
* `/discounts` collection to manage automatic and manual(coupons) discounts
* `/orders` collection to manage orders with states and line items
* `/shipping_methods` collection to manage shipping methods
* `/images` collection to manage images
* `/payment_gateways` collection to manage configurations of payment gateways
* `/posts` collection to manage rich media
* `/notifications` collection to manage admin notifications
* `/settings` collection to manage admin notifications

Once, `shelf` manages these collections for your project, you can use them in your app however you want at client side and backend side. But, we made things simpler for you, we developed an optional client side **SDK** and a sample backend to enable payments and checkouts from a website as well as emails.

## Storage
Object Storage is a classic serverless object storage, where you can store images, files, jsons and any type of blob you can think of. `shelf` leverages storage services
1. To store images you upload and edit in the products page
2. Save compressed exported collections with embedded products
3. Save compressed exported storefronts

We support the following object storage services
### Cloudflare R2 storage
yes, we support it
### Amazon S3
yes, we support it
### Any S3 compatible service
such as minIO
### Firebase Google Storage
Of course, we also support Google storage

## Firebase Authentication (identity)
`shelf` uses firebase authorization to distinguish you as part of the admin users, that's it.

## Firebase Functions
firebase functions is Google's leading serverless functions offering. `shelf` does not require functions, but we recommend using them for the following use cases:

* Integrating payment **API** such as `PayPal standard checkout` or `stripe` at your website
* Sending Emails for events when a user onboards or when an order was confirmed or shipped.

Luckily, we have open sourced our very small and effective backend, that you can deploy in few clicks, and the best part, you can customize it to your own needs.

# Why use SHELF

There are a few reasons why we created this platform, let's discuss it

### Scalability
All of **Firebase's** products are scalable, infinitely or so scalable. As opposed, to the old paradigm were one would have to rent a single server, install a database on it and cross his fingers, that traffic will not overwhelm the server and the database.

So, amazingly enough, we are in the era of scalability, a thing that is hard to achieve with classic WordPress sites.

### Cost
You really cannot get something better. Firebase has an amazing free tier and a pay as you go (usage based) price one you surpass it. `shelf` was born to take advantage of this cost effectiveness.

You can operate a small store without ever surpassing the free tier of firebase.

### Headless
Headless Commerce systems are the present and future. By decoupling the presentation layer, i.e front-end from your business logic, you enable a lot of things:
* `Scalability` - No longer does your backend system determines the vast performance of your frontend
* `Originality` - No more do you have to deal with pre-made templates. Now you can craft your own original websites and
unique experiences to delight your customers.
* `Omnichannels` - Your backend can serve both mobile, web, desktop and IoT users

### Customizable
You can customize and craft your own commerce behaviours at the backend. `shelf` is aware to some parts of your backend (should you choose to use one).

### Speed
A lot of commerce systems have the notion of a payment gateway, for example, where they try to capture all possible features of some payment API such as `stripe`. 

In reality, users only need to use one branch of these features, costing them in speed and bugs. We provide you a solid backbone, that you can take shape the features you need.

Our `PayPal` integration is just a single file, easy to understand and change for your own needs, if changes are needed.

We do not maintain a plugin with 1000 issues at github covering all possible payment scenarios, it is an overkill. We instead, use minimalism as a guide to use only what we require.

### Versatility
* You can use `shelf` to run your offline business, just to manage your inventory, customers and orders.
* You can get started in minutes with `shelf`

### Toolings
The `shelf` platform comes with some delights to make it easy to use at client and backend side.
* `shelf-client-js-sdk` - a very simple client side js sdk, that talks to firebase with it's lightweight
REST API. It takes care of authentication, public resources like products, collections, storefronts etc..
* `shelf-client-react-hooks` - a React hook lib for shelf
* `shelf-backend` - a base backend for shelf example. Easy to customize (only 160kb)