Forem: Vikash Kumar

The “Proving” Trap: How Positioning Myself as a Strategic Architect Changed My Career

Vikash Kumar — Fri, 23 Jan 2026 17:19:00 +0000

For a long time, I operated on a clear, effective algorithm: Value = Technical Depth + Execution Speed.

In the first half of my career, this was my North Star. I took pride in being the person who could solve any bug, refactor any legacy mess, and out-code the room. I thought leadership was the natural reward for being the most technically capable person on the team. I was “proving” my worth through sheer output.

But as I moved toward the role of a Technical Architect, I realized that the skills that made me a great Senior Engineer were only half of the equation. To truly lead, I had to stop proving my technical brilliance and start positioning my impact.

Here is how I evolved my working style and thought process to bridge the gap between code and leadership.

1. From “How” to “Why”: Evolving the Mindset

In my earlier years, my focus was almost entirely on the How. I obsessed over the “perfect” implementation, the most elegant design patterns, and the latest frameworks. This was necessary for building a strong foundation, but leadership requires a wider lens.

The Evolution: I shifted my focus from technical mechanics to business intent. Before looking at a single line of code for a new feature, I began asking: “What user behavior are we trying to change?” and “Is this the most efficient path to that outcome?” *
The Result: I moved from being a “resource” who executed a roadmap to a partner who helped define it. By understanding the Why, I could offer technical solutions that were more aligned with the company’s long-term goals.

2. Shifting the Lens from Depth to Impact

Earlier in my career, I advocated for technical health by citing “cyclomatic complexity” or “clean code.” While those metrics were technically accurate, they didn’t always resonate outside of the engineering department.

The Evolution: I stopped acting as a translator and started acting as a bridge. I began discussing technical debt and architecture in terms of velocity and risk. I stopped saying “The code is messy” and started saying, “Investing in this stabilization now ensures we can launch three new features next quarter without a performance hit.”
The Result: By aligning technical expertise with the business’s heartbeat, I didn’t have to “ask” for a seat at the table. I was already vital to the conversation because I was speaking the language of outcomes.

3. Scaling Influence: From Gatekeeper to Force Multiplier

There is a certain satisfaction in being the “hero” who saves the day during a production outage. But a leader’s success isn’t measured by their own output; it’s measured by the output of their team.

The Evolution: I moved from being the “Review Police” to becoming a Force Multiplier. Instead of rewriting code to match my personal preferences, I focused on creating Architecture Decision Records (ADRs) and clear system diagrams. I focused on giving the team the context they needed to make high-quality decisions autonomously.
The Result: The team’s velocity increased because I was no longer a bottleneck. My influence scaled not because I was doing more, but because I was enabling others to do their best work.

The Takeaway

The transition from Senior Engineer to Technical Architect isn’t just a change in title; it’s an evolution of perspective.

When you focus on proving , you are being reactive — you are justifying your place. When you focus on positioning , you are being proactive — you are placing yourself at the intersection of technology and business value.

I didn’t get the Architect title because I wrote the most code that year. I got it because I stopped acting like a Senior Developer on steroids and started acting like a leader who happens to know how to code.

Stop trying to win the argument. Start trying to win the outcome.

“Have you ever felt the ‘proving’ trap in your own career? How did you break out of it?”

React 101: Quick Start Guide

Vikash Kumar — Tue, 20 Jan 2026 17:07:53 +0000

What is React?

React is a JavaScript library for building user interfaces, developed by Facebook. It allows you to create reusable UI components and efficiently update the DOM when data changes.

Key Features:

Component-Based : Build encapsulated components that manage their own state
Declarative : Design simple views for each state, React efficiently updates and renders components
Learn Once, Write Anywhere : Create web apps, mobile apps (React Native), and more

Setup & Installation

# Create a new React app
npx create-react-app my-app

# Navigate to the project
cd my-app
# Start development server
npm start

Project Structure:

my-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── App.js # Main component
│ ├── App.css # Styles
│ ├── index.js # Entry point
│ └── index.css
└── package.json

JSX Syntax

JSX (JavaScript XML) allows you to write HTML-like code in JavaScript.

// JSX Example
const element = <h1>Hello, World!</h1>;

---

// JSX with expressions
const name = "John";
const greeting = <h1>Hello, {name}!</h1>;
// JSX with attributes
const image = <img src="photo.jpg" alt="Profile" />;
// JSX with multiple elements (must have one parent)
const card = (
  <div className="card">
    <h2>Title</h2>
    <p>Description</p>
  </div>
);
// JSX Rules:
// - Use className instead of class
// - Use camelCase for attributes (onClick, onChange)
// - Close all tags (<img />, <input />)
// - Use {} for JavaScript expressions

Components

Components are the building blocks of React applications. They come in two types: Functional and Class components (modern React favors functional components).

Functional Component

// Simple functional component
function Welcome() {
  return <h1>Welcome to React!</h1>;
}

// Arrow function component
const Greeting = () => {
  return <h1>Hello!</h1>;
};
// Component with JavaScript logic
function UserCard() {
  const user = {
    name: "Alice",
    age: 25
  };
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

Class Component (Legacy)

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

Props

Props (properties) allow you to pass data from parent to child components. They are read-only.

// Parent component passing props
function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
    </div>
  );
}

// Child component receiving props
function Greeting(props) {
  return (
    <div>
      <h2>Hello, {props.name}!</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}
// Using destructuring (cleaner)
function Greeting({ name, age }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>Age: {age}</p>
    </div>
  );
}
// Default props
function Greeting({ name = "Guest", age = 0 }) {
  return <h2>Hello, {name}! Age: {age}</h2>;
}
// Props children
function Card({ children }) {
  return <div className="card">{children}</div>;
}
// Usage
<Card>
  <h2>Title</h2>
  <p>Content here</p>
</Card>

State

State is data that changes over time within a component. Use the useState hook to manage state in functional components.

import { useState } from 'react';

function Counter() {
  // Declare state variable
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}
// Multiple state variables
function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);
  return (
    <div>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Name"
      />
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email"
      />
      <input 
        type="number"
        value={age} 
        onChange={(e) => setAge(e.target.value)} 
        placeholder="Age"
      />
    </div>
  );
}
// State with objects
function UserProfile() {
  const [user, setUser] = useState({
    name: 'Alice',
    age: 25,
    email: 'alice@example.com'
  });
  const updateName = (newName) => {
    setUser({ ...user, name: newName }); // Spread operator to maintain other properties
  };
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={() => updateName('Bob')}>Change Name</button>
    </div>
  );
}

Event Handling

React events are named using camelCase and pass functions as handlers.

function EventExamples() {
  // Click event
  const handleClick = () => {
    alert('Button clicked!');
  };

 // Event with parameter
  const greet = (name) => {
    alert(`Hello, ${name}!`);
  };
  // Form submission
  const handleSubmit = (e) => {
    e.preventDefault(); // Prevent page reload
    console.log('Form submitted');
  };
  // Input change
  const handleChange = (e) => {
    console.log('Input value:', e.target.value);
  };
  // Mouse events
  const handleMouseEnter = () => {
    console.log('Mouse entered!');
  };
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <button onClick={() => greet('Alice')}>Greet Alice</button>

      <form onSubmit={handleSubmit}>
        <input onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
      <div 
        onMouseEnter={handleMouseEnter}
        onMouseLeave={() => console.log('Mouse left!')}
      >
        Hover over me
      </div>
    </div>
  );
}
// Common Events:
// onClick, onChange, onSubmit, onFocus, onBlur
// onMouseEnter, onMouseLeave, onKeyDown, onKeyUp

Conditional Rendering

Render components based on conditions using JavaScript operators.

function LoginStatus({ isLoggedIn }) {
  // Using if-else
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in</h1>;
  }
}

// Using ternary operator
function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome!</h1> : <h1>Please log in</h1>}
    </div>
  );
}
// Using && operator (for single condition)
function Notification({ hasMessages }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {hasMessages && <p>You have new messages!</p>}
    </div>
  );
}
// Conditional rendering with multiple conditions
function UserPanel({ user, isAdmin }) {
  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          {isAdmin && <button>Admin Panel</button>}
        </div>
      ) : (
        <button>Login</button>
      )}
    </div>
  );
}
// Switch-case alternative
function StatusMessage({ status }) {
  const getMessage = () => {
    switch(status) {
      case 'loading': return 'Loading...';
      case 'success': return 'Success!';
      case 'error': return 'Error occurred';
      default: return 'Unknown status';
    }
  };
  return <p>{getMessage()}</p>;
}

Lists & Keys

Render arrays of data using map() and assign unique keys to list items.

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build a project', completed: false },
    { id: 3, text: 'Deploy app', completed: true }
  ];

return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text} {todo.completed && '✓'}
        </li>
      ))}
    </ul>
  );
}
// Keys help React identify which items have changed
// Use unique IDs, not array indexes (when possible)
// More complex example
function UserList() {
  const users = [
    { id: 1, name: 'Alice', role: 'Admin' },
    { id: 2, name: 'Bob', role: 'User' },
    { id: 3, name: 'Charlie', role: 'User' }
  ];
  return (
    <div>
      {users.map((user) => (
        <div key={user.id} className="user-card">
          <h3>{user.name}</h3>
          <span>{user.role}</span>
        </div>
      ))}
    </div>
  );
}
// Filtering lists
function ProductList() {
  const products = [
    { id: 1, name: 'Laptop', price: 999, inStock: true },
    { id: 2, name: 'Phone', price: 699, inStock: false },
    { id: 3, name: 'Tablet', price: 499, inStock: true }
  ];
  return (
    <div>
      <h2>Available Products</h2>
      {products
        .filter(product => product.inStock)
        .map(product => (
          <div key={product.id}>
            <h3>{product.name}</h3>
            <p>${product.price}</p>
          </div>
        ))}
    </div>
  );
}

Hooks Overview

Hooks let you use state and other React features in functional components.

Common Hooks:

useState : Manage state
useEffect : Side effects (API calls, subscriptions)
useContext : Access context values
useRef : Access DOM elements or persist values
useMemo : Memoize expensive calculations
useCallback : Memoize functions

import { useState, useEffect, useRef, useMemo } from 'react';

// useState - covered in State section
const [count, setCount] = useState(0);
// useRef - Access DOM elements
function TextInput() {
  const inputRef = useRef(null);
  const focusInput = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
// useMemo - Optimize performance
function ExpensiveComponent({ numbers }) {
  const sum = useMemo(() => {
    console.log('Calculating sum...');
    return numbers.reduce((a, b) => a + b, 0);
  }, [numbers]); // Only recalculate when numbers change
  return <div>Sum: {sum}</div>;
}

useEffect Hook

useEffect handles side effects like data fetching, subscriptions, and DOM manipulation.

import { useState, useEffect } from 'react';

// Run on every render
function Example1() {
  useEffect(() => {
    console.log('Component rendered');
  });
}
// Run once on mount (empty dependency array)
function Example2() {
  useEffect(() => {
    console.log('Component mounted');
  }, []);
}
// Run when specific values change
function Example3() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]); // Only runs when count changes
}
// Cleanup function
function Example4() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
    // Cleanup when component unmounts
    return () => {
      clearInterval(timer);
    };
  }, []);
}
// Practical example: Fetch data from API
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    setLoading(true);

    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [userId]); // Re-fetch when userId changes
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>No user found</div>;
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}
// Document title update
function PageTitle() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Forms & Controlled Components

In React, form elements are controlled by component state.

import { useState } from 'react';

// Simple form
function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Login:', { username, password });
    // API call here
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}
// Complex form with validation
function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: '',
    country: 'USA',
    subscribe: false
  });
  const [errors, setErrors] = useState({});
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    });
  };
  const validate = () => {
    const newErrors = {};

    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    if (formData.age < 18) newErrors.age = 'Must be 18 or older';

    return newErrors;
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validate();

    if (Object.keys(newErrors).length === 0) {
      console.log('Form submitted:', formData);
      // Submit to API
    } else {
      setErrors(newErrors);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          name="name"
          value={formData.name}
          onChange={handleChange}
          placeholder="Name"
        />
        {errors.name && <span className="error">{errors.name}</span>}
      </div>
      <div>
        <input
          name="email"
          type="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Email"
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <input
          name="age"
          type="number"
          value={formData.age}
          onChange={handleChange}
          placeholder="Age"
        />
        {errors.age && <span className="error">{errors.age}</span>}
      </div>
      <div>
        <select name="country" value={formData.country} onChange={handleChange}>
          <option value="USA">USA</option>
          <option value="UK">UK</option>
          <option value="Canada">Canada</option>
        </select>
      </div>
      <div>
        <label>
          <input
            name="subscribe"
            type="checkbox"
            checked={formData.subscribe}
            onChange={handleChange}
          />
          Subscribe to newsletter
        </label>
      </div>
      <button type="submit">Register</button>
    </form>
  );
}
// Textarea example
function CommentForm() {
  const [comment, setComment] = useState('');
  return (
    <form>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        placeholder="Write a comment..."
        rows="4"
      />
      <p>Character count: {comment.length}</p>
    </form>
  );
}

Component Lifecycle

Understanding when components mount, update, and unmount.

import { useState, useEffect } from 'react';

function LifecycleDemo() {
  const [count, setCount] = useState(0);
  // 1. Component Mounts (runs once)
  useEffect(() => {
    console.log('Component mounted');

    // Cleanup when component unmounts
    return () => {
      console.log('Component will unmount');
    };
  }, []);
  // 2. Component Updates (runs when count changes)
  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]);
  // 3. Every render
  useEffect(() => {
    console.log('Component rendered');
  });
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
// Lifecycle phases:
// 1. Mounting: Component is created and inserted into the DOM
// 2. Updating: Component re-renders due to state/props changes
// 3. Unmounting: Component is removed from the DOM

