DEV Community: Md: Mahfuzar Rahman Munna

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

Md: Mahfuzar Rahman Munna — Wed, 23 Jul 2025 20:47:56 +0000

📝 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 });
});

📌 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
);

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();
};

💡 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

My Journey with the MERN Stack: From Struggle to Confidence

Md: Mahfuzar Rahman Munna — Mon, 07 Jul 2025 19:18:27 +0000

When I first started learning web development, everything felt overwhelming. HTML and CSS were okay, but when I moved into JavaScript and backend, it was a mess of frameworks, tools, and confusing tutorials. I didn't know where to focus.

That changed when I discovered the MERN stack — MongoDB, Express.js, React.js, and Node.js. At first, it still looked like too much, but once I started building real projects, everything started clicking. In this post, I’ll share how the MERN stack helped me go from beginner confusion to building full-stack apps confidently—and why I think it’s the best path for aspiring web developers like me.

🔁 Everything is JavaScript

The biggest game-changer? One language for everything.
With MERN, I didn’t need to learn different languages for backend and frontend. That was a huge relief.

I could write API routes in Node/Express and UI in React—both using JavaScript. And since MongoDB stores data in JSON-like format, working with data also felt smooth and natural.

If you're just starting out, learning one language well is better than juggling three poorly.

⚛️ React Changed My Frontend Game

Before React, I used to write raw HTML and jQuery and get lost in messy code. But React gave me a structured, component-based approach.
Now, I think in components: buttons, forms, cards, navbars—everything is reusable and modular.

I also explored tools like:

Tailwind CSS for fast UI building

React Router for navigation

Framer Motion and LottieFiles for animations

These tools made my frontend work not just easier—but actually fun.

🛠️ Express and Node Make Backend Simple (and Fast)

At first, backend development felt scary. Databases, routes, authentication, servers—it all sounded too “senior.” But Node.js and Express broke it down in a simple way.

Some of the things I learned to build:

Authentication (with Firebase and JWT)

REST APIs (CRUD operations)

Role-based access

File uploads

Protected routes with middleware

And the best part: It’s super fast and efficient. Node’s asynchronous nature makes it perfect for handling multiple users at once.

🗃️ MongoDB = Flexible and Developer-Friendly

Coming from a non-CS background, SQL syntax was hard to learn. MongoDB felt natural because:

It stores data as JSON-like documents

It doesn’t force strict schemas (great for evolving projects)

It works well with Mongoose for validation and models

I also learned how to:

Perform complex queries

Structure collections for scalability

Use MongoDB Atlas for cloud hosting

👨‍💻 Real Projects Built with MERN

I’ve used the MERN stack in many of my projects:

Skill Harbor – A course-based platform with authentication, role management, and dynamic content

JobNest – A job portal where employers and job seekers have separate dashboards

Personal Portfolio – Showcasing my resume, projects, and contact info with animations and slick design

Working on these taught me a lot—from Firebase Auth and MongoDB indexes to Git, deployment, and debugging.

🔄 What I’m Exploring Next

_I recently got a comment asking:
_
"Have you tried TypeScript across your whole MERN projects yet?"

Truth is, I haven’t. But now I’m trying to use TypeScript in my new projects. It looks hard at first, but I’ve learned that every hard thing becomes easy when you just keep going.

💬 Final Thoughts

If you're feeling lost as a beginner developer, let me tell you this:

_MERN stack gave me clarity, confidence, and creativity.
_
It helped me focus, learn fast, and build real stuff I could be proud of.

So whether you're just starting or trying to level up, try building a full project in MERN. You’ll learn more in 2 weeks than in 2 months of watching tutorials.

And if you need help or want to connect, I’m here. Let’s grow together! 💪

🙌 Let’s Talk!

Have you built anything with the MERN stack? Do you use TypeScript or prefer plain JS?
Drop your thoughts below — I’d love to reply!

Why MERN Stack is a Great Choice for Web Development

Md: Mahfuzar Rahman Munna — Sun, 06 Jul 2025 17:49:26 +0000

As a MERN stack developer, you know that MongoDB, Express.js, React.js, and Node.js form a powerful combination for building full-stack applications. But why has this stack become so popular, and why should you consider using it for your next project?

Full JavaScript Development
MERN allows you to write both frontend and backend code in JavaScript. This unifies your development environment, making it easier to handle everything from the server to the user interface. No need to learn multiple languages—JavaScript is all you need!
React.js for Rich, Interactive UIs
React has taken the frontend development world by storm, and for good reason. Its component-based architecture lets you build highly reusable and dynamic user interfaces, and its vast ecosystem (including tools like Redux for state management) makes it a perfect choice for building scalable web applications.
Node.js and Express for Fast and Scalable Backends
Node.js is known for its non-blocking, asynchronous event-driven architecture. This makes it perfect for handling multiple requests simultaneously, especially for real-time applications. Paired with Express, a minimalistic web framework for Node.js, you can easily create APIs and handle backend logic, all while benefiting from JavaScript's speed.
MongoDB for Flexible Data Storage
MongoDB is a NoSQL database that allows you to store data in a flexible, schema-less format. This is perfect for fast-moving applications where requirements evolve quickly. Whether you’re handling JSON-like documents or large datasets, MongoDB is easy to scale and integrate with your MERN stack app.
Active Community and Ecosystem
Each component of the MERN stack is backed by an active and growing community. Whether you’re troubleshooting an issue or seeking guidance on best practices, you’ll find plenty of resources, libraries, and forums to help you along the way.

Conclusion
MERN stack is an excellent choice for building modern, scalable, and fast web applications. With JavaScript powering the entire stack, it simplifies the development process, especially for full-stack developers. Whether you're building a small personal project or a large enterprise app, the MERN stack provides the tools and flexibility you need to succeed.