Forem: Heba Allah Hashim

Annotated in Python and FastAPI: Deep Dive

Heba Allah Hashim — Sat, 04 Apr 2026 15:03:38 +0000

What is `Annotated` in Python?

Annotated is a feature in Python’s type hints system (introduced in Python 3.9 with PEP 593).

It allows you to:

Define the type of a variable
Add extra metadata about how that variable should be handled

Python itself ignores this metadata at runtime, but tools (like FastAPI, Pydantic, or linters) can use it.

Example

from typing import Annotated

age: Annotated[int, "must be positive"]

Breakdown:

int: the core type
"must be positive": metadata for tools to interpret

Python itself doesn’t enforce "must be positive", but other libraries could use it for validation.

FastAPI and `Annotated`

FastAPI uses Annotated to inject request data (like query params, headers, cookies) into your function parameters.

from typing import Annotated
from fastapi import Header

async def get_token_header(
    x_token: Annotated[str, Header()]
):
    return x_token

How it works

x_token: The parameter name
str: The type (must be a string)
Header(): Metadata telling FastAPI: “Look in the HTTP headers for X-Token”

FastAPI uses this metadata to extract values from the HTTP request automatically.

Why `Annotated` matters in FastAPI

It helps FastAPI:

Separate type definition from request metadata
Improve readability
Make dependencies explicit
Enable powerful dependency injection patterns

Python Modules and Package

Heba Allah Hashim — Sat, 04 Apr 2026 14:58:28 +0000

1. Package

A package is a directory (folder) that contains an __init__.py file.

The __init__.py tells Python:
“This folder is a Python package, so you can import from it.”

Example:

myapp/
├── __init__.py
├── helpers.py

myapp is now a package.

You can import like this:

from myapp import helpers

Key idea:

A package lets you group related modules into one namespace.

2. Module

A module is just a single Python file (.py) that contains Python code.

You can import it and use its variables, functions, classes, etc.

Example:

# utils.py (This is a Python module)

def greet(name):
    return f"Hello, {name}"

You can import this in another file:

import utils

print(utils.greet("Alice"))

Key idea:

Any .py file is a module.

3. Subpackages and Submodules

Packages inside packages ⇒ Subpackages
Modules inside subpackages ⇒ Submodules

Example structure:

myapp/
├── __init__.py
├── api/  → is a subpackage
│   ├── __init__.py
│   ├── users.py  → is a submodule
│   └── items.py
├── core.py

Key idea:

Subpackages allow you to organize large codebases into smaller logical units.

Why so many `init.py` files?

The __init__.py file marks a directory as a package or subpackage.
Without it, Python won’t treat the folder as importable.

Data Warehouse

Heba Allah Hashim — Sat, 04 Apr 2026 14:48:07 +0000

Definition

A central repository of information that can be analyzed to make more informed decisions.
A data warehouse is specially designed for data analytics, which involves reading large amounts of data to understand relationships and trends across the data.
A data warehouse requires that the data be organized in a tabular format.

Architectures

Data Source Layer: Operational systems, CRM, ERP, and external files (Excel, JSON, SQL) that provide raw data.
Data Staging Area: A temporary storage area where data is cleaned, transformed, and integrated before loading into the main warehouse.
Storage Layer (Warehouse/Data Marts): The central database (RDBMS or Cloud) holding historical and structured data. It may use a Star or Snowflake Schema for organizing data.
Data Access/Analytics Layer: Front-end tools for reporting, dashboards, and BI (e.g., SQL tools, Tableau).
Metadata Layer: Data that describes the structure, relationships, and context of the stored data.

Benefits

Informed decision making
Consolidated data from many sources
Historical data analysis
Data quality, consistency, and accuracy
Separation of analytics processing from transactional databases, which improves the performance of both systems

ETL (Extract Transform Load)

Definition:
is the process of combining data from multiple sources into a large, central repository called a data warehouse, By applying the process of extract, transform, and load (ETL).

OLAP (Online analytical processing)

Definition:
is a technology used to analyze data stored in a data warehouse by organizing it into multiple dimensions, enabling fast queries and meaningful business insights.

Data modeling

Data modeling: is the representation of data in data warehouses or online analytical processing (OLAP) databases as a star or snowflake schema.

Operations

Roll up
Drill down
Slice
Dice
Pivot

React.js Refresher

Heba Allah Hashim — Sat, 04 Apr 2026 14:35:15 +0000

💡 Imperative vs. declarative programming

