DEV Community

Cover image for My Journey Building FCMPanel: A Simple Dashboard for Firebase Notifications
Ramin (Moon Shadow)
Ramin (Moon Shadow)

Posted on

My Journey Building FCMPanel: A Simple Dashboard for Firebase Notifications

Hey everyone! Recently I've Just tinkering with mobile apps lately, and I wanted to share this little project I whipped up. It’s called FCMPanel, and it’s basically my way of scratching an itch that Firebase left me with. If you’ve ever tried sending push notifications to your Android or iOS apps, you know what I’m talking about — it’s not always as straightforward as it should be, especially if you’re juggling multiple apps or just starting out.

The Backstory: Why I Even Bothered Making This

So, picture this: A few months ago, I decided to dive into building native apps for both Android and iOS. Nothing fancy — just some personal projects to keep my skills sharp. But then came the part where I needed to send notifications to users who’d subscribed to my apps. You know, like “Hey, new update!” or “Check out this cool feature!”

I started looking around for an open-source admin dashboard that could handle this. Something simple where I could manage devices and blast out messages. Turns out, there’s zilch out there that’s truly beginner-friendly and free. Firebase Console does have notification tools, but man, it’s a bit overwhelming if you’re new to it.

All those settings, the JSON payloads, targeting options — it’s powerful, sure, but I spent hours fumbling around just to send a test message.

Then it hit me:

What if I have multiple apps? Like, one for fitness tracking, another for a recipe sharing thing, and maybe a third for something else. Running campaigns across all of them would mean logging into different Firebase projects, copying credentials, and hoping I don’t mess up the targeting. That sounded like a nightmare. I wanted one spot to rule them all — log in once, pick my Firebase accounts, select devices or topics, and hit send. Easy peasy.

That’s how FCMPanel was born. It’s an open-source web dashboard I built to make Firebase Cloud Messaging (FCM) less of a headache. You can check it out on GitHub:

https://github.com/moonshadowrev/FCMPanel. I kept it simple because, honestly, I hate complicated tools myself.

What Makes FCMPanel Cool (In My Humble Opinion)
I’m not gonna bore you with a sales pitch — this isn’t some enterprise software. It’s just a dashboard that does what I needed it to do. Here’s the rundown on what it offers, straight from my experience using it:

Multi-Account Magic: This was the big one for me. You can hook up multiple Firebase projects in one place. No more switching tabs or remembering which credential goes where. Just add your service accounts, and boom — you’re managing everything from a single dashboard.
Easy Notification Sending: Send messages to specific devices, topics, or even broadcast to everyone who’s subscribed. I made sure the interface is intuitive — pick your target, type your message, add some data if you want (like a link or image), and send. It’s way simpler than wrestling with Firebase’s console.
Device Tracking: It keeps tabs on registered devices. When users install your app and opt-in for notifications, their FCM tokens get stored securely. You can see who’s active, group them by app, and target campaigns accordingly.
History and Analytics: I added a section to track what you’ve sent — success rates, opens, that kind of stuff. Nothing super advanced yet, but it’s helpful for seeing if your campaigns are landing.
Security Stuff: Look, I’m paranoid about data, so I baked in JWT auth, encrypted storage for credentials, and role-based access. If you’re running this for a team, you can set up admins and viewers. Plus, it’s got rate limiting and all that to keep bad actors out.
API for Extra Fun: There’s a RESTful API if you want to integrate it programmatically. Like, register devices from your app backend or trigger sends via scripts.
It’s built with Node.js, Express, Sequelize for the database, and EJS for the frontend — nothing too bleeding-edge, just solid stuff that works. And yeah, it’s licensed under GPL-3.0, so feel free to fork and tweak it.

How I Got It Running (And How You Can Too)
Setting this up was pretty straightforward, even for me on a weekend coding binge. Here’s the quick guide, pulled from my README but with my personal tips:

Grab the Code:

Clone the repo with git clone
https://github.com/moonshadowrev/FCMPanel.git and hop into the folder.
Install Dependencies: Run npm install. I use npm, but yarn works too if that's your jam.
Set Up Your Env: Copy .env.example to .env and fill in your secrets. The big ones are your JWT secret, encryption key (make it 32 chars for AES-256), and optionally your Firebase creds. I recommend generating strong keys – don't be lazy like I almost was!
Database Magic: Fire up npm run migrate to set up the tables, then npm run seed to add default data. You'll get an admin account with username "admin" and password "Admin123!" – change that ASAP, trust me.

Launch It:

npm run dev for development (with hot reload, which saved my butt during testing) or npm start for production. Head to http://localhost:3000 and log in.
If you’re like me and want to test with real Firebase projects, enable FCM in your Google Cloud console and grab the service account JSON. Plug those into the dashboard, register some test devices (there’s an API endpoint for that), and start sending.

Pro tip:

If you’re deploying this live, use something like PM2 or Docker to keep it running smoothly. I threw it on a cheap VPS for my own use, and it’s been rock solid.

The Bumps Along the Way (Because Nothing’s Perfect)
Building this wasn’t all smooth sailing. I hit snags with encrypting the Firebase keys — turns out Node’s crypto module is picky about key lengths. And integrating the Firebase Admin SDK? I spent a whole evening debugging why messages weren’t delivering, only to realize I forgot to enable FCM in one project. Facepalm moment.

Also, the UI isn’t fancy — it’s functional with Bootstrap vibes, but if you’re a designer, contributions welcome! I focused on the backend first because that’s where the pain was.

On the plus side, using it for my own apps has been a game-changer. I ran a quick campaign across two apps last week, and it took minutes instead of hours. Feels good, man.

What’s Next? And How You Can Jump In

I’m not done yet — roadmap includes better analytics (maybe some charts), multi-language support (for my non-English speaking friends), and webhook integrations for automation. If you have ideas, hit up the issues on GitHub or start a discussion.

If this sounds useful, give it a star on GitHub — it motivates me to keep improving. Or better yet, contribute! Fork it, fix bugs, add features — I’m all for community help. Check the contributing guidelines; I tried to make them newbie-friendly.

Thanks for reading my ramble. If you’re struggling with FCM like I was, give FCMPanel a shot. It’s free, open-source, and made by someone who’s been in your shoes. Drop a comment if you try it out — I’d love to hear how it goes!

(Oh, and if you want more deets, the full docs are at https://moonshadowrev.github.io/FCMPanel/. Back to coding for me!)

Top comments (0)