DEV Community: Ali Hamza

Day 171 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 07:49:22 +0000

Hello Dev Community! 👋

It is officially Day 171 of my full-stack web development journey, and I am thrilled to announce that QuickChat (MERN Stack Real-Time Chat App) is officially complete! 🎉🚀

Today, I finalized the last key security layer: JWT Authentication & Route Protection Middleware.

🛠️ Technical Breakdown: JWT Route Security

As captured in my implementation snapshots (auth.js & utils.js):

1. Token Signature Utility (`utils.js`)

Configured a centralized token generator helper signing payload userId parameters using environment secrets:


javascript
  const generateToken = (userId) => {
    return jwt.sign({ userId }, process.env.JWT_SECRET);
  };

Day 170 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 07:34:21 +0000

Hello Dev Community! 👋

It is officially Day 170 of my full-stack engineering track! Today, I designed and implemented the backend message retrieval and chat history processing endpoints (getUserforSidebar & getMessages) for QuickChat using Node.js, Express, and MongoDB! ⚙️💬

Here is how I structured the database queries for chat retrieval and read receipts.

🛠️ Technical Breakdown: Message Fetching & Unseen Counters

As captured in my implementation snapshots (messageController.js):

1. Dynamic User Discovery & Parallel Unseen Counting

Filtered out the currently logged-in user using Mongoose $ne operator while stripping out password projections.
Used Promise.all alongside map iterations to asynchronously gather unread message counts per user card:


javascript
  const filteredUser = await user.find({ _id: { $ne: userId } }).select("-password");

  const promise = filteredUser.map(async (user) => {
    const messages = await message.find({ senderId: user._id, receiverId: userId, seen: false });
    if (messages.length > 0) {
      unseenMessages[user._id] = messages.length;
    }
  });
  await Promise.all(promise);

Day 169 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 07:30:31 +0000

Hello Dev Community! 👋

It is officially Day 169 of my full-stack engineering track! Today, I built the core messaging dispatch engine (sendMessage and markMessagesAsSeen) for my real-time chat application, QuickChat! 💬⚡

This module ties together database persistence, media hosting, and WebSocket streaming into a single controller execution flow.

🛠️ Technical Breakdown: Messaging Controller Architecture

As captured in my implementation snapshots (messageController.js):

1. Cloudinary Integration & Mongoose Persistence

Checked incoming payloads for image attachments to upload directly via Cloudinary SDK before persisting document records into MongoDB:


javascript
  if (image) {
    const uploadResponse = await cloudinary.uploader.upload(image);
    imageURL = uploadResponse.secure_url;
  }
  const newMessage = await message.create({
    senderId,
    receiverId,
    text,
    image: imageURL
  }); const receiverSocketId = getReceiverSocketId(receiverId);
if (receiverSocketId) {
  getIO().to(receiverSocketId).emit('newMessage', newMessage);
}

Day 168 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 07:24:13 +0000

Hello Dev Community! 👋

It is officially Day 168 of my full-stack web development journey! Today, I established the real-time websocket foundation and cloud storage helper utilities for QuickChat using Socket.io, Express, and Cloudinary! ⚡⚙️

🛠️ Technical Breakdown: Sockets & Cloud Infrastructure

As captured in my implementation snapshots (Screenshots 411 & 412):

1. Real-time Socket Server Module (`socket.js`)

Configured Socket.io server instance with CORS origin wildcarding.
Maintained an in-memory userSocketMap object linking authenticated userId instances to active socket session identifiers (socket.id).
Implemented live online user broadcasting (getOnlineUser) across client connections:


javascript
  io.on('connection', (socket) => {
    const userId = socket.handshake.query.userId;
    if (userId) userSocketMap[userId] = socket.id;

    io.emit('getOnlineUser', Object.keys(userSocketMap));

    socket.on('disconnect', () => {
      delete userSocketMap[userId];
      io.emit('getOnlineUser', Object.keys(userSocketMap));
    });
  });

Day 167 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 07:14:36 +0000

Hello Dev Community! 👋

It is officially Day 167 of my full-stack development journey! Today, I shifted focus to the backend of QuickChat, engineering the user authentication, verification middleware, and profile update endpoints using Node.js, Express, MongoDB, and Cloudinary! ⚙️🔑

