DEV Community: Ali Hamza

Day 180 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 13:45:03 +0000

Hello Dev Community! 👋

It is officially Day 180 of my full-stack engineering track! Today, I designed and built the Credit-Based Pricing Page UI for my AI Website Builder platform! 🚀💳

Here is a breakdown of how I structured the pricing matrix and integrated type-safe component mapping in React & TypeScript.

🛠️ Architecture & UI Breakdown

1. Type-Safe Pricing Contracts

Defined strict TypeScript contracts to govern plan tiers, pricing calculations, credit caps, and feature lists:


typescript
interface Plan {
  id: string;
  name: string;
  price: number;
  credits: number;
  description: string;
  features: string[];
}

Day 179 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 13:39:25 +0000

Hello Dev Community! 👋

It is Day 179 of my full-stack engineering milestone journey! Today, I built the My Projects Dashboard UI for the AI Website Builder platform! 🚀🎨

Here is a breakdown of how I designed a card grid layout with dynamic live preview rendering using TypeScript and React.

🛠️ Architecture & UI Highlights

1. Miniature Live Previews via Scaled iFrames

Instead of storing static preview thumbnails, I embedded live preview previews using scaled iframe rendering directly from stored markup strings:


tsx
<iframe
  srcDoc={project.current_code}
  className="absolute top-0 left-0 w-[1200px] h-[800px] origin-top-left pointer-events-none"
  sandbox="allow-scripts allow-same-origin"
  style={{ transform: 'scale(0.25)' }}
/> const [loading, setLoading] = useState<boolean>(true);
const [projects, setProjects] = useState<Project[]>([]);

const deleteProject = async (projectId: string) => {
  console.log(projectId);
};

Day 178 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 09:36:10 +0000

Hello Dev Community! 👋

Today marks Day 178 of my full-stack journey, and I’m officially kicking off a new major project: An AI-Powered Website Builder.

The goal is to turn simple user natural language prompts into responsive web applications instantly.

🛠️ The Tech Stack

Frontend: React, TypeScript, Tailwind CSS
Core Feature: AI-driven prompt parsing to UI generation
UX focus: Minimalist, high-contrast premium UI

🖥️ Implementation Highlights (Home Page)

Today I built the Landing Hero Section. The key focus was ensuring a robust, type-safe submission flow.

Highlights:

TypeScript-driven Event Handling: Using React.FormEvent to type the submission handler.
State Orchestration: Managing loading states for the AI request lifecycle.
Guard Clauses: Ensuring authentication and non-empty inputs before hitting the API.


typescript
const onSubmitHandler = async (e: React.FormEvent) => {
  e.preventDefault();
  if (!session?.user) return toast.error("Please sign in");
  setLoading(true);
  // Simulate AI API Call
  const { data } = await api.post("/api/user/project", { initial_prompt: input });
  navigate(`/projects/${data.projectId}`);
};

Day 177 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 09:10:28 +0000

Hello Dev Community! 👋

It is officially Day 177 of my full-stack engineering track! Today, I explored TypeScript Object Modeling: Type Aliases vs Interfaces, Class Implementation Constraints, Intersection Types (&), Optional Fields (?), and readonly Immutability! 📘⚡

Here is a breakdown of how these typing rules dictate contract enforcement across TypeScript codebases.

🛠️ Technical Breakdown: Object Contracts & Type Mechanics

As captured in my code editor setup (index.ts):

1. Interface Implementation in Classes

Classes require statically known contracts. While union types cannot be directly implemented by classes, interfaces handle OOP structure cleanly:


typescript
  interface Cupsize {
    size: "small" | "large";
  }

  class Chai implements Cupsize {
    size: "small" | "large" = "small";
  }

Day 176 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 07:38:56 +0000

Hello Dev Community! 👋

It is officially Day 176 of my full-stack engineering track! Today, I explored advanced type-safety mechanics in TypeScript: Type Assertions (as), unknown vs any, and the never type for exhaustive checks! 📘⚡

Here is how these strict type features make applications bulletproof against runtime failures.

🛠️ Technical Breakdown: Advanced TypeScript Typing

As captured in my code editor setup (index.ts):

1. Type Assertions (`as` Keyword)

Overrode default compiler inference when working with DOM elements and JSON.parse() results:


typescript
  const element = document.querySelector('Element') as HTMLInputElement;
  const bookObject = JSON.parse(stringBook) as Book;

Day 175 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 07:34:12 +0000

Hello Dev Community! 👋

It is officially Day 175 of my full-stack engineering track! Today, I explored one of the most essential features for writing safe dynamic code in TypeScript: Type Narrowing & Type Guards! 📘⚡