Quick Reference

Component Structure

import { useState, useEffect } from 'react';

function MyComponent({ prop1, prop2 }) {
  // 1. Hooks (at the top)
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // Side effects
  }, [dependencies]);
  // 2. Event handlers
  const handleClick = () => {
    // Handle event
  };
  // 3. Helper functions
  const calculateSomething = () => {
    // Logic
  };
  // 4. Return JSX
  return (
    <div>
      <h1>{prop1}</h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}
export default MyComponent;

Common Patterns

1. Toggle State

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

2. Update Object State

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ ...user, name: 'Alice' });

3. Update Array State

const [items, setItems] = useState([]);
setItems([...items, newItem]); // Add
setItems(items.filter(item => item.id !== id)); // Remove

4. Conditional Class

<div className={isActive ? 'active' : 'inactive'}>Content</div>

5. Inline Styles

<div style={{ color: 'red', fontSize: '20px' }}>Text</div>

Best Practices

Component Names : Use PascalCase (MyComponent)
Props Naming : Use camelCase (onClick, userName)
State Updates : Never mutate state directly, use setter functions
Keys in Lists : Use unique IDs, not array indexes (when possible)
Event Handlers : Use arrow functions or bind methods
Component Size : Keep components small and focused
File Organization : One component per file
Prop Types : Use TypeScript or PropTypes for type checking

Useful Snippets

Loading State

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

Modal Toggle

const [showModal, setShowModal] = useState(false);
const openModal = () => setShowModal(true);
const closeModal = () => setShowModal(false);

Form Input Handler

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData({ ...formData, [name]: value });
};

Complete Mini-App Example

Here’s a complete todo app demonstrating multiple concepts:

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  const [filter, setFilter] = useState('all'); // all, active, completed
  // Add todo
  const addTodo = (e) => {
    e.preventDefault();
    if (input.trim()) {
      setTodos([
        ...todos,
        { id: Date.now(), text: input, completed: false }
      ]);
      setInput('');
    }
  };
  // Toggle todo completion
  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  // Delete todo
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  // Filter todos
  const getFilteredTodos = () => {
    switch(filter) {
      case 'active':
        return todos.filter(todo => !todo.completed);
      case 'completed':
        return todos.filter(todo => todo.completed);
      default:
        return todos;
    }
  };
  const filteredTodos = getFilteredTodos();
  const activeCount = todos.filter(t => !t.completed).length;
  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      {/* Add Todo Form */}
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="What needs to be done?"
        />
        <button type="submit">Add</button>
      </form>
      {/* Filter Buttons */}
      <div className="filters">
        <button 
          onClick={() => setFilter('all')}
          className={filter === 'all' ? 'active' : ''}
        >
          All
        </button>
        <button 
          onClick={() => setFilter('active')}
          className={filter === 'active' ? 'active' : ''}
        >
          Active
        </button>
        <button 
          onClick={() => setFilter('completed')}
          className={filter === 'completed' ? 'active' : ''}
        >
          Completed
        </button>
      </div>
      {/* Todo List */}
      <ul className="todo-list">
        {filteredTodos.length === 0 ? (
          <li className="empty">No todos to display</li>
        ) : (
          filteredTodos.map(todo => (
            <li key={todo.id} className={todo.completed ? 'completed' : ''}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
              />
              <span>{todo.text}</span>
              <button onClick={() => deleteTodo(todo.id)}>Delete</button>
            </li>
          ))
        )}
      </ul>
      {/* Footer */}
      <div className="footer">
        <span>{activeCount} items left</span>
      </div>
    </div>
  );
}
export default TodoApp;

Next Steps

After mastering these basics:

React Router — Navigation and routing
Context API — Global state management
Redux/Zustand — Advanced state management
Custom Hooks — Reusable logic
Performance Optimization — memo, useMemo, useCallback
TypeScript — Type safety
Testing — Jest and React Testing Library
API Integration — Axios, Fetch API, React Query
Styling — CSS Modules, Styled Components, Tailwind
Build Tools — Vite, Webpack

Resources:

Happy Coding! 🚀

Last Updated: January 17, 2026

React + Redux Toolkit QuickStart Guide

Vikash Kumar — Wed, 31 Dec 2025 03:31:09 +0000

This guide gives you a concise Redux overview, a fresh React app setup, and practical examples of using Redux Toolkit in React — including installation steps.

Why Redux (and why Redux Toolkit)

Redux is a predictable state container for Typescript/JavaScript apps. It centralizes shared state in a single store and uses pure reducers to handle updates.

Core pieces

Store: the single source of truth for app state
Actions: plain objects describing “what happened”
Reducers: pure functions that update state based on actions
Dispatch: sends actions to the store
Selectors: read from the store (often memoized)
Middleware: intercept actions for side effects (logging, async, etc.)

Redux Toolkit (RTK) is the official, recommended way to write Redux logic:

APIs included: configureStore, createSlice, createAsyncThunk
Eliminates boilerplate and enforces good defaults
Uses Immer under the hood for safe immutable updates with mutable-looking code
Built-in dev tools compatibility

When to use Redux:

You have shared state across many components (auth, user prefs, cached lists)
You need predictable state transitions and time-travel debugging
You want a single place for async data fetching/caching and error handling

If your app is small or state is mostly local, React state or Context might be enough. For server data, consider RTK Query (Redux Toolkit’s data fetching solution).

Set up a sample React application

Prerequisites

Node.js 18+ (recommended)
npm 9+ (or yarn/pnpm)

Create a new project with Vite

TypeScript (recommended):

npm create vite@latest my-redux-app -- --template react-ts
cd my-redux-app
npm install

JavaScript:

npm create vite@latest my-redux-app -- --template react
cd my-redux-app
npm install

Install Redux Toolkit and React Redux:

npm install @reduxjs/toolkit react-redux

Start the dev server:

npm run dev

Open the URL printed in the terminal (typically http://localhost:5173)..)

Using Redux Toolkit in React

Below are minimal, production-ready patterns using Redux Toolkit.

1) Create a slice (src/features/counter/counterSlice.ts or .js)

TypeScript version:

import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';

// Example async thunk
export const fetchInitial = createAsyncThunk<number>(
  'counter/fetchInitial',
  async () => {
    // Mock API call; replace with real endpoint
    await new Promise((r) => setTimeout(r, 300));
    return 5;
  }
);
export interface CounterState {
  value: number;
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
  error?: string;
}
const initialState: CounterState = {
  value: 0,
  status: 'idle',
};
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value += 1; // safe with Immer
    },
    decrement(state) {
      state.value -= 1;
    },
    addByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload;
    },
    reset(state) {
      state.value = 0;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchInitial.pending, (state) => {
        state.status = 'loading';
        state.error = undefined;
      })
      .addCase(fetchInitial.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.value = action.payload;
      })
      .addCase(fetchInitial.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});
export const { increment, decrement, addByAmount, reset } = counterSlice.actions;
export default counterSlice.reducer;

JavaScript version:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchInitial = createAsyncThunk('counter/fetchInitial', async () => {
  await new Promise((r) => setTimeout(r, 300));
  return 5;
});
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, status: 'idle' },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    addByAmount: (state, action) => { state.value += action.payload; },
    reset: (state) => { state.value = 0; },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchInitial.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchInitial.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.value = action.payload;
      })
      .addCase(fetchInitial.rejected, (state, action) => {
        state.status = 'failed';
      });
  },
});
export const { increment, decrement, addByAmount, reset } = counterSlice.actions;
export default counterSlice.reducer;

2) Configure the store (src/store.ts or .js)

TypeScript:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});
// Infer types
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

JavaScript:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: { counter: counterReducer },
});

3) Typed hooks (optional but recommended for TS)

src/hooks.ts:

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

4) Wrap your app with the Provider (src/main.tsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

JavaScript (main.jsx) is similar.

5) Use Redux in a component (src/features/counter/Counter.tsx)

import { useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../hooks';
import { increment, decrement, addByAmount, reset, fetchInitial } from './counterSlice';

export default function Counter() {
  const value = useAppSelector((state) => state.counter.value);
  const status = useAppSelector((state) => state.counter.status);
  const dispatch = useAppDispatch();
  const [amount, setAmount] = useState('3');
  return (
    <div style={{ fontFamily: 'system-ui', lineHeight: 1.6 }}>
      <h2>Counter: {value}</h2>
      <p>Status: {status}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())} style={{ marginLeft: 8 }}>-1</button>
      <button onClick={() => dispatch(reset())} style={{ marginLeft: 8 }}>Reset</button>
      <div style={{ marginTop: 12 }}>
        <input
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          style={{ width: 60 }}
        />
        <button onClick={() => dispatch(addByAmount(Number(amount) || 0))} style={{ marginLeft: 8 }}>
          Add by amount
        </button>
      </div>
      <div style={{ marginTop: 12 }}>
        <button onClick={() => dispatch(fetchInitial())}>Fetch initial</button>
      </div>
    </div>
  );
}

Add to ** App.tsx:**

import Counter from './features/counter/Counter';

export default function App() {
  return (
    <main style={{ padding: 24 }}>
      <h1>My Redux App</h1>
      <Counter />
    </main>
  );
}

Async example: fetching posts with createAsyncThunk

src/features/posts/postsSlice.ts:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchPosts = createAsyncThunk('posts/fetch', async () => {
  const res = await fetch('https://server.vikash.com/posts?_limit=5');
  if (!res.ok) throw new Error('Failed to fetch');
  return (await res.json()) as Array<{ id: number; title: string }>;
});
const postsSlice = createSlice({
  name: 'posts',
  initialState: { items: [], status: 'idle', error: undefined } as {
    items: Array<{ id: number; title: string }>;
    status: 'idle' | 'loading' | 'succeeded' | 'failed';
    error?: string;
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => { state.status = 'loading'; state.error = undefined; })
      .addCase(fetchPosts.fulfilled, (state, action) => { state.status = 'succeeded'; state.items = action.payload; })
      .addCase(fetchPosts.rejected, (state, action) => { state.status = 'failed'; state.error = action.error.message; });
  },
});
export default postsSlice.reducer;

Add to store:

import postsReducer from './features/posts/postsSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    posts: postsReducer,
  },
});

Use in a component:

import { useAppDispatch, useAppSelector } from '../../hooks';
import { fetchPosts } from './postsSlice';