Here is the breakdown of the backend architecture developed today.

🛠️ Technical Breakdown: Authentication & Profile Controllers

As shown in my implementation snapshots (Screenshots 407 to 410):

1. Express Routing & Protection Middleware

Encapsulated routing under userRouter.js and protected endpoints using custom protectRoute JWT middleware:


javascript
  userRouter.post('/signup', signup);
  userRouter.post('/login', Login);
  userRouter.put('/update-profile', protectRuote, updateProfile);
  userRouter.put('/check', protectRuote, checkAuth);
  **if (!profilePic) {
  updatedUser = await user.findByIdAndUpdate(userId, { bio, fullName }, { new: true });
} else {
  const upload = await cloudinary.uploader.upload(profilePic);
  updatedUser = await user.findByIdAndUpdate(
    userId, 
    { profilePic: upload.secure_url, bio, fullName }, 
    { new: true }
  ).select("-password");
}**

Day 166 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 06:50:46 +0000

Hello Dev Community! 👋

It is officially Day 166 of my full-stack engineering track! Today, I designed and implemented the active messaging canvas component (ChatContainer.jsx) for my messaging app, QuickChat! 💬📷⚡

Focusing on dynamic chat alignment, text bubble rendering, image attachments, and input controls was today's core milestone. Here is how I structured the component.

🛠️ Technical Breakdown: ChatContainer & Attachment Pipeline

As captured in my UI and VS Code setup (Screenshots):

1. Dynamic Alignment & Sender Detection

Conditioned flexbox directions based on authentication state so sender messages lock to the right while recipient messages render on the left:

javascript

Day 165 of Learning MERN Stack

Ali Hamza — Sat, 01 Aug 2026 06:45:29 +0000

Hello Dev Community! 👋

It is officially Day 165 of my full-stack engineering journey! Today, I built the Profile Update Module for my real-time messaging application, QuickChat! 👤✨

Managing user identity and profile customization is a cornerstone of any chat platform. Today's focus was on secure image processing and seamless state updates.

🛠️ Technical Breakdown: Profile Update Architecture

As captured in my UI and implementation logic (Screenshots):

1. Client-Side Image Processing

Implemented the FileReader API to read local image files and convert them into Base64 strings before sending them to the backend API.
Used URL.createObjectURL to provide an instant, high-performance visual preview of the selected profile picture before the user even hits "Save."

2. Centralized Profile Management

Integrated updateProfile within the AuthContext provider, ensuring that user identity changes propagate instantly across the entire application state.

3. Glassmorphism UI

Leveraged Tailwind's backdrop-blur and custom border utilities to maintain visual consistency with the rest of the QuickChat design language.

💡 Technical Takeaway: Why FileReader for Profile Pics?

For smaller profile images, Base64 conversion via FileReader simplifies the request structure significantly compared to multipart/form-data for simple profile updates, though both methods have their place in production systems.

🎯 Target Milestones for Tomorrow (Day 166)

Connecting the backend controller to handle Base64 image storage in MongoDB.
Preparing for real-time socket message synchronization.

💬 Let's Connect!

To my fellow MERN developers: How do you handle file uploads? Do you prefer Base64 strings or AWS S3/Cloudinary buckets for profile images? Let's discuss in the comments below!

My active repository updates daily on GitHub!
[Links in the Comments]

Day 165 completed! QuickChat's profile management is live! 🚀👤

Day 164 of Learning MERN Stack

Ali Hamza — Wed, 22 Jul 2026 10:09:39 +0000

Hello Dev Community! 👋

It is officially Day 164 of my full-stack engineering journey! Today, I designed and built the main Chat Dashboard Sidebar (Sidebar.jsx) for my real-time messaging application, QuickChat! 💬⚡

Focusing on scalable user discovery, online presence indicators, and clean state management was today's priority. Here is how I structured the component.

🛠️ Technical Breakdown: QuickChat Sidebar Component

As captured in my dashboard layout and VS Code views (Screenshots 395, 396, & 397):

1. Instant User Filtering Logic

Implemented client-side array filtering to allow instantaneous search queries across active users:


