DEV Community

Md: Mahfuzar Rahman Munna
Md: Mahfuzar Rahman Munna

Posted on

How I Built a Full-Stack Forum App with React, Node.js, and Firebase Auth

📝 Introduction:

Hey developers! 👋
I'm Mahfuzar Rahman Munna, a passionate MERN Stack developer currently building real-world apps and sharing what I learn along the way. In this post, I’ll walk you through how I built a full-stack Forum application using:

React (with TailwindCSS & DaisyUI)

Express.js & MongoDB

Firebase Authentication (Email/Password + JWT)

Admin dashboard + Role-based Access

Search & Filter Tags System

Let’s dive into how I structured this project and the key features I implemented.

🧱 Project Overview:

The Forum app lets users:

🧑 Register/Login with Firebase Auth

✍️ Post and comment on questions

🔍 Filter posts by tags (like React, MongoDB, etc.)

⏫ Vote on questions and comments

🛡️ Admin can manage users (promote to admin, remove users)

🎯 Protected routes using custom Firebase JWT

⚙️ Technologies Used:

Tech Role
React Frontend Framework
Tailwind CSS Styling
DaisyUI Component UI library
Firebase Auth User Authentication + JWT
Node.js Backend Runtime
Express.js REST API
MongoDB Database

🔐 Authentication Flow (Firebase + JWT):

User signs up/logs in with Firebase (email & password).

Firebase returns a token.

This token is sent to the backend for a custom JWT to validate protected routes.

Admin status is also stored in the database and used for role-based permissions.

// Backend: Verify Firebase token, then generate custom JWT
admin.auth().verifyIdToken(firebaseToken)
.then((decodedUser) => {
   // Check user role in DB
   const customToken = jwt.sign({ email: decodedUser.email }, process.env.JWT_SECRET);
   res.send({ token: customToken });
});
Enter fullscreen mode Exit fullscreen mode

📌 Tags Filtering Logic:

Each post has a list of tags (like ["react", "mongodb"]).
I used React state to filter posts by tag:

const filteredPosts = posts.filter(post =>
   selectedTag ? post.tags.includes(selectedTag) : true
);
Enter fullscreen mode Exit fullscreen mode

With a simple UI tag button list and real-time filtering.

🛠️ Admin Panel Features:

Manage Users

Promote a user to Admin

Delete abusive users

View posts by each user

// Secure route middleware
const verifyAdmin = async (req, res, next) => {
   const user = await usersCollection.findOne({ email: req.user.email });
   if (user?.role !== "admin") return res.status(403).send("Forbidden");
   next();
};
Enter fullscreen mode Exit fullscreen mode

💡 What I Learned:
Firebase JWT integration is smooth and secure with Express.

Admin-based access control is critical for scalable apps.

Component reusability with DaisyUI made dev time super fast!

🙌 Final Words:
This project was a great learning experience for building secure and scalable full-stack apps.
If you're a beginner or junior developer trying to build portfolio projects — start with a forum or blog app! It teaches you CRUD, Auth, Routing, and Role-Based logic.

Feel free to fork the repo, ask questions, or contribute!

💬 Let’s Connect!
🐙 GitHub: @md_mahfuzarrahmanmunna

Top comments (0)