export default function Posts() {
  const { items, status, error } = useAppSelector((s) => s.posts);
  const dispatch = useAppDispatch();
  return (
    <section>
      <h2>Posts</h2>
      <button disabled={status === 'loading'} onClick={() => dispatch(fetchPosts())}>
        {status === 'loading' ? 'Loading...' : 'Load posts'}
      </button>
      {error && <p style={{ color: 'crimson' }}>{error}</p>}
      <ul>
        {items.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </section>
  );
}

Testing a slice quickly (Vitest)

With Vite, Vitest is easy to add:

npm install -D vitest @testing-library/react @testing-library/jest-dom

Example test src/features/counter/counterSlice.test.ts:

import reducer, { increment, decrement, addByAmount } from './counterSlice';

test('counter reducers', () => {
  const s = { value: 0, status: 'idle' };
  expect(reducer(s, increment())).toMatchObject({ value: 1 });
  expect(reducer(s, decrement())).toMatchObject({ value: -1 });
  expect(reducer(s, addByAmount(10))).toMatchObject({ value: 10 });
});

Run tests:

npx vitest run

Common pitfalls & troubleshooting

State appears unchanged: ensure you used reducers from createSlice and dispatched the correct action.
useSelector returns undefined: verify the reducer key in configureStore matches usage (e.g., state.counter).
Async thunk “pending” forever: check network errors and ensure you return a value from the thunk.
DevTools not showing actions: confirm you’re using configureStore (it enables Redux DevTools by default in dev).
TypeScript types not inferred: export RootState and AppDispatch, and use typed hooks.

Next steps

RTK Query for data fetching/caching with normalized state and auto hooks.
Persisted state (redux-persist) for auth/session.
Feature-based folder structure (src/features/*) to keep slices and components together.
Advanced selectors with Reselect for derived state.
Add ESLint + Prettier for consistent code quality.

Quick reference

Install: npm i @reduxjs/toolkit react-redux
Slice: createSlice({ name, initialState, reducers })
Async: createAsyncThunk(type, asyncFn)
Store: configureStore({ reducer })
Provider:
Hooks: useSelector, useDispatch (typed variants recommended)

Time and Space Complexity — Not so complex

Vikash Kumar — Sun, 21 Dec 2025 18:39:15 +0000

Time and Space Complexity — Not so complex

Overview

Time and space complexity are measures used to analyze the efficiency of algorithms. They help us understand how an algorithm’s resource usage grows as the input size increases.

Why Is This Important?

Performance: Efficient algorithms run faster and use less memory.
Scalability: Good complexity ensures programs work well with large inputs.
Optimization: Helps choose the best algorithm for a problem.
Predictability: Allows estimation of resource needs before deployment.

Time Complexity

Time complexity describes how the runtime of an algorithm increases with input size (n). It is commonly expressed using Big O notation.

Common Time Complexities

O(1): Constant time (e.g., accessing an array element)
O(log n): Logarithmic time (e.g., binary search)
O(n): Linear time (e.g., traversing a list)
O(n log n): Linearithmic time (e.g., merge sort)
O(n²): Quadratic time (e.g., bubble sort)
O(2^n): Exponential time (e.g., recursive Fibonacci)

Example: Linear Search

public boolean linearSearch(int[] arr, int target) {
    for (int i : arr) {
        if (i == target) {
            return true;
        }
    }
    return false;
}
// Time Complexity: O(n)

Example: Binary Search

public boolean binarySearch(int[] arr, int target) {
    int left = 0, right = arr.length - 1;
    while (left <= right) {
        int mid = left + (right - left) / 2;
        if (arr[mid] == target) {
            return true;
        } else if (arr[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return false;
}
// Time Complexity: O(log n)

Space Complexity

Space complexity measures the amount of memory an algorithm uses as input size grows.

Common Space Complexities

O(1): Constant space (e.g., variable assignment)
O(n): Linear space (e.g., storing an array)
O(n²): Quadratic space (e.g., 2D matrix)

Example: Storing Results

public int[] storeResults(int[] arr) {
    int[] results = new int[arr.length];
    for (int i = 0; i < arr.length; i++) {
        results[i] = arr[i] * 2;
    }
    return results;
}
// Space Complexity: O(n)

Big O Notation Summary Table

Visual Guide

This table shows how different complexities grow as input size increases

This flowchart visually compares how different Big O complexities grow as input size increases.

Conclusion

Understanding time and space complexity helps you write efficient, scalable, and reliable code. Use Big O notation to compare algorithms and make informed decisions.

QPID — A simple story

Vikash Kumar — Thu, 04 Dec 2025 19:50:16 +0000

QPID — A simple story

What is QPID?

Apache Qpid is an open-source messaging system that implements the Advanced Message Queuing Protocol (AMQP). It enables applications to communicate by sending messages between distributed systems, supporting reliable, asynchronous, and scalable messaging.

Usage of QPID

Enterprise Messaging: Integrate applications across platforms using message queues.
Event-Driven Architectures: Decouple producers and consumers for scalable event processing.
Microservices Communication: Enable reliable communication between microservices.
Data Streaming: Transport data streams between services or systems.

Basic Setup of QPID

Install Qpid Broker:

Download from Apache Qpid website.
Install using package manager or binaries.

2. Start the Broker:

Run the broker service (e.g., qpid-server or qpidd).

3. Configure Broker:

Edit configuration files for ports, authentication, and queues.

Validate Setup

Check broker status: systemctl status qpidd or ps aux | grep qpidd
Connect using Qpid client tools or AMQP libraries.
Send and receive a test message.

How to Use QPID

Use AMQP client libraries (Java, Python, C++, etc.) to connect to the broker.
Create queues and topics for message routing.
Publish and consume messages using the client API.

Example Use Case: Order Processing System

Scenario

An e-commerce platform uses QPID to manage order processing. When a customer places an order, the order service publishes a message to a QPID queue. Multiple backend services (inventory, payment, shipping) consume messages from this queue to process the order asynchronously and reliably.

QPID Broker Configuration Example

qpid.conf (sample)

auth=yes
port=5672
log-enable=info+
queue-pattern=order-queue;max-count=10000

Python Producer Example

import qpid.messaging

connection = qpid.messaging.Connection("localhost:5672")
connection.open()
session = connection.session()
sender = session.sender("order-queue")
order = {"order_id": 123, "item": "Laptop", "quantity": 1}
sender.send(qpid.messaging.Message(content=str(order)))
connection.close()

Python Consumer Example

import qpid.messaging

connection = qpid.messaging.Connection("localhost:5672")
connection.open()
session = connection.session()
receiver = session.receiver("order-queue")
message = receiver.fetch(timeout=10)
print("Received order:", message.content)
connection.close()

Real World Benefits

Scalability: Multiple consumers can process orders in parallel.
Reliability: Orders are not lost if a service is temporarily unavailable.
Decoupling: Services operate independently, improving maintainability.
Auditability: Message logs provide a trace of all processed orders.

QPID Order Processing Flow Diagram

Legend:

The Order Service publishes messages to the QPID Broker.
Multiple backend services consume messages from the broker and process them independently.

Best Practices

Secure Communication: Use TLS/SSL for broker connections.
Authentication: Enable user authentication and access control.
Queue Management: Monitor and manage queue sizes to prevent overflow.
Error Handling: Implement robust error handling and message retries.
Resource Monitoring: Track broker performance and resource usage.
Version Compatibility: Ensure client and broker versions are compatible.

For more details, visit the Apache Qpid documentation.

Spring Boot Quick Start Guide

Vikash Kumar — Mon, 24 Nov 2025 02:21:10 +0000

A practical guide to building a production-ready Spring Boot REST API with CRUD operations, database integration, monitoring, and deployment.

Project Setup
REST CRUD Implementation
Database Layer with JPA
Actuator APIs
Logging & Configuration
Deploy & Test

1. Project Setup

Using Spring Initializr

Visit start.spring.io or use CLI:

curl https://start.spring.io/starter.tgz \
  -d dependencies=web,data-jpa,h2,actuator,validation,lombok \
  -d type=maven-project \
  -d javaVersion=21 \
  -d bootVersion=3.2.0 \
  -d groupId=com.gyan \
  -d artifactId=education-app \
  -d name=EducationApp \
  -d packageName=com.gyan.education | tar -xzvf -

Project Structure

education-app/
├── src/main/java/com/gyan/education/
│ ├── EducationAppApplication.java
│ ├── controller/
│ │ └── StudentController.java
│ ├── model/
│ │ └── Student.java
│ ├── repository/
│ │ └── StudentRepository.java
│ ├── service/
│ │ ├── StudentService.java
│ │ └── StudentServiceImpl.java
│ └── exception/
│ ├── ResourceNotFoundException.java
│ └── GlobalExceptionHandler.java
├── src/main/resources/
│ ├── application.yml
│ └── logback-spring.xml
└── pom.xml

Key Dependencies (pom.xml)

<dependencies>
    <!-- Spring Boot Starters -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>

    <!-- Database -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- Utils -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

2. REST CRUD Implementation

Entity Model

package com.gyan.education.model;

import jakarta.persistence.*;
import jakarta.validation.constraints.*;
import lombok.*;
import org.hibernate.annotations.CreationTimestamp;
import org.hibernate.annotations.UpdateTimestamp;
import java.time.LocalDateTime;

@Entity
@Table(name = "students")
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Student {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @NotBlank(message = "Name is required")
    @Size(min = 2, max = 100)
    private String name;

    @Email(message = "Invalid email format")
    @NotBlank(message = "Email is required")
    @Column(unique = true)
    private String email;

    @NotNull(message = "Grade is required")
    @Min(value = 1, message = "Grade must be between 1 and 12")
    @Max(value = 12, message = "Grade must be between 1 and 12")
    private Integer grade;

    @Column(name = "enrollment_date")
    private LocalDateTime enrollmentDate;

    @CreationTimestamp
    @Column(name = "created_at", updatable = false)
    private LocalDateTime createdAt;

    @UpdateTimestamp
    @Column(name = "updated_at")
    private LocalDateTime updatedAt;
}

Repository Layer

package com.gyan.education.repository;

import com.gyan.education.model.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
import java.util.Optional;

@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
    Optional<Student> findByEmail(String email);
    List<Student> findByGrade(Integer grade);
    boolean existsByEmail(String email);
}

Service Layer

package com.gyan.education.service;

import com.gyan.education.model.Student;
import java.util.List;

public interface StudentService {
    Student createStudent(Student student);
    Student getStudentById(Long id);
    List<Student> getAllStudents();
    Student updateStudent(Long id, Student student);
    void deleteStudent(Long id);
    List<Student> getStudentsByGrade(Integer grade);
}

package com.gyan.education.service;

import com.gyan.education.exception.ResourceNotFoundException;
import com.gyan.education.model.Student;
import com.gyan.education.repository.StudentRepository;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.time.LocalDateTime;
import java.util.List;

@Service
@RequiredArgsConstructor
@Slf4j
@Transactional
public class StudentServiceImpl implements StudentService {

    private final StudentRepository studentRepository;

    @Override
    public Student createStudent(Student student) {
        log.info("Creating student with email: {}", student.getEmail());

        if (studentRepository.existsByEmail(student.getEmail())) {
            throw new IllegalArgumentException("Email already exists: " + student.getEmail());
        }

        student.setEnrollmentDate(LocalDateTime.now());
        Student savedStudent = studentRepository.save(student);

        log.info("Student created successfully with ID: {}", savedStudent.getId());
        return savedStudent;
    }

    @Override
    @Transactional(readOnly = true)
    public Student getStudentById(Long id) {
        log.debug("Fetching student with ID: {}", id);
        return studentRepository.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("Student not found with ID: " + id));
    }

    @Override
    @Transactional(readOnly = true)
    public List<Student> getAllStudents() {
        log.debug("Fetching all students");
        return studentRepository.findAll();
    }

    @Override
    public Student updateStudent(Long id, Student student) {
        log.info("Updating student with ID: {}", id);

        Student existingStudent = getStudentById(id);
        existingStudent.setName(student.getName());
        existingStudent.setEmail(student.getEmail());
        existingStudent.setGrade(student.getGrade());

        Student updatedStudent = studentRepository.save(existingStudent);
        log.info("Student updated successfully with ID: {}", id);

        return updatedStudent;
    }

    @Override
    public void deleteStudent(Long id) {
        log.info("Deleting student with ID: {}", id);

        Student student = getStudentById(id);
        studentRepository.delete(student);

        log.info("Student deleted successfully with ID: {}", id);
    }

    @Override
    @Transactional(readOnly = true)
    public List<Student> getStudentsByGrade(Integer grade) {
        log.debug("Fetching students by grade: {}", grade);
        return studentRepository.findByGrade(grade);
    }
}

Controller Layer

package com.gyan.education.controller;

import com.gyan.education.model.Student;
import com.gyan.education.service.StudentService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/api/v1/students")
@RequiredArgsConstructor
@Slf4j
public class StudentController {

    private final StudentService studentService;

    @PostMapping
    public ResponseEntity<Student> createStudent(@Valid @RequestBody Student student) {
        log.info("POST /api/v1/students - Creating student");
        Student created = studentService.createStudent(student);
        return ResponseEntity.status(HttpStatus.CREATED).body(created);
    }

    @GetMapping("/{id}")
    public ResponseEntity<Student> getStudent(@PathVariable Long id) {
        log.debug("GET /api/v1/students/{}", id);
        Student student = studentService.getStudentById(id);
        return ResponseEntity.ok(student);
    }

    @GetMapping
    public ResponseEntity<List<Student>> getAllStudents(
            @RequestParam(required = false) Integer grade) {
        log.debug("GET /api/v1/students - grade filter: {}", grade);

        List<Student> students = grade != null 
                ? studentService.getStudentsByGrade(grade)
                : studentService.getAllStudents();

        return ResponseEntity.ok(students);
    }

    @PutMapping("/{id}")
    public ResponseEntity<Student> updateStudent(
            @PathVariable Long id,
            @Valid @RequestBody Student student) {
        log.info("PUT /api/v1/students/{}", id);
        Student updated = studentService.updateStudent(id, student);
        return ResponseEntity.ok(updated);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteStudent(@PathVariable Long id) {
        log.info("DELETE /api/v1/students/{}", id);
        studentService.deleteStudent(id);
        return ResponseEntity.noContent().build();
    }
}

Exception Handling

package com.gyan.education.exception;

public class ResourceNotFoundException extends RuntimeException {
    public ResourceNotFoundException(String message) {
        super(message);
    }
}

package com.gyan.education.exception;

import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;

@RestControllerAdvice
@Slf4j
public class GlobalExceptionHandler {

    @ExceptionHandler(ResourceNotFoundException.class)
    public ResponseEntity<ErrorResponse> handleResourceNotFound(ResourceNotFoundException ex) {
        log.error("Resource not found: {}", ex.getMessage());

        ErrorResponse error = ErrorResponse.builder()
                .timestamp(LocalDateTime.now())
                .status(HttpStatus.NOT_FOUND.value())
                .error("Not Found")
                .message(ex.getMessage())
                .build();

        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(error);
    }

    @ExceptionHandler(MethodArgumentNotValidException.class)
    public ResponseEntity<Map<String, String>> handleValidationErrors(
            MethodArgumentNotValidException ex) {
        log.error("Validation failed: {}", ex.getMessage());

        Map<String, String> errors = new HashMap<>();
        ex.getBindingResult().getAllErrors().forEach(error -> {
            String fieldName = ((FieldError) error).getField();
            String errorMessage = error.getDefaultMessage();
            errors.put(fieldName, errorMessage);
        });

        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errors);
    }

    @ExceptionHandler(IllegalArgumentException.class)
    public ResponseEntity<ErrorResponse> handleIllegalArgument(IllegalArgumentException ex) {
        log.error("Invalid argument: {}", ex.getMessage());

        ErrorResponse error = ErrorResponse.builder()
                .timestamp(LocalDateTime.now())
                .status(HttpStatus.BAD_REQUEST.value())
                .error("Bad Request")
                .message(ex.getMessage())
                .build();

        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(error);
    }

    @lombok.Data
    @lombok.Builder
    static class ErrorResponse {
        private LocalDateTime timestamp;
        private int status;
        private String error;
        private String message;
    }
}

3. Database Layer with JPA

Configuration (application.yml)

spring:
  application:
    name: education-app

  datasource:
    url: jdbc:h2:mem:educationdb
    driver-class-name: org.h2.Driver
    username: sa
    password: 

  h2:
    console:
      enabled: true
      path: /h2-console

  jpa:
    database-platform: org.hibernate.dialect.H2Dialect
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        format_sql: true
        use_sql_comments: true

Initial Data (Optional — data.sql)

-- src/main/resources/data.sql
INSERT INTO students (name, email, grade, enrollment_date, created_at, updated_at) 
VALUES 
    ('Rishi S', 'rishi@gyan.com', 4, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
    ('Vedika K', 'vedika@gyan.com', 2, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
    ('Shiva R', 'shiva@gyan.com', 7, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

JPA Key Features Used

Entity Relationships : @OneToMany, @ManyToOne, @ManyToMany (expandable)
Auditing : @CreationTimestamp, @UpdateTimestamp
Validation : @NotNull, @Email, @Size, @min, @max
Queries : Custom query methods (findByEmail, findByGrade)
Transactions : @Transactional for data consistency

4. Actuator APIs

Configuration

management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics,env,loggers,httptrace
      base-path: /actuator
  endpoint:
    health:
      show-details: always
  info:
    env:
      enabled: true

info:
  app:
    name: Education App
    description: Student Management System
    version: 1.0.0
    author: Vikash Kumar

Key Actuator Endpoints

EndpointPurposeURL Health Application health statusGET /actuator/health Info Application informationGET /actuator/info Metrics Performance metricsGET /actuator/metrics Env Environment propertiesGET /actuator/env Loggers View/modify log levelsGET /actuator/loggers

Custom Health Indicator (Optional)

package com.gyan.education.config;

import org.springframework.boot.actuate.health.Health;
import org.springframework.boot.actuate.health.HealthIndicator;
import org.springframework.stereotype.Component;
@Component
public class DatabaseHealthIndicator implements HealthIndicator {

    @Override
    public Health health() {
        // Add custom health check logic
        boolean databaseIsUp = checkDatabase();

        if (databaseIsUp) {
            return Health.up()
                    .withDetail("database", "Available")
                    .build();
        }
        return Health.down()
                .withDetail("database", "Unavailable")
                .build();
    }

    private boolean checkDatabase() {
        // Implement actual health check
        return true;
    }
}

5. Logging & Configuration

Logback Configuration (logback-spring.xml)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

    <property name="LOGS" value="./logs" />

    <!-- Console Appender -->
    <appender name="Console" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
        </encoder>
    </appender>

    <!-- File Appender -->
    <appender name="RollingFile" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>${LOGS}/education-app.log</file>
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
        </encoder>

        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${LOGS}/archived/education-app-%d{yyyy-MM-dd}.%i.log</fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy 
                class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>10MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <maxHistory>30</maxHistory>
        </rollingPolicy>
    </appender>

    <!-- Package-specific logging -->
    <logger name="com.gyan.education" level="DEBUG" />
    <logger name="org.springframework.web" level="INFO" />
    <logger name="org.hibernate" level="INFO" />

    <root level="INFO">
        <appender-ref ref="Console" />
        <appender-ref ref="RollingFile" />
    </root>

</configuration>

Application Profiles

application-dev.yml

spring:
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true

logging:
  level:
    com.gyan.education: DEBUG

application-prod.yml

spring:
  jpa:
    show-sql: false

logging:
  level:
    com.gyan.education: INFO

management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics

Running with Profiles

# Development
./mvnw spring-boot:run -Dspring-boot.run.profiles=dev

# Production
java -jar target/education-app-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

6. Deploy & Test

Build the Application

# Maven
./mvnw clean package

# Gradle
./gradlew build

Run Locally

# Using Maven
./mvnw spring-boot:run

# Using JAR
java -jar target/education-app-0.0.1-SNAPSHOT.jar
# Access at: http://localhost:8080

Test with cURL

# Create a student
curl -X POST http://localhost:8080/api/v1/students \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Doe",
    "email": "john@gyan.com",
    "grade": 4
  }'

# Get all students
curl http://localhost:8080/api/v1/students

# Get student by ID
curl http://localhost:8080/api/v1/students/1

# Get students by grade
curl http://localhost:8080/api/v1/students?grade=4

# Update student
curl -X PUT http://localhost:8080/api/v1/students/1 \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Updated",
    "email": "john.updated@school.com",
    "grade": 11
  }'

# Delete student
curl -X DELETE http://localhost:8080/api/v1/students/1

# Check health
curl http://localhost:8080/actuator/health

# View metrics
curl http://localhost:8080/actuator/metrics

Docker Deployment

Dockerfile

FROM eclipse-temurin:21-jdk-alpine
WORKDIR /app
COPY target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

Build and Run

# Build Docker image
docker build -t education-app:1.0 .

# Run container
docker run -p 8080:8080 education-app:1.0

Unit Testing Example

package com.gyan.education.service;

import com.gyan.education.exception.ResourceNotFoundException;
import com.gyan.education.model.Student;
import com.gyan.education.repository.StudentRepository;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.mockito.InjectMocks;
import org.mockito.Mock;
import org.mockito.junit.jupiter.MockitoExtension;
import java.util.Optional;
import static org.junit.jupiter.api.Assertions.*;
import static org.mockito.Mockito.*;

@ExtendWith(MockitoExtension.class)
class StudentServiceImplTest {

    @Mock
    private StudentRepository studentRepository;

    @InjectMocks
    private StudentServiceImpl studentService;

    @Test
    void createStudent_Success() {
        Student student = Student.builder()
                .name("Test Student")
                .email("test@school.com")
                .grade(10)
                .build();

        when(studentRepository.existsByEmail(anyString())).thenReturn(false);
        when(studentRepository.save(any(Student.class))).thenReturn(student);

        Student created = studentService.createStudent(student);

        assertNotNull(created);
        assertEquals("Test Student", created.getName());
        verify(studentRepository).save(any(Student.class));
    }

    @Test
    void getStudentById_NotFound() {
        when(studentRepository.findById(1L)).thenReturn(Optional.empty());

        assertThrows(ResourceNotFoundException.class, 
                () -> studentService.getStudentById(1L));
    }
}

Quick Reference

Project Checklist

✅ Spring Boot 3.x with Java 21
✅ RESTful CRUD endpoints
✅ JPA/Hibernate with H2 database
✅ Request validation
✅ Exception handling
✅ Actuator for monitoring
✅ Structured logging
✅ Profile-based configuration
✅ Docker support

Next Steps

Security : Add Spring Security for authentication/authorization
Swagger : Integrate OpenAPI documentation
Caching : Implement Redis/Caffeine caching
Testing : Add integration tests with TestContainers
Production DB : Switch to PostgreSQL/MySQL
Cloud : Deploy to AWS/Azure/GCP

Happy Coding! 🚀

PostgreSQL Complete Guide

Vikash Kumar — Sun, 09 Nov 2025 03:16:15 +0000

📖 What is PostgreSQL?

PostgreSQL (often called "Postgres") is a powerful, open-source object-relational database management system (ORDBMS) that has been in active development for over 35 years. It's known for its reliability, feature robustness, and performance.

Key Characteristics:

ACID Compliance : Ensures data integrity through Atomicity, Consistency, Isolation, and Durability
Extensible : Supports custom functions, data types, and operators
Standards Compliant : Follows SQL standards with advanced features
Multi-Platform : Runs on all major operating systems
Open Source : Free to use with a permissive license

Architecture Overview:

┌─────────────────┐
│ Applications │
├─────────────────┤
│ PostgreSQL │
│ Server │
├─────────────────┤
│ File System │
└─────────────────┘

🎯 Why PostgreSQL and Where to Use It?

Why Choose PostgreSQL?

Advanced Data Types

JSON/JSONB for document storage
Arrays, UUIDs, geometric types
Custom composite types

2. Performance & Scalability

Sophisticated query planner
Parallel query execution
Advanced indexing (B-tree, Hash, GiST, SP-GiST, GIN, BRIN)

3. Reliability & Data Integrity

MVCC (Multi-Version Concurrency Control)
Point-in-time recovery
Streaming replication

4. Extensibility

Custom functions in multiple languages
Extensions ecosystem
Foreign data wrappers

Use Cases

🏥 Healthcare & Medical Systems

-- Patient management with complex data relationships
-- Medical records with HIPAA compliance
-- Real-time monitoring systems

Examples : Electronic Health Records (EHR), Medical IoT devices, Clinical trial management

💰 Financial Services

-- Transaction processing with ACID guarantees
-- Risk management and compliance
-- Real-time fraud detection

Examples : Banking systems, Payment processors, Trading platforms, Cryptocurrency exchanges

🛒 E-commerce & Retail

-- Product catalogs with complex attributes
-- Inventory management across locations
-- Customer behavior analytics

Examples : Online marketplaces, Inventory systems, Recommendation engines

🌐 Web Applications

-- User management and authentication
-- Content management systems
-- Social media platforms

Examples : SaaS applications, Content platforms, Social networks

📊 Analytics & Business Intelligence

-- Data warehousing solutions
-- Real-time analytics dashboards
-- Time-series data analysis

Examples : Business intelligence, IoT data processing, Log analysis

🎮 Gaming & Entertainment

-- Player profiles and game state
-- Leaderboards and achievements
-- Real-time multiplayer data

Examples : Online games, Streaming platforms, Entertainment apps

🛠️ Installation and Setup

Prerequisites

# System requirements
- RAM: Minimum 1GB (4GB+ recommended)
- Disk: 512MB minimum installation
- OS: Linux, Windows, macOS, BSD

Installation Methods

Option 1: Official Installer (Recommended for beginners)

# Download from https://www.postgresql.org/download/
# Follow GUI installation wizard

Option 2: Package Manager

# Ubuntu/Debian
sudo apt update
sudo apt install postgresql postgresql-contrib

# CentOS/RHEL/Fedora
sudo yum install postgresql-server postgresql-contrib
# or
sudo dnf install postgresql-server postgresql-contrib

# macOS (Homebrew)
brew install postgresql@15

# Windows (Chocolatey)
choco install postgresql

Option 3: Docker (Recommended for development)

# Pull and run PostgreSQL container
docker run --name postgres-dev \
  -e POSTGRES_PASSWORD=mypassword \
  -e POSTGRES_DB=mydatabase \
  -p 5432:5432 \
  -d postgres:15-alpine

# Connect to container
docker exec -it postgres-dev psql -U postgres -d mydatabase

Initial Configuration

1. Initialize Database (Linux/Unix)

# Initialize database cluster
sudo -u postgres initdb -D /var/lib/pgsql/data

# Start PostgreSQL service
sudo systemctl start postgresql
sudo systemctl enable postgresql

# Create initial user
sudo -u postgres createuser --interactive

2. Basic Configuration Files

# Main configuration file
/var/lib/pgsql/data/postgresql.conf

# Client authentication
/var/lib/pgsql/data/pg_hba.conf

3. Essential Configuration Settings

-- postgresql.conf key settings
listen_addresses = 'localhost' # or '*' for all interfaces
port = 5432
max_connections = 100
shared_buffers = 128MB # 25% of RAM typically
effective_cache_size = 4GB # 50-75% of RAM
work_mem = 4MB
maintenance_work_mem = 64MB

🏗️ Database Setup Example: Health & Trends Microservice

Let's create a complete database setup for a health and wellness tracking microservice.

1. Create Database and User

-- Connect as superuser (postgres)
psql -U postgres

-- Create database
CREATE DATABASE health_trends_db 
WITH 
    ENCODING = 'UTF8'
    LC_COLLATE = 'en_US.UTF-8'
    LC_CTYPE = 'en_US.UTF-8'
    TEMPLATE = template0;

-- Create application user
CREATE USER health_app_user WITH PASSWORD 'SecureP@ssw0rd123';

-- Grant privileges
GRANT CONNECT ON DATABASE health_trends_db TO health_app_user;
GRANT USAGE, CREATE ON SCHEMA public TO health_app_user;

-- Connect to the new database
\c health_trends_db

2. Create Schemas for Organization

-- Create schemas for different domains
CREATE SCHEMA IF NOT EXISTS user_management;
CREATE SCHEMA IF NOT EXISTS health_data;
CREATE SCHEMA IF NOT EXISTS analytics;
CREATE SCHEMA IF NOT EXISTS audit;

-- Grant schema permissions
GRANT USAGE, CREATE ON SCHEMA user_management TO health_app_user;
GRANT USAGE, CREATE ON SCHEMA health_data TO health_app_user;
GRANT USAGE, CREATE ON SCHEMA analytics TO health_app_user;
GRANT USAGE ON SCHEMA audit TO health_app_user; -- Read-only for audit

3. Create Tables

User Management Schema

-- User profiles table
CREATE TABLE user_management.users (
    user_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email VARCHAR(255) UNIQUE NOT NULL,
    username VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    first_name VARCHAR(100),
    last_name VARCHAR(100),
    date_of_birth DATE,
    gender VARCHAR(20),
    height_cm INTEGER CHECK (height_cm > 0 AND height_cm < 300),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true,
    last_login TIMESTAMP WITH TIME ZONE,
    profile_data JSONB DEFAULT '{}'
);

-- User preferences
CREATE TABLE user_management.user_preferences (
    preference_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    notification_enabled BOOLEAN DEFAULT true,
    data_sharing_consent BOOLEAN DEFAULT false,
    preferred_units JSONB DEFAULT '{"weight": "kg", "distance": "km", "temperature": "celsius"}',
    privacy_settings JSONB DEFAULT '{}',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

Health Data Schema

-- Health metrics table
CREATE TABLE health_data.health_metrics (
    metric_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    metric_type VARCHAR(50) NOT NULL, -- 'weight', 'blood_pressure', 'heart_rate', etc.
    value DECIMAL(10,2) NOT NULL,
    unit VARCHAR(20) NOT NULL,
    recorded_at TIMESTAMP WITH TIME ZONE NOT NULL,
    source VARCHAR(50) DEFAULT 'manual', -- 'manual', 'device', 'app'
    device_info JSONB DEFAULT '{}',
    notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Activity tracking
CREATE TABLE health_data.activities (
    activity_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    activity_type VARCHAR(50) NOT NULL, -- 'walking', 'running', 'cycling', etc.
    duration_minutes INTEGER NOT NULL CHECK (duration_minutes > 0),
    calories_burned DECIMAL(7,2),
    distance_km DECIMAL(8,3),
    average_heart_rate INTEGER,
    max_heart_rate INTEGER,
    started_at TIMESTAMP WITH TIME ZONE NOT NULL,
    ended_at TIMESTAMP WITH TIME ZONE NOT NULL,
    gps_data JSONB DEFAULT '{}', -- Store route information
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,

    CONSTRAINT valid_duration CHECK (ended_at > started_at)
);

-- Sleep tracking
CREATE TABLE health_data.sleep_records (
    sleep_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    sleep_date DATE NOT NULL,
    bedtime TIMESTAMP WITH TIME ZONE NOT NULL,
    wake_time TIMESTAMP WITH TIME ZONE NOT NULL,
    total_sleep_minutes INTEGER NOT NULL,
    deep_sleep_minutes INTEGER DEFAULT 0,
    light_sleep_minutes INTEGER DEFAULT 0,
    rem_sleep_minutes INTEGER DEFAULT 0,
    sleep_quality_score INTEGER CHECK (sleep_quality_score BETWEEN 1 AND 10),
    sleep_phases JSONB DEFAULT '[]', -- Detailed sleep phase data
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,

    CONSTRAINT valid_sleep_duration CHECK (wake_time > bedtime),
    CONSTRAINT valid_sleep_total CHECK (
        total_sleep_minutes = COALESCE(deep_sleep_minutes, 0) + 
                             COALESCE(light_sleep_minutes, 0) + 
                             COALESCE(rem_sleep_minutes, 0)
    )
);

-- Nutrition tracking
CREATE TABLE health_data.nutrition_logs (
    log_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    meal_type VARCHAR(20) NOT NULL, -- 'breakfast', 'lunch', 'dinner', 'snack'
    food_item VARCHAR(255) NOT NULL,
    quantity DECIMAL(8,2) NOT NULL,
    unit VARCHAR(20) NOT NULL, -- 'grams', 'pieces', 'cups', etc.
    calories DECIMAL(7,2),
    protein_g DECIMAL(6,2),
    carbs_g DECIMAL(6,2),
    fat_g DECIMAL(6,2),
    fiber_g DECIMAL(6,2),
    sugar_g DECIMAL(6,2),
    sodium_mg DECIMAL(8,2),
    logged_at TIMESTAMP WITH TIME ZONE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

Analytics Schema

-- Health trends and analytics
CREATE TABLE analytics.health_trends (
    trend_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    metric_type VARCHAR(50) NOT NULL,
    period_type VARCHAR(20) NOT NULL, -- 'daily', 'weekly', 'monthly'
    period_start DATE NOT NULL,
    period_end DATE NOT NULL,
    avg_value DECIMAL(10,2),
    min_value DECIMAL(10,2),
    max_value DECIMAL(10,2),
    trend_direction VARCHAR(10), -- 'up', 'down', 'stable'
    trend_strength DECIMAL(3,2), -- Correlation coefficient
    calculated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,

    UNIQUE(user_id, metric_type, period_type, period_start)
);

-- Goal tracking
CREATE TABLE analytics.user_goals (
    goal_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES user_management.users(user_id) ON DELETE CASCADE,
    goal_type VARCHAR(50) NOT NULL, -- 'weight_loss', 'step_count', 'exercise_frequency'
    target_value DECIMAL(10,2) NOT NULL,
    current_value DECIMAL(10,2) DEFAULT 0,
    unit VARCHAR(20) NOT NULL,
    target_date DATE,
    status VARCHAR(20) DEFAULT 'active', -- 'active', 'completed', 'paused', 'abandoned'
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

Audit Schema

-- Audit trail for all data changes
CREATE TABLE audit.data_changes (
    audit_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    table_name VARCHAR(100) NOT NULL,
    operation VARCHAR(10) NOT NULL, -- 'INSERT', 'UPDATE', 'DELETE'
    user_id UUID,
    old_values JSONB,
    new_values JSONB,
    changed_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    changed_by VARCHAR(100) -- Application user or system process
);

4. Create Indexes for Performance

-- User management indexes
CREATE INDEX idx_users_email ON user_management.users(email);
CREATE INDEX idx_users_username ON user_management.users(username);
CREATE INDEX idx_users_active ON user_management.users(is_active);

-- Health data indexes
CREATE INDEX idx_health_metrics_user_type ON health_data.health_metrics(user_id, metric_type);
CREATE INDEX idx_health_metrics_recorded_at ON health_data.health_metrics(recorded_at);
CREATE INDEX idx_activities_user_started ON health_data.activities(user_id, started_at);
CREATE INDEX idx_sleep_user_date ON health_data.sleep_records(user_id, sleep_date);
CREATE INDEX idx_nutrition_user_logged ON health_data.nutrition_logs(user_id, logged_at);

-- Analytics indexes
CREATE INDEX idx_trends_user_metric ON analytics.health_trends(user_id, metric_type, period_type);
CREATE INDEX idx_goals_user_status ON analytics.user_goals(user_id, status);

-- Audit indexes
CREATE INDEX idx_audit_table_changed ON audit.data_changes(table_name, changed_at);
CREATE INDEX idx_audit_user ON audit.data_changes(user_id);

5. Create Views for Common Queries

-- Latest health metrics per user
CREATE VIEW analytics.latest_health_metrics AS
SELECT DISTINCT ON (user_id, metric_type)
    user_id,
    metric_type,
    value,
    unit,
    recorded_at
FROM health_data.health_metrics
ORDER BY user_id, metric_type, recorded_at DESC;

-- User health summary
CREATE VIEW analytics.user_health_summary AS
SELECT 
    u.user_id,
    u.username,
    u.first_name,
    u.last_name,
    COUNT(DISTINCT hm.metric_id) as total_health_records,
    COUNT(DISTINCT a.activity_id) as total_activities,
    COUNT(DISTINCT sr.sleep_id) as total_sleep_records,
    MAX(hm.recorded_at) as last_health_update,
    MAX(a.started_at) as last_activity,
    MAX(sr.sleep_date) as last_sleep_record
FROM user_management.users u
LEFT JOIN health_data.health_metrics hm ON u.user_id = hm.user_id
LEFT JOIN health_data.activities a ON u.user_id = a.user_id
LEFT JOIN health_data.sleep_records sr ON u.user_id = sr.user_id
WHERE u.is_active = true
GROUP BY u.user_id, u.username, u.first_name, u.last_name;

6. Create Functions and Triggers

-- Function to update timestamps
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = CURRENT_TIMESTAMP;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Apply to relevant tables
CREATE TRIGGER update_users_updated_at 
    BEFORE UPDATE ON user_management.users 
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_preferences_updated_at 
    BEFORE UPDATE ON user_management.user_preferences 
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- Audit trigger function
CREATE OR REPLACE FUNCTION audit_trigger_function()
RETURNS TRIGGER AS $$
BEGIN
    IF TG_OP = 'DELETE' THEN
        INSERT INTO audit.data_changes (table_name, operation, user_id, old_values, changed_by)
        VALUES (TG_TABLE_NAME, TG_OP, OLD.user_id, to_jsonb(OLD), current_user);
        RETURN OLD;
    ELSIF TG_OP = 'UPDATE' THEN
        INSERT INTO audit.data_changes (table_name, operation, user_id, old_values, new_values, changed_by)
        VALUES (TG_TABLE_NAME, TG_OP, NEW.user_id, to_jsonb(OLD), to_jsonb(NEW), current_user);
        RETURN NEW;
    ELSIF TG_OP = 'INSERT' THEN
        INSERT INTO audit.data_changes (table_name, operation, user_id, new_values, changed_by)
        VALUES (TG_TABLE_NAME, TG_OP, NEW.user_id, to_jsonb(NEW), current_user);
        RETURN NEW;
    END IF;
    RETURN NULL;
END;
$$ LANGUAGE plpgsql;

-- Apply audit triggers to sensitive tables
CREATE TRIGGER audit_users_trigger
    AFTER INSERT OR UPDATE OR DELETE ON user_management.users
    FOR EACH ROW EXECUTE FUNCTION audit_trigger_function();

7. Sample Data and Usage

-- Insert sample user
INSERT INTO user_management.users (email, username, first_name, last_name, date_of_birth, gender, height_cm)
VALUES ('john.doe@example.com', 'johndoe', 'John', 'Doe', '1990-05-15', 'male', 175);

-- Get the user_id for further operations
-- In a real application, you'd typically get this from your authentication system

-- Insert health metrics
INSERT INTO health_data.health_metrics (user_id, metric_type, value, unit, recorded_at)
VALUES 
    ((SELECT user_id FROM user_management.users WHERE username = 'johndoe'), 'weight', 75.5, 'kg', CURRENT_TIMESTAMP),
    ((SELECT user_id FROM user_management.users WHERE username = 'johndoe'), 'blood_pressure_systolic', 120, 'mmHg', CURRENT_TIMESTAMP),
    ((SELECT user_id FROM user_management.users WHERE username = 'johndoe'), 'blood_pressure_diastolic', 80, 'mmHg', CURRENT_TIMESTAMP);

-- Insert activity
INSERT INTO health_data.activities (user_id, activity_type, duration_minutes, calories_burned, distance_km, started_at, ended_at)
VALUES (
    (SELECT user_id FROM user_management.users WHERE username = 'johndoe'),
    'running',
    30,
    300,
    5.2,
    CURRENT_TIMESTAMP - INTERVAL '2 hours',
    CURRENT_TIMESTAMP - INTERVAL '90 minutes'
);

-- Query user's health summary
SELECT * FROM analytics.user_health_summary WHERE username = 'johndoe';

✅ Do's and Don'ts

✅ DO's

Database Design

✅ Use appropriate data types

-- Good: Use specific types 
CREATE TABLE products (  
   price DECIMAL(10,2), -- Not FLOAT for money     
   created_at TIMESTAMPTZ, -- Not VARCHAR for timestamps     
   is_active BOOLEAN -- Not INTEGER for flags 
);

✅ Implement proper constraints

-- Good: Add meaningful constraints 
CREATE TABLE users (     
  email VARCHAR(255) UNIQUE NOT NULL,     
  age INTEGER CHECK (age >= 0 AND age <= 150),     
  status VARCHAR(20) CHECK (status IN ('active', 'inactive', 'pending')) 
);

✅ Use transactions for data consistency

BEGIN;     
  UPDATE accounts SET balance = balance - 100 WHERE id = 1;     
  UPDATE accounts SET balance = balance + 100 WHERE id = 2;     
  INSERT INTO transactions (from_account, to_account, amount) VALUES (1, 2, 100); 
COMMIT;

✅ Create appropriate indexes

-- Create indexes on frequently queried columns
CREATE INDEX idx_orders_customer_date ON orders(customer_id, order_date);
CREATE INDEX idx_products_category ON products(category_id) WHERE active = true;

Performance

✅ Use EXPLAIN ANALYZE to optimize queries

EXPLAIN ANALYZE SELECT * FROM large_table WHERE indexed_column = 'value';

✅ Use connection pooling

-- Configure connection pooling in application 
-- Example with pgBouncer or application-level pooling

✅ Regular maintenance

-- Regular VACUUM and ANALYZE VACUUM ANALYZE table_name;  
-- Monitor table bloat 
SELECT schemaname, tablename, n_dead_tup, n_live_tup  
FROM pg_stat_user_tables;

Security

✅ Use least privilege principle

-- Create role-based access
CREATE ROLE readonly_user;
GRANT SELECT ON ALL TABLES IN SCHEMA public TO readonly_user;

CREATE ROLE app_user;
GRANT SELECT, INSERT, UPDATE ON specific_tables TO app_user;

✅ Use prepared statements

# Good: Using prepared statements (Python example)
cursor.execute("SELECT * FROM users WHERE id = %s", (user_id,))

❌ DON’Ts

Database Design

**❌ Don’t use SELECT ***

-- Bad: Selecting all columns
SELECT * FROM large_table;

-- Good: Select only needed columns
SELECT id, name, email FROM users WHERE active = true;

❌ Don’t ignore normalization rules

-- Bad: Denormalized data with redundancy
CREATE TABLE orders (
    id INTEGER,
    customer_name VARCHAR(100),
    customer_email VARCHAR(100),
    customer_address TEXT,
    product_name VARCHAR(100),
    product_price DECIMAL(10,2)
);

-- Good: Properly normalized
CREATE TABLE customers (id INTEGER PRIMARY KEY, name VARCHAR(100), email VARCHAR(100));
CREATE TABLE orders (id INTEGER PRIMARY KEY, customer_id INTEGER REFERENCES customers(id));

❌ Don’t use generic column names

-- Bad: Generic names
CREATE TABLE data (
    id INTEGER,
    value1 TEXT,
    value2 INTEGER,
    flag BOOLEAN
);

-- Good: Descriptive names
CREATE TABLE user_profiles (
    user_id INTEGER,
    full_name TEXT,
    age INTEGER,
    is_active BOOLEAN
);

Performance

❌ Don’t create unnecessary indexes

-- Bad: Too many indexes on small, rarely-queried tables
CREATE INDEX idx1 ON small_table(col1);
CREATE INDEX idx2 ON small_table(col2);
CREATE INDEX idx3 ON small_table(col3);
-- ... etc

❌ Don’t use functions in WHERE clauses on large tables

-- Bad: Function in WHERE clause prevents index usage
SELECT * FROM orders WHERE EXTRACT(YEAR FROM order_date) = 2023;

-- Good: Use range conditions
SELECT * FROM orders WHERE order_date >= '2023-01-01' AND order_date < '2024-01-01';

Security

❌ Never store plain text passwords

-- Bad: Plain text password
CREATE TABLE users (
    username VARCHAR(50),
    password VARCHAR(50) -- NEVER DO THIS
);

-- Good: Store hashed passwords
CREATE TABLE users (
    username VARCHAR(50),
    password_hash VARCHAR(255) -- Store bcrypt or similar hash
);

❌ Don’t use string concatenation for queries

# Bad: SQL injection risk
query = f"SELECT * FROM users WHERE name = '{user_input}'"

# Good: Use parameterized queries
cursor.execute("SELECT * FROM users WHERE name = %s", (user_input,))

💡 Helpful Tips and Best Practices

Performance Optimization

1. Query Optimization

-- Use EXPLAIN to understand query plans
EXPLAIN (ANALYZE, BUFFERS) SELECT u.name, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at > '2023-01-01'
GROUP BY u.id, u.name;

-- Use window functions instead of subqueries when possible
-- Bad: Correlated subquery
SELECT id, name, (SELECT COUNT(*) FROM orders WHERE user_id = u.id) as order_count
FROM users u;

-- Good: Window function
SELECT DISTINCT u.id, u.name, COUNT(o.id) OVER (PARTITION BY u.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;

2. Index Strategies

-- Composite indexes: order matters
CREATE INDEX idx_orders_status_date ON orders(status, created_at); -- Good for queries filtering by status first
CREATE INDEX idx_orders_date_status ON orders(created_at, status); -- Good for queries filtering by date first

-- Partial indexes for specific conditions
CREATE INDEX idx_active_users ON users(email) WHERE active = true;
-- Functional indexes
CREATE INDEX idx_users_lower_email ON users(lower(email));

3. Configuration Tuning

-- Key postgresql.conf parameters
shared_buffers = '256MB' -- 25% of RAM
effective_cache_size = '1GB' -- 50-75% of RAM
work_mem = '16MB' -- Per operation memory
maintenance_work_mem = '256MB' -- Maintenance operations
random_page_cost = 1.1 -- For SSDs
effective_io_concurrency = 200 -- For SSDs
max_worker_processes = 8 -- Number of CPU cores
max_parallel_workers_per_gather = 4 -- Parallel query workers

Monitoring and Maintenance

1. Health Checks

-- Check database size
SELECT 
    datname,
    pg_size_pretty(pg_database_size(datname)) as size
FROM pg_database
ORDER BY pg_database_size(datname) DESC;

-- Check table sizes
SELECT 
    schemaname,
    tablename,
    pg_size_pretty(pg_total_relation_size(schemaname||'.'||tablename)) as size,
    pg_size_pretty(pg_relation_size(schemaname||'.'||tablename)) as table_size,
    pg_size_pretty(pg_total_relation_size(schemaname||'.'||tablename) - pg_relation_size(schemaname||'.'||tablename)) as index_size
FROM pg_tables
ORDER BY pg_total_relation_size(schemaname||'.'||tablename) DESC;

-- Check for bloated tables
SELECT 
    schemaname,
    tablename,
    n_dead_tup,
    n_live_tup,
    round((n_dead_tup::float / NULLIF(n_live_tup::float, 0)) * 100, 2) as bloat_ratio
FROM pg_stat_user_tables
WHERE n_dead_tup > 1000
ORDER BY bloat_ratio DESC;

2. Performance Monitoring

-- Long running queries
SELECT 
    pid,
    now() - pg_stat_activity.query_start AS duration,
    query,
    state
FROM pg_stat_activity
WHERE (now() - pg_stat_activity.query_start) > interval '5 minutes'
ORDER BY duration DESC;

-- Index usage statistics
SELECT 
    schemaname,
    tablename,
    indexname,
    idx_scan,
    idx_tup_read,
    idx_tup_fetch
FROM pg_stat_user_indexes
ORDER BY idx_scan DESC;

-- Cache hit ratio
SELECT 
    'database' as type,
    round((sum(blks_hit) * 100.0) / (sum(blks_hit) + sum(blks_read)), 2) as cache_hit_ratio
FROM pg_stat_database
UNION ALL
SELECT 
    'tables' as type,
    round((sum(heap_blks_hit) * 100.0) / (sum(heap_blks_hit) + sum(heap_blks_read)), 2) as cache_hit_ratio
FROM pg_statio_user_tables;

Backup and Recovery

1. Backup Strategies

# Full database backup
pg_dump -h localhost -U username -d database_name > backup_$(date +%Y%m%d_%H%M%S).sql

# Compressed backup
pg_dump -h localhost -U username -d database_name | gzip > backup_$(date +%Y%m%d_%H%M%S).sql.gz

# Directory format backup (parallel)
pg_dump -h localhost -U username -d database_name -Fd -j 4 -f backup_directory/

# Point-in-time recovery setup
# Enable WAL archiving in postgresql.conf:
# wal_level = replica
# archive_mode = on
# archive_command = 'cp %p /path/to/wal/archive/%f'

2. Recovery Examples

# Restore from SQL dump
psql -h localhost -U username -d database_name < backup_20231108_143022.sql

# Restore from compressed dump
gunzip -c backup_20231108_143022.sql.gz | psql -h localhost -U username -d database_name

# Restore from directory format
pg_restore -h localhost -U username -d database_name -j 4 backup_directory/

Advanced Features

1. JSON Operations

-- JSONB operations
CREATE TABLE user_profiles (
    id SERIAL PRIMARY KEY,
    user_data JSONB
);

-- Insert JSON data
INSERT INTO user_profiles (user_data) VALUES 
('{"name": "John", "age": 30, "preferences": {"theme": "dark", "language": "en"}}');

-- Query JSON data
SELECT * FROM user_profiles WHERE user_data->>'name' = 'John';
SELECT * FROM user_profiles WHERE user_data->'preferences'->>'theme' = 'dark';
SELECT * FROM user_profiles WHERE user_data @> '{"age": 30}';

-- Update JSON data
UPDATE user_profiles 
SET user_data = jsonb_set(user_data, '{preferences,theme}', '"light"')
WHERE user_data->>'name' = 'John';

2. Full Text Search

-- Create full text search
CREATE TABLE articles (
    id SERIAL PRIMARY KEY,
    title TEXT,
    content TEXT,
    search_vector tsvector
);

-- Update search vector
UPDATE articles SET search_vector = 
    setweight(to_tsvector('english', coalesce(title, '')), 'A') ||
    setweight(to_tsvector('english', coalesce(content, '')), 'B');

-- Create index for search
CREATE INDEX idx_articles_search ON articles USING GIN(search_vector);

-- Search query
SELECT title, ts_rank(search_vector, query) AS rank
FROM articles, plainto_tsquery('english', 'search terms') query
WHERE search_vector @@ query
ORDER BY rank DESC;

📚 References and Resources

Official Documentation

PostgreSQL Official Documentation — Comprehensive official docs
PostgreSQL Wiki — Community-maintained wiki
PostgreSQL Tutorial — Step-by-step tutorials

Performance and Optimization

PgTune — PostgreSQL configuration tuner
Explain.depesz.com — EXPLAIN plan analyzer
PostgreSQL Performance Optimization — Performance guide

Tools and Extensions

pgAdmin — Web-based administration tool
DBeaver — Universal database client
PostgREST — Auto-generated REST API
TimescaleDB — Time-series extension
PostGIS — Spatial database extension

Monitoring and Management

pg_stat_statements — Query statistics
pgBouncer — Connection pooler
Prometheus PostgreSQL Exporter — Metrics collection

Learning Resources

PostgreSQL Exercises — Interactive SQL exercises
Use The Index, Luke! — SQL indexing guide
PostgreSQL Planet — Community blogs and articles

Books (Recommended Reading)

“PostgreSQL: Up and Running” by Regina Obe and Leo Hsu
“The Art of PostgreSQL” by Dimitri Fontaine
“PostgreSQL High Performance” by Gregory Smith
“Mastering PostgreSQL” by Hans-Jürgen Schönig

Community and Support

PostgreSQL Mailing Lists — Official support lists
PostgreSQL Slack — Community chat
Stack Overflow PostgreSQL — Q&A platform
Reddit r/PostgreSQL — Community discussions

Cloud Services

Amazon RDS for PostgreSQL — Managed PostgreSQL on AWS
Google Cloud SQL for PostgreSQL — Managed PostgreSQL on GCP
Azure Database for PostgreSQL — Managed PostgreSQL on Azure
Heroku Postgres — PostgreSQL as a service

🎯 Quick Reference Commands

-- Connection and basic info
\l -- List databases
\c database_name -- Connect to database
\dt -- List tables
\d table_name -- Describe table
\du -- List users
\q -- Quit psql

-- Useful queries
SELECT version(); -- PostgreSQL version
SELECT current_database(); -- Current database
SELECT current_user; -- Current user
SELECT pg_size_pretty(pg_database_size('dbname')); -- Database size
SELECT NOW(); -- Current timestamp

-- Performance queries
SELECT * FROM pg_stat_activity WHERE state = 'active'; -- Active queries
SELECT * FROM pg_stat_user_tables; -- Table statistics
SELECT * FROM pg_stat_user_indexes; -- Index statistics

Remember : PostgreSQL is a powerful tool that rewards understanding and proper usage. Start with the basics, follow best practices, and gradually explore advanced features as your needs grow! 🚀

Complete Guide: Implementing Azure Entra ID SSO in Angular Standalone Applications

Vikash Kumar — Thu, 30 Oct 2025 19:48:01 +0000

Introduction

Single Sign-On (SSO) has become essential for modern web applications, providing users with seamless authentication experiences across multiple applications. Azure Entra ID (formerly Azure Active Directory) offers robust identity and access management capabilities that integrate perfectly with Angular applications.

This comprehensive guide walks you through implementing Azure Entra ID SSO in an Angular standalone application using Microsoft Authentication Library (MSAL). By the end of this tutorial, you’ll have a fully functional SSO implementation that provides secure, user-friendly authentication.

What You’ll Build:

Secure Angular application with Azure Entra ID authentication
Automatic login redirects and token management
Protected routes and authentication guards
Clean user interface with login/logout functionality
Error handling and user feedback systems

Prerequisites

Before starting this implementation, ensure you have:

Technical Requirements

Node.js (version 16 or higher)
Angular CLI (version 15 or higher)
Azure subscription with administrative access
Basic knowledge of Angular, TypeScript, and Azure services

Development Environment

# Verify your setup
node --version
npm --version
ng version

Azure Permissions

Azure Entra ID administrative access
Ability to register applications in Azure portal
Permission to configure app registrations

Azure Entra ID Configuration

Step 1: Access Azure Portal

Navigate to Azure Portal
Sign in with your administrative account
Search for “Azure Active Directory” or “Entra ID”
Select Azure Active Directory from the results

Step 2: Register Your Application

In the Azure AD overview, click App registrations in the left menu
Click + New registration
Fill out the registration form as below:
Click Register

Name: MyAngularSSOApp
Supported account types: Accounts in this organizational directory only
Redirect URI:  
- Platform: Single-page application (SPA) 
- URI: http://localhost:4200

Step 3: Configure Authentication Settings

After registration, you’ll be redirected to your app’s overview page:

Note your Application (client) ID — you’ll need this later
Note your Directory (tenant) ID — also required for configuration

Navigate to Authentication in the left menu:

Under Platform configurations , verify your SPA redirect URI
Add additional redirect URIs for different environments:

Development: http://localhost:4200 
Staging: https://your-staging-domain.com 
Production: https://your-production-domain.com

Under Implicit grant and hybrid flows , ensure:

✅ Access tokens (for implicit flows)
✅ ID tokens (for implicit and hybrid flows)

Under Advanced settings :

✅ Allow public client flows : Yes
Supported account types : Verify correct setting

Step 4: Configure API Permissions (Optional)

If your application needs to access Microsoft Graph or other APIs:

Go to API permissions
Click + Add a permission
Select Microsoft Graph
Choose Delegated permissions
Add permissions like:

User.Read (basic profile info)
email (email address)
profile (basic profile)

Click Grant admin consent if required

Step 5: Note Configuration Values

Save these values for your Angular configuration:

// You'll need these in your Angular app
const azureConfig = {
  clientId: "your-application-client-id",
  authority: "https://login.microsoftonline.com/your-tenant-id",
  redirectUri: "http://localhost:4200"
};

Angular Project Setup

Step 1: Create New Angular Project

# Create a new Angular project
ng new angular-sso-app --routing --style=css --standalone

# Navigate to project directory
cd angular-sso-app

Step 2: Install MSAL Dependencies

# Install Microsoft Authentication Library for Angular
npm install @azure/msal-browser @azure/msal-angular

# Install additional dependencies for HTTP and routing
npm install @angular/common @angular/router @angular/animations

Step 3: Project Structure Setup

Create the following directory structure:

src/
├── app/
│ ├── components/
│ │ ├── login/
│ │ ├── home/
│ │ └── profile/
│ ├── guards/
│ ├── services/
│ └── config/

# Create components
ng generate component components/login
ng generate component components/home
ng generate component components/profile

# Create directories
mkdir -p src/app/guards
mkdir -p src/app/services
mkdir -p src/app/config

MSAL Implementation

Step 1: Create MSAL Configuration

Create src/app/config/msal.config.ts:

import { Configuration, BrowserCacheLocation } from '@azure/msal-browser';
export const msalConfig: Configuration = {
  auth: {
    clientId: 'your-application-client-id', // Replace with your client ID
    authority: 'https://login.microsoftonline.com/your-tenant-id', // Replace with your tenant ID
    redirectUri: 'http://localhost:4200',
    postLogoutRedirectUri: 'http://localhost:4200'
  },
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage,
    storeAuthStateInCookie: false
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) return;
        console.log(`MSAL [${level}]: ${message}`);
      },
      piiLoggingEnabled: false
    }
  }
};
export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read']
};
export const graphConfig = {
  graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me'
};

Step 2: Configure Main Application

Update src/main.ts:

import 'zone.js';
import { bootstrapApplication } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {
  MsalModule,
  MsalService,
  MsalGuard,
  MsalInterceptor,
  MsalBroadcastService,
  MsalRedirectComponent
} from '@azure/msal-angular';
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
import { AppComponent } from './app/app';
import { routes } from './app/app.routes';
import { msalConfig, loginRequest } from './app/config/msal.config';

const msalInstance = new PublicClientApplication(msalConfig);

// Initialize MSAL instance before bootstrapping the application
msalInstance.initialize().then(() => {
  // Handle redirect promise to process any pending redirects
  return msalInstance.handleRedirectPromise();
}).then(() => {
  bootstrapApplication(AppComponent, {
    providers: [
      importProvidersFrom(
        RouterModule.forRoot(routes),
        HttpClientModule,
        BrowserAnimationsModule,
        MsalModule.forRoot(
          msalInstance,
          {
            interactionType: InteractionType.Redirect,
            authRequest: loginRequest
          },
          {
            interactionType: InteractionType.Redirect,
            protectedResourceMap: new Map([
              ['https://graph.microsoft.com/v1.0/me', ['User.Read']]
            ])
          }
        )
      ),
      {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
      },
      MsalService,
      MsalGuard,
      MsalBroadcastService
    ]
  }).catch(err => console.error(err));
}).catch(err => {
  console.error('MSAL initialization failed:', err);
});

Step 3: Update App Component

Update src/app/app.ts:

import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, Router } from '@angular/router';
import { Subject, filter, takeUntil } from 'rxjs';

import {
  MsalService,
  MsalBroadcastService,
  MSAL_GUARD_CONFIG,
  MsalGuardConfiguration,
  MsalRedirectComponent
} from '@azure/msal-angular';
import {
  InteractionStatus,
  PopupRequest,
  RedirectRequest,
  AuthenticationResult,
  EventMessage,
  EventType
} from '@azure/msal-browser';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: `
    <div class="app-container">
      <main class="main-content">
        <div *ngIf="isLoading" class="loading-spinner">
          <div class="spinner"></div>
          <p>Loading...</p>
        </div>
        <router-outlet *ngIf="!isLoading"></router-outlet>
      </main>
    </div>
  `,
  styleUrls: ['./app.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular SSO App';
  isLoggedIn = false;
  userName = '';
  isLoading = true;
  private readonly _destroying$ = new Subject<void>();
  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private msalService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private router: Router
  ) {}
  ngOnInit(): void {
    this.initializeApp();
    this.setLoginDisplay();
    this.setupEventListeners();

    // Fallback: Clear loading state after 5 seconds if MSAL doesn't respond
    setTimeout(() => {
      if (this.isLoading) {
        console.log('Timeout reached, clearing loading state');
        this.isLoading = false;
      }
    }, 5000);
  }
  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  private initializeApp(): void {
    console.log('Initializing app...');
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => {
          console.log('MSAL Interaction Status:', status);
          return status === InteractionStatus.None;
        }),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        console.log('MSAL interaction completed, setting loading to false');
        this.setLoginDisplay();
        this.checkAndSetActiveAccount();
        this.isLoading = false;
      });
  }
  private setupEventListeners(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        console.log('Login successful');
        this.checkAndSetActiveAccount();
      });
  }
  private setLoginDisplay(): void {
    this.isLoggedIn = this.msalService.instance.getAllAccounts().length > 0;
    if (this.isLoggedIn) {
      const account = this.msalService.instance.getAllAccounts()[0];
      this.userName = account.name || account.username || 'User';
    }
  }
  private checkAndSetActiveAccount(): void {
    const accounts = this.msalService.instance.getAllAccounts();
    if (accounts.length === 0) {
      return;
    }

    if (accounts.length > 1) {
      const currentAccounts = accounts.filter(account =>
        account.homeAccountId.toUpperCase().includes('B2C_1_SUSI'.toUpperCase()) ||
        account.homeAccountId.toUpperCase().includes('B2C_1_EDIT_PROFILE'.toUpperCase())
      );
      if (currentAccounts.length > 1) {
        this.msalService.instance.setActiveAccount(currentAccounts[0]);
      } else if (currentAccounts.length === 1) {
        this.msalService.instance.setActiveAccount(currentAccounts[0]);
      } else {
        this.msalService.instance.setActiveAccount(accounts[0]);
      }
    } else {
      this.msalService.instance.setActiveAccount(accounts[0]);
    }
  }
  login(): void {
    if (this.msalGuardConfig.authRequest) {
      this.msalService.loginRedirect({
        ...this.msalGuardConfig.authRequest
      } as RedirectRequest);
    } else {
      this.msalService.loginRedirect();
    }
  }
  logout(): void {
    this.msalService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }
}

Authentication Service

Step 1: Create Authentication Service

Create src/app/services/auth.service.ts:

import { Injectable, Inject } from '@angular/core';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

import {
  MsalService,
  MsalBroadcastService,
  MSAL_GUARD_CONFIG,
  MsalGuardConfiguration
} from '@azure/msal-angular';
import {
  AccountInfo,
  AuthenticationResult,
  PopupRequest,
  RedirectRequest,
  SilentRequest,
  InteractionStatus
} from '@azure/msal-browser';
import { graphConfig } from '../config/msal.config';
export interface UserProfile {
  id: string;
  name: string;
  email: string;
  jobTitle?: string;
  department?: string;
}
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private userProfileSubject = new BehaviorSubject<UserProfile | null>(null);
  public userProfile$ = this.userProfileSubject.asObservable();
  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private msalService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private http: HttpClient
  ) {
    this.initializeUser();
  }
  private initializeUser(): void {
    const account = this.msalService.instance.getActiveAccount();
    if (account) {
      this.fetchUserProfile().subscribe();
    }
  }
  /**
   * Check if user is currently authenticated
   */
  isAuthenticated(): boolean {
    return this.msalService.instance.getAllAccounts().length > 0;
  }
  /**
   * Get current user account information
   */
  getCurrentUser(): AccountInfo | null {
    return this.msalService.instance.getActiveAccount();
  }
  /**
   * Check if an interaction is currently in progress
   */
  private isInteractionInProgress(): boolean {
    try {
      // Try to get the interaction status from MSAL's internal state
      const interactionStatus = this.msalService.instance.getActiveAccount();
      // Check if there's an ongoing interaction by looking for interaction-related cache entries
      return false; // For now, let the MSAL service handle the check
    } catch (error) {
      return false;
    }
  }

  /**
   * Perform login using redirect
   */
  loginRedirect(): void {
    try {
      if (this.msalGuardConfig.authRequest) {
        this.msalService.loginRedirect({
          ...this.msalGuardConfig.authRequest
        } as RedirectRequest);
      } else {
        this.msalService.loginRedirect();
      }
    } catch (error: any) {
      if (error.name === 'BrowserAuthError' && error.errorCode === 'interaction_in_progress') {
        console.log('Login interaction already in progress, please wait...');
        return;
      }
      console.error('Login failed:', error);
      throw error;
    }
  }
  /**
   * Perform login using popup
   */
  loginPopup(): Observable<AuthenticationResult> {
    if (this.msalGuardConfig.authRequest) {
      return this.msalService.loginPopup({
        ...this.msalGuardConfig.authRequest
      } as PopupRequest);
    } else {
      return this.msalService.loginPopup();
    }
  }
  /**
   * Perform logout
   */
  logout(): void {
    this.userProfileSubject.next(null);
    this.msalService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }
  /**
   * Get access token silently
   */
  getAccessToken(): Observable<string> {
    const account = this.msalService.instance.getActiveAccount();
    if (!account) {
      return of('');
    }
    const request: SilentRequest = {
      scopes: ['User.Read'],
      account: account
    };
    return this.msalService.acquireTokenSilent(request).pipe(
      map(result => result.accessToken),
      catchError(error => {
        console.error('Token acquisition failed:', error);
        return of('');
      })
    );
  }
  /**
   * Fetch user profile from Microsoft Graph
   */
  fetchUserProfile(): Observable<UserProfile | null> {
    if (!this.isAuthenticated()) {
      return of(null);
    }
    return this.http.get(graphConfig.graphMeEndpoint).pipe(
      map((profile: any) => {
        const userProfile: UserProfile = {
          id: profile.id,
          name: profile.displayName || profile.name,
          email: profile.mail || profile.userPrincipalName,
          jobTitle: profile.jobTitle,
          department: profile.department
        };
        this.userProfileSubject.next(userProfile);
        return userProfile;
      }),
      catchError(error => {
        console.error('Failed to fetch user profile:', error);
        return of(null);
      })
    );
  }
  /**
   * Check if user has specific roles or permissions
   */
  hasRole(role: string): boolean {
    const account = this.getCurrentUser();
    if (!account || !account.idTokenClaims) {
      return false;
    }

    // Implement role checking logic based on your token claims
    const roles = (account.idTokenClaims as any)?.roles || [];
    return roles.includes(role);
  }
  /**
   * Get user's groups from token claims
   */
  getUserGroups(): string[] {
    const account = this.getCurrentUser();
    if (!account || !account.idTokenClaims) {
      return [];
    }

    return (account.idTokenClaims as any)?.groups || [];
  }
}

Route Protection

Step 1: Create Authentication Guard

Create src/app/guards/auth.guard.ts:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard {
  constructor(
    private msalService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private router: Router
  ) {}
  canActivate(): Observable<boolean> | boolean {
    return this.msalBroadcastService.inProgress$.pipe(
      map((status: InteractionStatus) => {
        if (status === InteractionStatus.None) {
          const isAuthenticated = this.msalService.instance.getAllAccounts().length > 0;

          if (!isAuthenticated) {
            // Redirect to login
            this.msalService.loginRedirect();
            return false;
          }

          return true;
        }

        // Still processing authentication
        return false;
      }),
      take(1)
    );
  }
  canActivateChild(): Observable<boolean> | boolean {
    return this.canActivate();
  }
}

Step 2: Create Role-Based Guard

Create src/app/guards/role.guard.ts:

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';

import { AuthService } from '../services/auth.service';
@Injectable({
  providedIn: 'root'
})
export class RoleGuard {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}
  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
    const requiredRoles = route.data['roles'] as string[];

    if (!requiredRoles || requiredRoles.length === 0) {
      return true;
    }
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    const hasRequiredRole = requiredRoles.some(role => 
      this.authService.hasRole(role)
    );
    if (!hasRequiredRole) {
      this.router.navigate(['/unauthorized']);
      return false;
    }
    return true;
  }
}