javascript
  const filterUsers = input
    ? users.filter((user) =>
        user.fullName.toLowerCase().includes(input.toLowerCase())
      )
    : users; {onlineUsers?.includes(user._id) ? (
  <span className="text-green-600 text-xs">Online</span>
) : (
  <span className="text-neutral-400 text-xs">Offline</span>
)}

Day 163 of Learning MERN Stack

Ali Hamza — Wed, 22 Jul 2026 10:00:30 +0000

Hello Dev Community! 👋

It is officially Day 163 of my full-stack engineering track! Fresh off wrapping up my full-stack e-commerce platform, today I officially kicked off my next major full-stack venture: QuickChat — a real-time messaging web application! 💬⚡

I focused on crafting a sleek, modern Dark-Themed Authentication Page (Login.jsx) and managing multi-step onboarding state. Here is a technical breakdown of today's progress.

🛠️ Deconstructing the Day 163 Onboarding Architecture

As shown in my UI layout and VS Code implementation (Screenshots 392, 393, & 394):

1. Multi-Step Onboarding Form Logic

Rather than overcrowding users with a long registration form, I designed a conditional state stepper using isDataSubmit and currState:


javascript
  const onSubmitHandler = async (event) => {
    event.preventDefault();
    if (currState === "signup" && !isDataSubmit) {
      setIsDataSubmit(true);
      return;
    }
    // Context-driven authentication triggers
    Login(currState === "signup" ? "signup" : "Login", {
      fullName, email, password, bio
    });
  };const [currState, setCurrState] = useState("signup");
const [fullName, setFullName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [bio, setBio] = useState("");
const [isDataSubmit, setIsDataSubmit] = useState(false);

Day 162 of Learning MERN Stack

Ali Hamza — Wed, 22 Jul 2026 09:52:48 +0000

Hello Dev Community! 👋

It is officially Day 162 of my full-stack engineering track! Today, I engineered the Admin Order Dashboard (Orders.jsx) for my food delivery platform, Tomato! 📦🚚⚡

With this implementation, the entire full-stack lifecycle—from customer cart checkout and Stripe payments to admin order fulfillment and status tracking—is officially 100% complete! Here is how I structured the admin management module today.

🛠️ Deconstructing the Day 162 Admin Order Dashboard

As captured in my admin UI and VS Code views (Screenshots 389, 390, & 391):

1. Centralized Order Pipeline Retrieval

Integrated an asynchronous fetchAllOrders() function fetching all database transactions via /api/order/list:


javascript
  const fetchAllOrders = async () => {
    const response = await axios.get(backendURL + "/api/order/list");
    if (response.data.success) setOrder(response.data.data);
  }; const fetchAllOrders = async () => {
  try {
    const response = await axios.get(backendURL + "/api/order/list");
    if (response.data.success) {
      setOrder(response.data.data);
    } else {
      toast.error(response.data.message);
    }
  } catch (error) { ... }
}; <select value={odr.status}>
  <option value="Food Processing">Food Processing</option>
  <option value="Out for delivery">Out for delivery</option>
  <option value="Delivered">Delivered</option>
</select>

Day 161 of Learning MERN Stack

Ali Hamza — Wed, 22 Jul 2026 09:46:11 +0000

Hello Dev Community! 👋

It is officially Day 161 of my full-stack engineering track! Today, I built the Payment Verification & User Order History Module (MyOrders.jsx) for my food delivery app, Tomato! 💳📦🚀

Handling Stripe payment callbacks and displaying dynamic order histories securely based on user authentication tokens was the primary goal today. Here is how I structured it.

🛠️ Deconstructing the Day 161 Order Management System

As shown in my UI toast popups and VS Code editor (Screenshots 387 & 388):

1. Token-Authenticated Order Fetching

Built fetchOrder() targeting the endpoint /api/order/userorders.
Passed the JWT stored in context directly through authorization headers ({ headers: { token } }) so the Express backend can decode the user ID and return only their specific transaction history.

2. Intelligent Item String Formatting

Handled array parsing for ordered items inside the table view so dishes and quantities are formatted dynamically with proper comma placement:


javascript
  {order.items.map((item, index) => {
    if (index === order.items.length - 1) {
      return item.name + " x " + item.quantity;
    } else {
      return item.name + " x " + item.quantity + ", ";
    }
  })} {order.items.map((item, index) => {
  if (index === order.items.length - 1) {
    return item.name + " x " + item.quantity;
  } else {
    return item.name + " x " + item.quantity + ", ";
  }
})} const fetchOrder = async () => {
  try {
    const response = await axios.post(
      backendURL + "/api/order/userorders",
      {},
      { headers: { token } }
    );
    if (response.data.success) {
      setData(response.data.data);
    }
  } catch (error) { ... }
};

Day 160 of Learning MERN Stack

Ali Hamza — Wed, 22 Jul 2026 09:36:55 +0000

Hello Dev Community! 👋

It is officially Day 160 of my full-stack engineering journey! Today, I engineered the Checkout / Delivery Information Module (PlaceOrder.jsx) for my food delivery platform, Tomato! 📦🚚💳

Connecting shipping address inputs directly to Stripe hosted checkout sessions requires strict route guards and dynamic state handling. Here is a breakdown of how I structured this workflow today.

🛠️ Deconstructing the Day 160 Checkout Engine

As captured in my code editor and active app screens (Screenshots 384, 385, & 386):

1. Unified State for Delivery Information

Implemented a single onChangeHandler updating controlled inputs (firstName, email, street, phone, etc.) dynamically via object computed property keys:


javascript
  const onChangeHandler = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setData(data => ({ ...data, [name]: value }));
  }; const [data, setData] = useState({
  firstName: "", lastName: "", email: "", street: "",
  city: "", state: "", zipcode: "", country: "", phone: ""
});

