The free Firebase admin panel we deserve
Firenook is a react.js based admin panel for firebase that aims to provide an easy-to-use, customizable interface along with an extensible framework.
Please note that this is not a CMS, and it's far from being one (yet! 😉). My only focus right now is to provide a better admin experience the firebase admin panel.
Th setup is pretty simple:
- Define your firebase config
- Initialize your root element
- Render Firenook with any plugins you need
import{BucketsPlugin}from'@firenook/bucket'import{Firenook,initializeFirebase}from'@firenook/core'import{createRoot}from'react-dom/client'importyourFirebaseConfigfrom'./firebase.config.json'import'@firenook/core/index.css'importlogofrom'./assets/logo.png'constconfig=initializeFirebase(yourFirebaseConfig,true// Tell firebase you want to run its emulators)constroot=createRoot(document.getElementById('root')!)root.render(<Firenook{...config}logo={logo}plugins={[BucketsPlugin(config)// ... other plugins]}/>)IMPORTANT: As you can see, this does not run on a server but merely on the browser.
This is not a secure-by-default application.
If you intend to host this to use it as your admin, please follow the best practices to secure your firestore data, and be sure to hide your admin from undesired users.
Yes. Each functionality in Firenook can be traced to a plugin. This makes it easy for me to maintain the framework, and enables you to develop your own functionality!
Here is the list of plugins and their status:
| Name | Status | Description |
|---|---|---|
| Firestore | 🔥 | CRUD operation and schema management for firestore collections and records |
| Storage | 🔥 | CRUD operation and schema management for folders in a single firebase storage bucket |
| Permissions | 🚧 | CRUD operation and schema management for folders in a single firebase storage bucket |
| Pages | ❓ | CRUD operation and schema management for folders in a single firebase storage bucket |
❓ Pending, 🚧 Work in progress, 🔥 Ready
The core priciple is simple: Each plugin must render something.
Each plugin is a simple function that passes in a sigle parameter holding the Firenook app configuration.
import{FirenookPluginFunction}from'@firenook/core'import{provider,routes,menuItems,header}from'..'exportconstMyPlugin: FirenookPluginFunction=({ firestore, auth, storage, app })=>{/** Handle stores' intializations and or whatever fits your needs */return{name: 'fn-[your-custom-name]-plugin',provider: ()=>(...),// Context providerroutes,// Object containing your routesmenuItems,// Function component that renders your menu itemsheader// Function component that renders your header}}exportdefaultMyPlugin| Property | Description |
|---|---|
| provider | FunctionComponent that will be rendered as context |
| routes | An array of objects containing a route and their corresponding JSX.Element |