Step 3: Configure Routes

Create src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';

import { Home } from './components/home/home';
import { Login } from './components/login/login';
import { Profile } from './components/profile/profile';
import { AuthGuard } from './guards/auth.guard';
import { RoleGuard } from './guards/role.guard';
export const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: Home
  },
  {
    path: 'login',
    component: Login
  },
  {
    path: 'profile',
    component: Profile,
    canActivate: [MsalGuard]
  },
  {
    path: '**',
    redirectTo: '/home'
  }
];

User Interface Integration

Step 1: Create Home Component

Update src/app/components/home/home.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { Subject, takeUntil, filter } from 'rxjs';

import { AuthService, UserProfile } from '../../services/auth.service';
import { MsalBroadcastService } from '@azure/msal-angular';
import { InteractionStatus, EventType, EventMessage } from '@azure/msal-browser';
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <div class="home-container">
      <div class="hero-section">
        <h1>Welcome to My SSO App</h1>
        <p class="lead">Secure authentication with Azure Entra ID</p>

        <div *ngIf="!isAuthenticated" class="auth-prompt">
          <p>Please sign in to access your personalized dashboard</p>
          <button
            (click)="login()"
            [disabled]="isLoggingIn"
            class="btn btn-primary btn-lg">
            <span *ngIf="!isLoggingIn">Sign In with Microsoft</span>
            <span *ngIf="isLoggingIn">Signing In...</span>
          </button>
        </div>
        <div *ngIf="isAuthenticated" class="welcome-user">
          <h2>Hello, {{userProfile?.name}}!</h2>
          <p>You are successfully authenticated</p>
          <div class="user-actions">
            <a routerLink="/profile" class="btn btn-outline-primary">
              View Profile
            </a>
            <button (click)="logout()" class="btn btn-outline-secondary">
              Sign Out
            </button>
          </div>
        </div>
      </div>
      <div *ngIf="isAuthenticated" class="dashboard-section">
        <h3>Quick Actions</h3>
        <div class="action-cards">
          <div class="card">
            <h4>Profile</h4>
            <p>View and manage your profile information</p>
            <a routerLink="/profile" class="btn btn-primary">Go to Profile</a>
          </div>

          <div class="card">
            <h4>Settings</h4>
            <p>Configure your application preferences</p>
            <a routerLink="/settings" class="btn btn-primary">Settings</a>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./home.css']
})
export class Home implements OnInit, OnDestroy {
  isAuthenticated = false;
  isLoggingIn = false;
  userProfile: UserProfile | null = null;
  private readonly _destroying$ = new Subject<void>();