const onChangeHandler = (event) => {
  const name = event.target.name;
  const value = event.target.value;
  setData(data => ({ ...data, [name]: value })); useEffect(() => {
  if (!token) {
    navigate('/cart');
  } else if (getTotalCartAmount() === 0) {
    navigate('/cart');
  }
}, [token]);
};

DEV Community: Ali Hamza

Day 171 of Learning MERN Stack

🛠️ Technical Breakdown: JWT Route Security

1. Token Signature Utility (utils.js)

Day 170 of Learning MERN Stack

🛠️ Technical Breakdown: Message Fetching & Unseen Counters

1. Dynamic User Discovery & Parallel Unseen Counting

Day 169 of Learning MERN Stack

🛠️ Technical Breakdown: Messaging Controller Architecture

1. Cloudinary Integration & Mongoose Persistence

Day 168 of Learning MERN Stack

🛠️ Technical Breakdown: Sockets & Cloud Infrastructure

1. Real-time Socket Server Module (socket.js)

Day 167 of Learning MERN Stack

🛠️ Technical Breakdown: Authentication & Profile Controllers

1. Express Routing & Protection Middleware

Day 166 of Learning MERN Stack

🛠️ Technical Breakdown: ChatContainer & Attachment Pipeline

1. Dynamic Alignment & Sender Detection

Day 165 of Learning MERN Stack

🛠️ Technical Breakdown: Profile Update Architecture

1. Client-Side Image Processing

2. Centralized Profile Management

3. Glassmorphism UI

💡 Technical Takeaway: Why FileReader for Profile Pics?

🎯 Target Milestones for Tomorrow (Day 166)

💬 Let's Connect!

Day 164 of Learning MERN Stack

🛠️ Technical Breakdown: QuickChat Sidebar Component

1. Instant User Filtering Logic

Day 163 of Learning MERN Stack

🛠️ Deconstructing the Day 163 Onboarding Architecture

1. Multi-Step Onboarding Form Logic

Day 162 of Learning MERN Stack

🛠️ Deconstructing the Day 162 Admin Order Dashboard

1. Centralized Order Pipeline Retrieval

Day 161 of Learning MERN Stack

🛠️ Deconstructing the Day 161 Order Management System

1. Token-Authenticated Order Fetching

2. Intelligent Item String Formatting

Day 160 of Learning MERN Stack

🛠️ Deconstructing the Day 160 Checkout Engine

1. Unified State for Delivery Information

1. Token Signature Utility (`utils.js`)

1. Real-time Socket Server Module (`socket.js`)