The latest articles on DEV Community by B0OGI3 (@b0ogi3). https://dev.to/b0ogi3 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3222612%2Fdd13c228-3f0e-45f7-95d5-abbfdde148c7.png https://dev.to/b0ogi3 en B0OGI3 Thu, 29 May 2025 15:05:05 +0000 https://dev.to/b0ogi3/how-i-built-a-firestore-admin-panel-to-let-clients-manage-firebase-without-breaking-the-database-3i32 https://dev.to/b0ogi3/how-i-built-a-firestore-admin-panel-to-let-clients-manage-firebase-without-breaking-the-database-3i32 <h2> Why I Built It </h2> <p>As a freelance developer, I’ve handed Firebase projects off to clients who needed to update their app’s content themselves.</p> <p>But giving them access to the Firebase Console came with major problems:</p> <ul> <li>Too technical</li> <li>No way to limit access</li> <li>One wrong click = production chaos 😬</li> </ul> <p>So I built my own solution — a clean Firestore Admin Panel that gives teams access to just what they need, with full permission control.</p> <h2> What It Does </h2> <p>🛠️ Features:</p> <ul> <li>🔄 Real-time Firestore document editing</li> <li>🔐 Role-based permissions (viewer, editor, admin)</li> <li>🧩 Dynamic collections + fields from Firestore itself</li> <li>🎨 Mantine UI v8 + Next.js App Router for clean UX</li> <li>🔥 Firebase Auth integration</li> </ul> <p>It’s a no-code dashboard for anyone who wants to give <strong>controlled</strong> Firestore access to non-devs (like clients, team leads, or content managers).</p> <h2> Stack Overview </h2> <ul> <li> <strong>Frontend</strong>: Next.js 15 (App Router)</li> <li> <strong>UI</strong>: Mantine UI v8</li> <li> <strong>Auth</strong>: Firebase Authentication</li> <li> <strong>Database</strong>: Firestore (obviously)</li> <li> <strong>Extras</strong>: Realtime updates, inline editing, dynamic modal rendering</li> </ul> <h2> The Goal </h2> <p>I wanted:</p> <ul> <li>Devs to stop giving full Console access to clients</li> <li>Non-devs to update data easily without risk</li> <li>Myself to stop getting panicked “I broke the database” messages</li> </ul> <h2> Want to Try It? </h2> <p>Here’s the demo (read-only):<br><br> 👉 <a href="https://firestore-admin-panel.vercel.app" rel="noopener noreferrer">firestore-admin-panel.vercel.app</a></p> <p>And if you want the full version or want to support my work:<br><br> 📦 <a href="https://iandavishub.gumroad.com/l/firestore-admin-panel" rel="noopener noreferrer">Gumroad Product Page</a></p> <h2> I’d Love Feedback </h2> <p>If you’ve used Firebase/Firestore:</p> <ul> <li>What other features would you expect?</li> <li>Would you give this to clients?</li> <li>Would you use it yourself?</li> </ul> <p>Drop a comment or DM me — always happy to learn and improve!</p> firebase nextjs webdev saas