  constructor(
    private authService: AuthService,
    private msalBroadcastService: MsalBroadcastService
  ) {}
  ngOnInit(): void {
    this.checkAuthentication();
    this.setupEventListeners();
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }

  private checkAuthentication(): void {
    this.isAuthenticated = this.authService.isAuthenticated();

    if (this.isAuthenticated) {
      this.authService.userProfile$.subscribe(profile => {
        this.userProfile = profile;
      });

      // Fetch fresh profile data
      this.authService.fetchUserProfile().subscribe();
    }
  }

  private setupEventListeners(): void {
    // Listen for login success events
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        console.log('Login successful');
        this.isLoggingIn = false;
        this.checkAuthentication();
      });

    // Listen for login failure events
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_FAILURE),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        console.log('Login failed');
        this.isLoggingIn = false;
      });

    // Listen for interaction status changes
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.isLoggingIn = false;
        this.checkAuthentication();
      });
  }
  login(): void {
    if (this.isLoggingIn) {
      return; // Prevent multiple login attempts
    }

    this.isLoggingIn = true;
    try {
      this.authService.loginRedirect();
    } catch (error) {
      console.error('Login error:', error);
      this.isLoggingIn = false;
    }
  }
  logout(): void {
    this.authService.logout();
  }
}

Step 2: Create Profile Component

