https://github.com/rgdevme/firenook
Your new, simple, and fast Firebase admin panel (not a CMS... yet! 😉)! Built with React.js, it's easy to use, customizable, and extensible. Firenoook is here to make Firebase content management super easy. ✨
https://github.com/rgdevme/firenook
cms firebase plugins react typescript
Last synced: 5 months ago
JSON representation
Your new, simple, and fast Firebase admin panel (not a CMS... yet! 😉)! Built with React.js, it's easy to use, customizable, and extensible. Firenoook is here to make Firebase content management super easy. ✨
- Host: GitHub
- URL: https://github.com/rgdevme/firenook
- Owner: rgdevme
- License: mit
- Created: 2024-11-28T00:43:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-03T19:48:49.000Z (over 1 year ago)
- Last Synced: 2025-03-13T07:01:48.110Z (over 1 year ago)
- Topics: cms, firebase, plugins, react, typescript
- Language: TypeScript
- Homepage:
- Size: 629 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.mdx
- License: LICENSE
Awesome Lists containing this project
README
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
```tsx
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(
)
```
> **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.
```tsx
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 |