The code above is a good example of imperative programming. You're writing the steps for how the user interface should be updated. But when it comes to building user interfaces, a declarative approach is often preferred because it can speed up the development process. Instead of having to write DOM methods, it would be helpful if developers were able to declare what they want to show (in this case, an h1 tag with some text).

In other words, imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. 🍕

What is JSX?

JSX is a syntax extension for JavaScript, but browsers don't understand JSX out of the box, so you'll need a JavaScript compiler to transform your JSX code into regular JavaScript.

React core concepts

1. Components

A component is a function that returns UI elements.
React components should be capitalized to distinguish them from plain HTML and JavaScript
Use React components the same way you'd use regular HTML tags, with angle brackets <>

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);

2. Props (properties)

Are inputs read-only information you pass to a React component to make it dynamic and reusable. And can be passed to components similarly to HTML attributes, but you can pass any JavaScript value through them, including objects and functions.
Props is an object { title: "React" }

Accessing props

Dot Notation (props.title)

You write in JSX	You access in component
`title="React"`	`props.title`
`name="Heba"`	`props.name`

Destructuring in Parameters (recommended)

function Header({ title }) {
  return <h1>{title}</h1>;
}

3. State

the logic for updating the state should be kept within the component where state was initially created.
Every time React re-renders, it runs the function again from scratch.

function HomePage() {
  console.log('Component re-rendered');

  // vanilla js
  let normalLikes = 0; 
  function handleNormalClick() {
    normalLikes += 1;
    console.log('normalLikes:', normalLikes);
  }

  // using react states
  const [stateLikes, setStateLikes] = React.useState(0);
  function handleStateClick() {
    setStateLikes(prev => prev + 1);
  }

  return (
    <div>
      <h2>Normal: {normalLikes}</h2>
      <button onClick={handleNormalClick}>Normal +1</button>

      <h2>State: {stateLikes}</h2>
      <button onClick={handleStateClick}>State +1</button>
    </div>
  );
}

Key Difference

let normalLikes = 0
- Lives inside the function
- Gets recreated on every render
- Value is lost
useState
- Lives inside React
- Value is stored outside the function
- Value persists between renders

💡 Mental Model

Render = run function again

Normal variables = reset every time

State = saved and restored by React

💡 Events Handling (onClick)

React event handlers (like onClick) expect a function, not a function call.

Incorrect:

<button onClick={console.log('rb')}>Like</button>

Executes immediately during the render

Nothing happens on click

Correct:

<button onClick={() => console.log('rb')}>Like</button>

or

function handleClick() {
  console.log('rb');
}
<button onClick={handleClick}>Like</button>

Key Idea:

onClick={fn} → pass function (correct)

onClick={fn()} → execute immediately (wrong)

Forem: Heba Allah Hashim

Annotated in Python and FastAPI: Deep Dive

What is `Annotated` in Python?

Example

Breakdown:

FastAPI and `Annotated`

How it works

Why `Annotated` matters in FastAPI

Python Modules and Package

1. Package

Example:

Key idea:

2. Module

Example:

Key idea:

3. Subpackages and Submodules

Example structure:

Key idea:

Why so many `init.py` files?

Data Warehouse

Definition

Architectures

Benefits

ETL (Extract Transform Load)

OLAP (Online analytical processing)

Data modeling

Operations

React.js Refresher

💡 Imperative vs. declarative programming

What is JSX?

React core concepts

1. Components

2. Props (properties)

Accessing props

3. State

Key Difference

💡 Mental Model

💡 Events Handling (onClick)

Forem: Heba Allah Hashim

Annotated in Python and FastAPI: Deep Dive

What is Annotated in Python?

Example

Breakdown:

FastAPI and Annotated

How it works

Why Annotated matters in FastAPI

Python Modules and Package

1. Package

Example:

Key idea:

2. Module

Example:

Key idea:

3. Subpackages and Submodules

Example structure:

Key idea:

Why so many __init__.py files?

Data Warehouse

Definition

Architectures

Benefits

ETL (Extract Transform Load)

OLAP (Online analytical processing)

Data modeling

Operations

React.js Refresher

💡 Imperative vs. declarative programming

What is JSX?

React core concepts

1. Components

2. Props (properties)

Accessing props

3. State

Key Difference

💡 Mental Model

💡 Events Handling (onClick)

What is `Annotated` in Python?

FastAPI and `Annotated`

Why `Annotated` matters in FastAPI

Why so many `init.py` files?