Create src/app/components/profile/profile.ts:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AuthService, UserProfile } from '../../services/auth.service';
@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="profile-container">
      <div class="profile-header">
        <h1>User Profile</h1>
        <p>Your account information from Azure Entra ID</p>
      </div>
      <div *ngIf="loading" class="loading">
        <div class="spinner"></div>
        <p>Loading profile...</p>
      </div>
      <div *ngIf="userProfile && !loading" class="profile-content">
        <div class="profile-card">
          <div class="profile-avatar">
            <div class="avatar-placeholder">
              {{getInitials(userProfile.name)}}
            </div>
          </div>

          <div class="profile-info">
            <h2>{{userProfile.name}}</h2>
            <p class="email">{{userProfile.email}}</p>

            <div class="profile-details">
              <div class="detail-row" *ngIf="userProfile.jobTitle">
                <strong>Job Title:</strong>
                <span>{{userProfile.jobTitle}}</span>
              </div>

              <div class="detail-row" *ngIf="userProfile.department">
                <strong>Department:</strong>
                <span>{{userProfile.department}}</span>
              </div>

              <div class="detail-row">
                <strong>User ID:</strong>
                <span>{{userProfile.id}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="profile-actions">
          <button (click)="refreshProfile()" class="btn btn-primary">
            Refresh Profile
          </button>
          <button (click)="logout()" class="btn btn-outline-danger">
            Sign Out
          </button>
        </div>
      </div>
      <div *ngIf="!userProfile && !loading" class="error-state">
        <h3>Unable to load profile</h3>
        <p>There was an error loading your profile information.</p>
        <button (click)="refreshProfile()" class="btn btn-primary">
          Try Again
        </button>
      </div>
    </div>
  `,
  styleUrls: ['./profile.css']
})
export class Profile implements OnInit {
  userProfile: UserProfile | null = null;
  loading = true;
  constructor(private authService: AuthService) {}
  ngOnInit(): void {
    this.loadProfile();
  }
  loadProfile(): void {
    this.loading = true;

    this.authService.userProfile$.subscribe(profile => {
      this.userProfile = profile;
      this.loading = false;
    });
    this.authService.fetchUserProfile().subscribe({
      error: (error) => {
        console.error('Failed to load profile:', error);
        this.loading = false;
      }
    });
  }
  refreshProfile(): void {
    this.loadProfile();
  }
  logout(): void {
    this.authService.logout();
  }
  getInitials(name: string): string {
    return name
      .split(' ')
      .map(n => n[0])
      .join('')
      .toUpperCase()
      .substring(0, 2);
  }
}

Step 3: Create Login Component

Create src/app/components/login/login.ts:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';

import { AuthService } from '../../services/auth.service';
@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <h1>Sign In</h1>
          <p>Access your account with Microsoft SSO</p>
        </div>
        <div *ngIf="!isAuthenticated" class="login-content">
          <div class="login-illustration">
            <div class="microsoft-logo">
              <svg width="48" height="48" viewBox="0 0 48 48">
                <path fill="#f25022" d="M0 0h23v23H0z"/>
                <path fill="#00a4ef" d="M25 0h23v23H25z"/>
                <path fill="#7fba00" d="M0 25h23v23H0z"/>
                <path fill="#ffb900" d="M25 25h23v23H25z"/>
              </svg>
            </div>
          </div>
          <div class="login-form">
            <button
              (click)="login()"
              class="btn btn-microsoft"
              [disabled]="isLoading">
              <span *ngIf="!isLoading">Sign in with Microsoft</span>
              <span *ngIf="isLoading">Signing in...</span>
            </button>

            <div class="login-benefits">
              <h3>Benefits of signing in:</h3>
              <ul>
                <li>✓ Secure authentication</li>
                <li>✓ Single sign-on across apps</li>
                <li>✓ Access to personalized features</li>
                <li>✓ Automatic session management</li>
              </ul>
            </div>
          </div>
        </div>
        <div *ngIf="isAuthenticated" class="already-signed-in">
          <div class="success-icon">✓</div>
          <h2>You're already signed in!</h2>
          <p>Redirecting to your dashboard...</p>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./login.css']
})
export class Login implements OnInit {
  isAuthenticated = false;
  isLoading = false;
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}
  ngOnInit(): void {
    this.isAuthenticated = this.authService.isAuthenticated();

    if (this.isAuthenticated) {
      // Redirect authenticated users to home
      setTimeout(() => {
        this.router.navigate(['/home']);
      }, 2000);
    }
  }
  login(): void {
    this.isLoading = true;
    this.authService.loginRedirect();
  }
}

Testing and Troubleshooting

Step 1: Basic Testing

# Start development server
ng serve

# Open browser to http://localhost:4200
# Test authentication flow

Step 2: Common Issues and Solutions

Issue 1: Redirect URI Mismatch

Error: AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application

Solution:

Verify redirect URI in Azure portal matches exactly
Check for trailing slashes or case sensitivity
Ensure SPA platform is selected (not Web)

Issue 3: CORS Issues

Error: Access to fetch at 'https://login.microsoftonline.com/...' from origin 'http://localhost:4200' has been blocked by CORS policy

Solution:

Ensure you’re using SPA (Single Page Application) configuration
Verify MSAL configuration is correct
Check browser developer tools for specific error details

Issue 3: Token Issues

Error: InteractionRequiredAuthError or Token acquisition failed

Solution:

// Add error handling in your service
getAccessToken(): Observable<string> {
  const account = this.msalService.instance.getActiveAccount();
  if (!account) {
    return of('');
  }

  const request: SilentRequest = {
    scopes: ['User.Read'],
    account: account
  };
  return this.msalService.acquireTokenSilent(request).pipe(
    map(result => result.accessToken),
    catchError(error => {
      console.error('Silent token acquisition failed:', error);
      // Try interactive token acquisition
      return this.msalService.acquireTokenPopup(request).pipe(
        map(result => result.accessToken),
        catchError(popupError => {
          console.error('Popup token acquisition failed:', popupError);
          return of('');
        })
      );
    })
  );
}

Step 3: Debugging Tools

Enable MSAL Logging

// In msal.config.ts
export const msalConfig: Configuration = {
  // ... other config
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) return;
        console.log(`MSAL [${level}]: ${message}`);
      },
      piiLoggingEnabled: false,
      logLevel: LogLevel.Verbose // Enable verbose logging
    }
  }
};

Browser Developer Tools

Network Tab: Check for failed requests to Microsoft endpoints
Console Tab: Look for MSAL error messages
Application Tab: Inspect stored tokens in Session/Local Storage

Step 4: Testing Checklist

[] Login redirect works correctly
[] User can access protected routes after authentication
[] Logout clears session and redirects properly
[] Token refresh works automatically
[] Profile information displays correctly
[] Error handling works for network issues
[] Authentication guards protect routes properly

Best Practices

Security Best Practices

1. Token Storage

// Use sessionStorage for better security
export const msalConfig: Configuration = {
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage, // More secure than localStorage
    storeAuthStateInCookie: false // Set to true only if needed for IE11
  }
};

2. Scope Management

// Request minimal scopes needed
export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read'] // Only what you need
};

// Request additional scopes when needed
private requestAdditionalScopes(scopes: string[]): Observable<string> {
  const account = this.msalService.instance.getActiveAccount();
  const request = {
    scopes: scopes,
    account: account
  };

  return this.msalService.acquireTokenSilent(request).pipe(
    map(result => result.accessToken)
  );
}

3. Error Handling

// Comprehensive error handling
private handleAuthError(error: any): void {
  if (error.errorCode === 'user_cancelled') {
    console.log('User cancelled authentication');
    return;
  }

  if (error.errorCode === 'consent_required') {
    // Handle consent required
    this.msalService.acquireTokenPopup(this.loginRequest);
    return;
  }

  console.error('Authentication error:', error);
  // Show user-friendly error message
}

Performance Best Practices

1. Lazy Loading

// Use lazy loading for non-critical routes
const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent),
    canActivate: [MsalGuard]
  }
];

2. Caching Strategy

// Cache user profile to avoid repeated API calls
private userProfileCache: UserProfile | null = null;
private profileCacheExpiry: number = 0;

fetchUserProfile(): Observable<UserProfile | null> {
  const now = Date.now();

  // Return cached profile if still valid (5 minutes)
  if (this.userProfileCache && now < this.profileCacheExpiry) {
    return of(this.userProfileCache);
  }

  return this.http.get(graphConfig.graphMeEndpoint).pipe(
    map((profile: any) => {
      this.userProfileCache = this.mapProfile(profile);
      this.profileCacheExpiry = now + (5 * 60 * 1000); // 5 minutes
      return this.userProfileCache;
    })
  );
}

Accessibility Best Practices

1. ARIA Labels

<!-- Add proper ARIA labels for authentication states -->
<button 
  (click)="login()" 
  [attr.aria-label]="isLoading ? 'Signing in, please wait' : 'Sign in with Microsoft'"
  [disabled]="isLoading">
  Sign In
</button>

2. Loading States

<!-- Provide clear loading feedback -->
<div *ngIf="isLoading" 
     role="status" 
     aria-live="polite"
     class="loading-spinner">
  <span class="sr-only">Loading authentication...</span>
</div>

Monitoring and Analytics

1. Authentication Events

// Track authentication events
private trackAuthEvent(event: string, data?: any): void {
  // Send to your analytics service
  console.log('Auth Event:', event, data);

  // Example with Application Insights
  // this.applicationInsights.trackEvent(event, data);
}
// Use in authentication flows
login(): void {
  this.trackAuthEvent('login_attempt');
  this.msalService.loginRedirect();
}

2. Error Tracking

// Track authentication errors
private trackAuthError(error: any): void {
  const errorData = {
    errorCode: error.errorCode,
    errorMessage: error.message,
    timestamp: new Date().toISOString()
  };

  // Send to error tracking service
  console.error('Auth Error:', errorData);
}

Conclusion

You’ve successfully implemented Azure Entra ID SSO in your Angular standalone application! This comprehensive implementation provides:

What You’ve Accomplished

✅ Secure Authentication: Users can sign in with their Microsoft credentials

✅ Route Protection: Sensitive areas are protected by authentication guards ✅ Token Management: Automatic token refresh and secure storage

✅ User Profile Integration: Access to user information from Microsoft Graph

✅ Error Handling: Comprehensive error handling and user feedback

✅ Best Practices: Security, performance, and accessibility considerations

Next Steps

1. Production Deployment:

Update redirect URIs for production environment
Configure proper HTTPS certificates
Set up monitoring and logging

2. Enhanced Features:

Implement role-based access control
Add multi-tenant support if needed
Integrate with Microsoft Graph APIs

3. Testing:

Add unit tests for authentication service
Implement e2e tests for authentication flows
Test with different user scenarios

Additional Resources

Support and Community

Happy coding! 🚀

This guide provides a solid foundation for implementing Azure Entra ID SSO in Angular applications. Remember to keep your dependencies updated and follow Microsoft’s latest security recommendations.

Forem: Vikash Kumar

The “Proving” Trap: How Positioning Myself as a Strategic Architect Changed My Career

1. From “How” to “Why”: Evolving the Mindset

2. Shifting the Lens from Depth to Impact

3. Scaling Influence: From Gatekeeper to Force Multiplier

The Takeaway

React 101: Quick Start Guide

What is React?

Setup & Installation

JSX Syntax

Components

Functional Component

Class Component (Legacy)

Props

State

Event Handling

Conditional Rendering

Lists & Keys

Hooks Overview

Common Hooks:

useEffect Hook

Forms & Controlled Components

Component Lifecycle

Quick Reference

Component Structure

Common Patterns

Best Practices

Useful Snippets

Complete Mini-App Example

Next Steps

React + Redux Toolkit QuickStart Guide

Why Redux (and why Redux Toolkit)

Set up a sample React application

Create a new project with Vite

Using Redux Toolkit in React

1) Create a slice (src/features/counter/counterSlice.ts or .js)

2) Configure the store (src/store.ts or .js)

3) Typed hooks (optional but recommended for TS)

4) Wrap your app with the Provider (src/main.tsx)

5) Use Redux in a component (src/features/counter/Counter.tsx)

Async example: fetching posts with createAsyncThunk

Testing a slice quickly (Vitest)

Common pitfalls & troubleshooting

Next steps

Quick reference

Time and Space Complexity — Not so complex

Time and Space Complexity — Not so complex

Overview

Why Is This Important?

Time Complexity

Common Time Complexities

Example: Linear Search

Example: Binary Search

Space Complexity

Common Space Complexities

Example: Storing Results

Big O Notation Summary Table

Visual Guide

Conclusion

QPID — A simple story

QPID — A simple story

What is QPID?

Usage of QPID

Basic Setup of QPID

Validate Setup

How to Use QPID

Example Use Case: Order Processing System

Scenario

QPID Broker Configuration Example

Python Producer Example

Python Consumer Example

Real World Benefits

QPID Order Processing Flow Diagram

Best Practices

Spring Boot Quick Start Guide

Table of Contents

1. Project Setup

Using Spring Initializr

Project Structure

Key Dependencies (pom.xml)