Type narrowing allows TypeScript to deduce specific types within conditional code blocks, eliminating type ambiguity and runtime crashes.

🛠️ Technical Breakdown: Type Narrowing Techniques

As captured in my code editor setup (index.ts):

1. Discriminated Unions (Tagged Unions)

Utilized a common literal discriminator property (type) across distinct object types to cleanly handle polymorphic structures via switch statements:


typescript
  type MasalaChai = { type: 'Masala', spicelevel: number };
  type GingerChai = { type: 'Ginger', amount: number };
  type ElaichiChai = { type: 'Elaichi', packet: number };

  type Chai = MasalaChai | GingerChai | ElaichiChai;

  const makeChai = (order: Chai) => {
    switch (order.type) {
      case 'Elaichi': return "Elaichi Wali Chai";
      case 'Ginger': return "Ginger Wali Chai";
      case 'Masala': return "Masala Wali Chai";
    }
  };

Day 174 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 07:30:27 +0000

Hello Dev Community! 👋

It is officially Day 174 of my full-stack engineering journey! Today, I explored Union Types, Literal Types, and the dangers of implicit any in TypeScript! 📘⚡

Here is how flexible typing and strict status constraints work under the hood.

🛠️ Technical Breakdown: Unions, Literals & `any`

As captured in my code editor setup (index.ts):

1. Flexible Union Types & Strict String Literals

Used bitwise OR operator syntax (|) to allow multi-type assignments or restrict variables to fixed values:


typescript
  let subs: number | string = 10;
  subs = '10M'; // Valid reassignment

  let apiReq: 'pending' | 'success' | 'error' = 'pending'; // Restricts allowed status values

Day 173 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 07:25:32 +0000

Hello Dev Community! 👋

It is officially Day 173 of my full-stack engineering track! Today, I explored one of the core mechanisms that make TypeScript powerful and developer-friendly: Type Inference vs. Type Annotations! 📘⚡

Understanding when to let the TypeScript compiler infer types automatically versus declaring them explicitly makes codebases cleaner and more maintainable.

🛠️ Technical Breakdown: Inference vs. Annotations

As captured in my code editor setup (index.ts):

1. Type Inference (Implicit Typing)

TypeScript automatically determines the variable type based on its initial assigned value:


typescript
  let drink = "Chai peyo"; // Inferenced as type string
  // drink = 0; // Error: Type 'number' is not assignable to type 'string'.

Day 172 of Learning MERN Stack

Ali Hamza — Sun, 16 Aug 2026 07:21:05 +0000

Hello Dev Community! 👋

It is officially Day 172 of my full-stack engineering track! After wrapping up my MERN stack Chat Application, today marks the start of my TypeScript journey! 📘⚡

I explored the core fundamentals of type safety, type annotations, and basic primitive types (string, number, boolean).

🛠️ Technical Breakdown: Primitive Types & Function Contracts

As captured in my code editor setup (index.ts):

1. Function Parameter & Return Annotations

Defined strict type contracts on function inputs and return values to prevent runtime type mismatch bugs:


typescript
  function greet(name: string): string {
    return `Hello ${name}`;
  }

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

DEV Community: Ali Hamza

Day 180 of Learning MERN Stack

🛠️ Architecture & UI Breakdown

1. Type-Safe Pricing Contracts

Day 179 of Learning MERN Stack

🛠️ Architecture & UI Highlights

1. Miniature Live Previews via Scaled iFrames

Day 178 of Learning MERN Stack

🛠️ The Tech Stack

🖥️ Implementation Highlights (Home Page)

Day 177 of Learning MERN Stack

🛠️ Technical Breakdown: Object Contracts & Type Mechanics

1. Interface Implementation in Classes

Day 176 of Learning MERN Stack

🛠️ Technical Breakdown: Advanced TypeScript Typing

1. Type Assertions (as Keyword)

Day 175 of Learning MERN Stack

🛠️ Technical Breakdown: Type Narrowing Techniques

1. Discriminated Unions (Tagged Unions)

Day 174 of Learning MERN Stack

🛠️ Technical Breakdown: Unions, Literals & any

1. Flexible Union Types & Strict String Literals

Day 173 of Learning MERN Stack

🛠️ Technical Breakdown: Inference vs. Annotations

1. Type Inference (Implicit Typing)

Day 172 of Learning MERN Stack

🛠️ Technical Breakdown: Primitive Types & Function Contracts

1. Function Parameter & Return Annotations

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

1. Type Assertions (`as` Keyword)

🛠️ Technical Breakdown: Unions, Literals & `any`

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