Firenook

The free Firebase admin panel we deserve

What is Firenook?

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.

How does it work?

Th setup is pretty simple:

1. Define your firebase config
2. Initialize your root element
3. Render Firenook with any plugins you need

import { BucketsPlugin } from '@firenook/bucket'
import { Firenook, initializeFirebase } from '@firenook/core'
import { createRoot } from 'react-dom/client'
import yourFirebaseConfig from './firebase.config.json'

import '@firenook/core/index.css'
import logo from './assets/logo.png'

const config = initializeFirebase(
	yourFirebaseConfig,
	true // Tell firebase you want to run its emulators
)

const root = 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.

Plugins?

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

Plugin development

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 '..'

export const MyPlugin: FirenookPluginFunction = ({ firestore, auth, storage, app }) => {

	/** Handle stores' intializations and or whatever fits your needs */

	return {
		name: 'fn-[your-custom-name]-plugin',
		provider: () => (...),  // Context provider
		routes, // Object containing your routes
		menuItems, // Function component that renders your menu items
		header // Function component that renders your header
	}
}

export default MyPlugin

Property	Description
provider	FunctionComponent that will be rendered as context
routes	An array of objects containing a route and their corresponding JSX.Element