DEV Community: Ali Hamza

Day 182 of Learning MERN Stack

Ali Hamza — Tue, 15 Sep 2026 11:27:11 +0000

Hello Dev Community! 👋

It is Day 182 of my full-stack engineering path! Today, I focused on implementing session-based logout mechanisms in Express.js: Single-Device Logout and Logout From All Devices! 🔐⚡

Here is a quick look at how session revocation works behind the scenes in MongoDB.

🛠️ Session Revocation Logic

1. Single Device Logout (`logout`)

Extracts the refreshToken from incoming HTTP cookies.
Verifies JWT signature and fetches the active session document where revoke: false.
Marks revoke = true in MongoDB and clears the HTTP-only cookie on the client.


javascript
export const logout = async (req, res) => {
  try {
    const incomingToken = req.cookies.refreshToken;
    if (!incomingToken) return res.status(400).json({ message: "Token not found!" });

    const decoded = jwt.verify(incomingToken, config.JWT_SECRET);
    const session = await sessionModel.findOne({ _id: decoded.sessionId, revoke: false });

    if (!session) return res.status(400).json({ message: "Invalid Token" });

    session.revoke = true;
    await session.save();

    res.clearCookie("refreshToken");
    res.status(200).json({ message: "Logout Successfully" });
  } catch (error) {
    res.status(400).json({ message: "Invalid or expired token" });
  }
};

Day 181 of Learning MERN Stack

Ali Hamza — Tue, 15 Sep 2026 11:17:11 +0000

Hello Dev Community! 👋

It is officially Day 181 of my full-stack engineering journey! Today, I dived deep into JWT Authentication security architectures, specifically focusing on Access Tokens vs. Refresh Tokens! 🔐⚡

Here is a breakdown of why two tokens are better than one and how to structure a secure authentication pipeline.

🛠️ Security Architecture Breakdown

1. Access Token (Short-Lived Authorization)

Lifetime: 15 minutes – 1 hour.
Usage: Sent in the Authorization header (Bearer <token>) on every API request.
Security Strategy: Short expiry window minimizes damage if intercepted.

2. Refresh Token (Long-Lived Session Persistence)

Lifetime: 7 – 30 days.
Usage: Kept securely (ideally in HttpOnly cookies) to request new access tokens upon expiration.
Security Strategy: Prevents users from having to log in constantly while keeping sensitive access credentials short-lived.

💡 The Token Renewal Flow

Login: Server issues both Access Token and Refresh Token.
Request: Frontend sends Access Token for API data fetching.
Expiry Handled: When Access Token expires (401 Unauthorized), an interceptor calls /api/auth/refresh.
Renewal: Server validates Refresh Token and sends a fresh Access Token back.

🎯 Target Milestones for Tomorrow (Day 182)

Implementing Axios Response Interceptors in React/TypeScript to handle token auto-refresh silently.
Storing refresh tokens securely in database documents for active session management.

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

Day 181 locked in! Access & Refresh token mechanics mastered! 🚀🔐

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

DEV Community: Ali Hamza

Day 182 of Learning MERN Stack

🛠️ Session Revocation Logic

1. Single Device Logout (logout)

Day 181 of Learning MERN Stack

🛠️ Security Architecture Breakdown

1. Access Token (Short-Lived Authorization)

2. Refresh Token (Long-Lived Session Persistence)

💡 The Token Renewal Flow

🎯 Target Milestones for Tomorrow (Day 182)

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)

1. Single Device Logout (`logout`)

1. Type Assertions (`as` Keyword)

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

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