diff --git a/ProjectOrientedSessions/Session05/React/Mosh React.md b/ProjectOrientedSessions/Session05/React/Mosh React.md
deleted file mode 100644
index 12a60f2..0000000
--- a/ProjectOrientedSessions/Session05/React/Mosh React.md	
+++ /dev/null
@@ -1 +0,0 @@
-- [ ] Watch https://www.youtube.com/watch?v=SqcY0GlETPk&ab_channel=ProgrammingwithMosh
\ No newline at end of file
diff --git a/ProjectOrientedSessions/Session05/Session05 Additional Info.md b/ProjectOrientedSessions/Session05/Session05 Additional Info.md
index e69de29..1b35798 100644
--- a/ProjectOrientedSessions/Session05/Session05 Additional Info.md	
+++ b/ProjectOrientedSessions/Session05/Session05 Additional Info.md	
@@ -0,0 +1,436 @@
+
+## What is CORS? (Chat GPT)
+### CORS (Cross-Origin Resource Sharing)
+
+**What it is:** CORS is a browser security feature that blocks requests to a different domain unless explicitly allowed by the server.
+### 🔐 What is CORS **really** for?
+
+CORS is **not** about protecting the backend server.  
+It’s about **protecting users** from **malicious websites** using their browser as a weapon.
+
+---
+
+### 🧠 Imagine this attack:
+
+You’re logged into your **bank** in one browser tab (`bank.com`).
+
+Now, you visit a shady website in another tab (`evil.com`). That site has JavaScript that tries to send this:
+
+```js
+fetch('https://bank.com/api/transfer?amount=5000&to=hacker', {
+  credentials: 'include'  // it sends your bank cookies!
+});
+```
+
+➡️ If the browser allowed this freely, the request would go through **using your login session**, and you’d lose money.
+
+---
+
+### 💥 Enter CORS
+
+So the browser says:
+
+> “Hold on. This JavaScript is from `evil.com`, and it’s trying to talk to `bank.com`. I won’t let that happen **unless `bank.com` says it’s okay**.”
+
+That’s why the **backend server** must respond with something like:
+
+```http
+Access-Control-Allow-Origin: https://mytrusteddomain.com
+```
+
+Only then will the browser say, “Okay, go ahead.”
+
+---
+
+### So the purpose of CORS is:
+
+✅ To **restrict browsers** from sending or accepting responses from **cross-origin** sources  
+❌ Not to protect the backend  
+❌ Not to restrict Postman, curl, servers, or mobile apps
+
+---
+
+### 🔄 In Dev Work (like your React + API case):
+
+- You’re running React at `http://localhost:5173`
+- You’re running ASP.NET Core API at `https://localhost:7001`
+- The browser sees this as two **different origins** → blocks the request unless CORS is enabled on the API.
+    
+---
+
+### 🧪 Why Postman works:
+- Postman isn’t a browser    
+- Postman doesn’t care about same-origin policy
+- Postman just sends requests like your backend would    
+
+---
+
+### ✅ Conclusion:
+
+- **CORS is a browser feature to protect users**
+- **It restricts frontend JavaScript from calling other domains unless explicitly allowed**
+- **You must configure your server to say “Yes, I allow your frontend to talk to me”**
+
+
+## Feature-based Folder Structure
+> 
+## Explanation of the `agent.ts`
+>
+## React.FC
+
+### what is `React.FC`?
+
+- `React.FC` (or `React.FunctionComponent`) is a **TypeScript type** that you can use to type your functional React components.
+    
+- It **tells TypeScript** that:
+    - This component is a function
+    - It **receives props** (in your case, `Props`)
+    - It **returns JSX** (it returns something React can render)
+
+---
+
+### Why use it?
+
+Here’s what you get when you use `React.FC`:
+1. ✅ **Prop typing** — You get auto-complete and error checking for props.
+2. ✅ **Children** are automatically included. (More on this below.)
+3. ✅ **Cleaner code** because TypeScript understands the shape of the component.
+
+---
+
+### Without `React.FC`
+
+You could just write:
+
+```tsx
+const TransportationCard = ({ transportation }: Props) => { ... }
+```
+You lose some "extra typing safety" like automatic `children` typing.
+
+---
+
+### Small Detail: `children`
+
+When you use `React.FC`, **TypeScript automatically** allows your component to accept `children` too — even if you didn’t define it in your `Props`.
+
+For example:
+
+```tsx
+<TransportationCard transportation={t}>
+  <p>Hello</p>   // This would be valid automatically
+</TransportationCard>
+```
+
+Because `children` is **always** part of a `React.FC`.
+
+👉 If you **don't** use `React.FC`, and you want to accept `children`, you have to **manually** add it to your props.
+
+---
+
+### Some developers today...
+**Some people** (even in big companies) prefer **NOT** to use `React.FC` anymore because:
+- It **forces children** even when you don’t want children.
+- It's **a little bit redundant** — you can already just type props without it.
+
+> So in modern codebases, **both styles are OK** — it’s just a preference.
+
+---
+
+### Quick Summary:
+
+| Using `React.FC`                             | Not using `React.FC`                            |
+| :------------------------------------------- | :---------------------------------------------- |
+| Good for simple, typed functional components | Good if you want full manual control over props |
+| Auto-includes `children` prop                | You must manually add `children` if needed      |
+| Easy and quick                               | More customizable                               |
+
+---
+
+## `CityDropdown` Component:
+
+### 1. **State Variables**
+
+```tsx
+const [cities, setCities] = useState<City[]>([]);
+const [selectedCity, setSelectedCity] = useState<number | undefined>();
+```
+
+- `cities`: holds the list of cities retrieved from the backend (starts empty `[]`).
+- `selectedCity`: holds the currently selected city’s ID (`number`) or `undefined` if nothing is selected yet.
+    
+
+---
+
+### 2. **Fetching Cities on Mount**
+
+```tsx
+useEffect(() => {
+  agent.Cities.list()
+    .then(setCities)
+    .catch((err) => console.error("error loading cities", err));
+}, []);
+```
+
+- When the component **mounts** (`[]` dependency array = run once), it calls `agent.Cities.list()`.    
+- `agent.Cities.list()` presumably returns a promise that resolves to an array of `City` objects.
+- On success → `setCities` updates the `cities` state.
+- On failure → logs an error to the console.
+
+---
+
+### 3. **Rendering the Dropdown**
+
+```tsx
+<select
+  value={selectedCity}
+  onChange={(e) => setSelectedCity(Number(e.target.value))}
+>
+  <option value="">Select a City</option>
+  {cities.map((city) => (
+    <option key={city.id} value={city.id}>
+      {city.title}
+    </option>
+  ))}
+</select>
+```
+
+- Renders a `<select>` (dropdown).
+- Its value is bound to `selectedCity`.
+- When the user changes the selection (`onChange`), it updates `selectedCity` by converting the selected `value` from a string to a number (`Number(e.target.value)`).
+- The dropdown always starts with a placeholder option: **"Select a City"**.
+- It dynamically creates an `<option>` for each city in the `cities` array:
+    - `key` and `value` are the city's `id`.
+    - Displayed text is the city's `title`.        
+
+---
+
+### What is `useEffect`?
+
+🔹 **`useEffect` is a React Hook**.  
+It **tells React to run some code after the component renders**.
+
+
+In code:
+
+```tsx
+useEffect(() => {
+  agent.Cities.list()
+    .then(setCities)
+    .catch((err) => console.error("error loading cities", err));
+}, []);
+```
+
+- This function (`() => { ... }`) **runs right after** the component is first shown (because of `[]` — the empty array).
+- Inside it, you are **calling your API** (`agent.Cities.list()`) to get the cities.
+- When the server **responds with a list of cities**, you **save** them into your component's memory (state) by calling `setCities(data)`.
+
+---
+
+### What is `useState`?
+
+🔹 **`useState` is another React Hook**.  
+It **creates a piece of memory** for your component.
+
+In code:
+
+```tsx
+const [cities, setCities] = useState<City[]>([]);
+const [selectedCity, setSelectedCity] = useState<number | undefined>();
+```
+
+Here’s what is happening:
+- `cities` is a variable that starts as an **empty array** (`[]`).
+- `setCities` is a **function** you use to **change** the value of `cities`.
+
+Same with `selectedCity`:
+- `selectedCity` starts as `undefined` (nothing selected yet).
+- `setSelectedCity` lets you **update** which city is selected.
+    
+
+---
+
+## `TransportationCard` Component
+
+### 1. **The Component Function**
+
+```tsx
+const TransportationCard: React.FC<Props> = ({ transportation }) => {
+```
+
+- This is a **React Functional Component**.
+- It takes `transportation` from props (destructured directly).    
+- It **returns JSX** that shows the transportation info in a styled card.
+
+---
+### 2. **Inside the JSX**
+
+#### 2.1 Left Side — Price and Button
+
+```tsx
+<div className="flex flex-col items-center">
+  <div className="text-blue-600 font-bold text-lg">
+    {transportation.price} Toman
+  </div>
+  <button className="bg-blue-500 text-white px-4 py-2 rounded-md mt-2 hover:bg-blue-600">
+    Select Ticket
+  </button>
+</div>
+```
+
+- Shows the **price** (`price` field) styled with blue, bold text. 
+- Has a **Select Ticket** button — blue, rounded, changes shade on hover.
+
+---
+
+#### 2.2 Middle — Trip Info
+
+```tsx
+<div className="flex-1 mx-4 text-center">
+  <div className="font-semibold text-gray-700">
+    {transportation.companyTitle}
+  </div>
+  <div className="flex items-center justify-center mt-2">
+    <div className="mx-2">{transportation.fromCityTitle}</div>
+    <span className="text-gray-400">→</span>
+    <div className="mx-2">{transportation.toCityTitle}</div>
+  </div>
+  <div className="text-sm text-gray-500 mt-1">
+    {new Date(transportation.startDateTime).toLocaleDateString("en", {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}
+  </div>
+</div>
+```
+
+- Shows the **company name**.    
+- Shows **From → To** cities in a neat way with an arrow (`→`) between them.
+- Shows the **departure time**:
+    - `startDateTime` is parsed using `new Date(...)`.
+    - `toLocaleDateString("en", { hour: "2-digit", minute: "2-digit" })` formats it to show just **hours and minutes**.
+
+---
+#### 2.3 Right Side — Company Logo
+
+```tsx
+<div className="w-12 h-12">
+  <img
+    src="/images/company-placeholder.png"
+    alt="company"
+    className="w-full h-full object-contain"
+  />
+</div>
+```
+
+- Displays a small company **logo image** (placeholder image for now).
+- `object-contain` keeps the image inside the box without stretching.
+
+## `TrasnportationSearchForm` Component
+
+### 🧠 Main Concepts Used:
+
+| Feature                   | Purpose                                                                      |
+| :------------------------ | :--------------------------------------------------------------------------- |
+| `useState`                | To **store and manage** the form inputs, cities, results, and loading status |
+| `useEffect`               | To **load the list of cities once** when the component appears               |
+| **Typing with models**    | `City`, `TransportationSearchRequest`, `TransportationSearchResult`          |
+| **Event handling**        | To update form values and trigger the search                                 |
+| **Conditional rendering** | Show "Loading", "No results", or "Results" dynamically                       |
+|                           |                                                                              |
+
+---
+
+### 📦 Let's break down the code:
+
+#### 1. ✍️ States
+
+```tsx
+const [searchResults, setSearchResults] = useState<TransportationSearchResult[]>([]);
+const [loading, setLoading] = useState(false);
+const [cities, setCities] = useState<City[]>([]);
+const [form, setForm] = useState<TransportationSearchRequest>({
+  fromCityId: undefined,
+  toCityId: undefined,
+  startDate: null,
+  endDate: null,
+  vehicleTypeId: undefined,
+});
+```
+
+You define **4 states**:
+
+- `searchResults`: List of found transportations
+- `loading`: True/false if waiting for API
+- `cities`: List of available cities
+- `form`: The form input values the user is selecting
+
+All typed properly ✅
+
+---
+
+#### 2. 📡 Fetch cities automatically (useEffect)
+
+```tsx
+useEffect(() => {
+  agent.Cities.list().then(setCities);
+}, []);
+```
+
+**Meaning**:
+- When the page **first loads**, it **calls the API** to get cities.
+- `agent.Cities.list()` calls your backend, and when it gets the cities, it puts them into `cities` state.    
+- The empty `[]` **dependency array** means this happens **only once**, not every time anything changes.
+
+---
+
+#### 3. ✏️ Handle input changes
+
+```tsx
+const handleChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => { ... }
+```
+
+Whenever a user types/selects:
+- You detect **which field** (`name`) and **what value** (`value`) they changed
+- Update the `form` state accordingly:    
+    - `fromCityId` and `toCityId` are converted to numbers (`parseInt`)        
+    - `startDate` and `endDate` allow null
+    - Other fields (if any) are copied directly
+
+---
+
+#### 4. 🔍 Handle Search button
+
+```tsx
+const handleSearch = () => { ... }
+```
+
+When the user clicks **Search**:
+- Set `loading` to `true`    
+- Call the backend API `agent.TransportationSearch.search(form)`
+- When the result comes back:
+    - Save it into `searchResults`
+- If error: log it
+- Finally, set `loading` to `false` again
+
+---
+
+#### 5. 🖥️ Return (render) JSX
+You build a UI:
+
+- **Vehicle Types** (Bus, Train, Airplane) selectable with a click → sets `vehicleTypeId`
+- **From City** and **To City** dropdowns
+- **Start and End Date** inputs
+- **Search Button** to trigger the search
+- **Result area** that shows:
+    - If loading: "Loading..."
+    - If no results: "No results found"        
+    - If results: List of `TransportationCard` components for each found item.
+        
+
+---
+
+
+
+
+
+
diff --git a/ProjectOrientedSessions/Session05/Session05 Backend.md b/ProjectOrientedSessions/Session05/Session05 Backend.md
index 1066c8b..4481dd2 100644
--- a/ProjectOrientedSessions/Session05/Session05 Backend.md	
+++ b/ProjectOrientedSessions/Session05/Session05 Backend.md	
@@ -1,4 +1,6 @@
-# CORS (Backend Repository)
+
+# 🛠️ Task Checklist
+## CORS (Backend Repository)
 - [ ] open `program.cs` and add the following lines
 
 ```c#
@@ -17,3 +19,9 @@ builder.Services.AddCors(options =>
 app.UseCors("Frontend");
 ```
 
+
+# 🧠 Hints & Notes
+# 🙌 Acknowledgements
+
+- ChatGPT for snippet refinement and explanations
+# 🔍 References
diff --git a/ProjectOrientedSessions/Session05/Session05 Frontend.md b/ProjectOrientedSessions/Session05/Session05 Frontend.md
index 63446a9..438da7c 100644
--- a/ProjectOrientedSessions/Session05/Session05 Frontend.md	
+++ b/ProjectOrientedSessions/Session05/Session05 Frontend.md	
@@ -1,32 +1,24 @@
 
-# Preparation 
+# 🛠️ Task Checklist
+## Preparation 
 - [ ] Watch https://www.youtube.com/watch?v=SqcY0GlETPk&ab_channel=ProgrammingwithMosh
-
-
-# Important Note Before Starting
-
-## From now on, this session will be focused on the **frontend repository**
-
-## If you have already created a the frontend project, with the deprecated command(create-react-app), you need to first delete all that, commit the changes, and then create the project using the next instruction
-
-# Branching
+## 🚧Branching (Project Setup)
 - [ ] Create the develop branch 
 - [ ] Create the feature/project-setup branch based on develop
 
-# Creating a project (using Vite)
+## Creating a project (using Vite)
 
 ```
 npm create vite@latest alibabaclone-frontend --template react-ts
 ```
 
-# React Folder Structure
+## React Folder Structure
 - [ ] Create the folders as shown in the picture below
 ![[Pasted image 20250427154917.png]]
 - [ ] move `App.tsx` and `App.css` to 'shared/layout/'
 - [ ] adjust the dependencies in these files and `index.html`
 
-# Installing packages
-
+## Installing packages
 - [ ] run this command to install these packages: `uuid`, `react-router-dom`, and `axios`
 ```bash
 npm install uuid react-router-dom axios
@@ -36,17 +28,14 @@ npm install uuid react-router-dom axios
 npm install @reduxjs/toolkit react-redux
 ```
 
-# CSS TAILWIND
-
-## **Important Note About CSS**
-
+## CSS/Component Library
 There are different ways to handle `CSS` styling when creating components.  
 You can choose any approach you prefer:
 1. **Plain CSS**
     - Write regular `.css` files and import them into your components.
 2. **CSS Modules**
     - Create component-specific `.module.css` files to automatically scope styles.
-3. **TailwindCSS**
+3. `**TailwindCSS**`
     - A utility-first CSS framework where you apply classes directly in your HTML/JSX.   
 4. **Sass / SCSS**
     - An extension of CSS with variables, nesting, and more features. Can be used alone or with modules.
@@ -56,21 +45,20 @@ You can choose any approach you prefer:
     - Example: Material-UI (MUI), Ant Design, Chakra UI, etc.
     - These often include ready-made components with built-in styling.
 
-
 - [ ] install the css/component library of your choice 
-### For tailwind, use the link below (skip the first step)
-Tailwind
-https://ui.shadcn.com/docs/installation/vite
+### Tailwind
+If you use tailwind with ShadCN, use this link (skip the first step)
+[Tailwind with ShadCN](https://ui.shadcn.com/docs/installation/vite)
 
-# Merge 
+
+## 🚧Merge 
 - [ ] Create a PR and merge the current branch with develop
-# Branching 
+## 🚧Branching 
 - [ ] Create the feature/transportation-search branch based on develop
-# Creating Models 
+## Creating Models 
 - [ ] Create models for the DTOs that are used to convey data between backend and frontend
-📂 Suggested Folder: shared/models/[relatedFolder]
+📂 `Suggested Folder: shared/models/[RelatedFolder]`
 
-Create a `[dtoName].ts` in the related folder, and define the model
 ## Example:
 ```ts
 export interface TransportationSearchRequest{
@@ -82,14 +70,12 @@ export interface TransportationSearchRequest{
 }
 ```
 
-# Handling API Calls
+## Handling API Calls
 
 - [ ]  Create `agent.ts` to handle API calls using axios
-
 📂 Suggested Folder: shared/api/
-
+> Note: the name and the location of this file has changed since writing this note
 - [ ] Adjust the `baseURL` to address your web API port
-
 ```ts
 import axios, { AxiosResponse } from 'axios';
 
@@ -126,8 +112,8 @@ const agent = {
 export default agent;
 ```
 
-# Creating `CityDropdown` Component
-📂 Suggested Folder: shared/api/
+## Creating `CityDropdown` Component
+📂 Suggested Folder: features/city/
 - [ ] Create components for the parts of the UI you need
 
 ```ts
@@ -163,8 +149,8 @@ const CityDropdown = () => {
 
 export default CityDropdown;
 ```
-## **See the analysis of `CityDropdown` component code in the additional info**
-# Creating `transportationCard` Component
+- [ ] **See the analysis of `CityDropdown` component code in the additional info**
+## Creating `transportationCard` Component
 ```ts
 import { TransportationSearchResult } from "@/shared/models/transportation/transportationSearchResult";
 import React from "react";
@@ -220,479 +206,16 @@ const TransportationCard: React.FC<Props> = ({ transportation }) => {
 export default TransportationCard;
 ```
 
-# Creating `transportationSearchForm` Component
+## Creating `transportationSearchForm` Component
 
 See the code from:
 https://github.com/MehrdadShirvani/AlibabaClone-Frontend/tree/develop/alibabaclone-frontend/src/features/transportation
 
-# Additional Notes:
-## What is vite
-## What is CORS?
-### CORS (Cross-Origin Resource Sharing)
-
-**What it is:** CORS is a browser security feature that blocks requests to a different domain unless explicitly allowed by the server.
-### 🔐 What is CORS **really** for?
-
-CORS is **not** about protecting the backend server.  
-It’s about **protecting users** from **malicious websites** using their browser as a weapon.
-
----
-
-### 🧠 Imagine this attack:
-
-You’re logged into your **bank** in one browser tab (`bank.com`).
-
-Now, you visit a shady website in another tab (`evil.com`). That site has JavaScript that tries to send this:
-
-```js
-fetch('https://bank.com/api/transfer?amount=5000&to=hacker', {
-  credentials: 'include'  // it sends your bank cookies!
-});
-```
-
-➡️ If the browser allowed this freely, the request would go through **using your login session**, and you’d lose money.
-
----
-
-### 💥 Enter CORS
-
-So the browser says:
-
-> “Hold on. This JavaScript is from `evil.com`, and it’s trying to talk to `bank.com`. I won’t let that happen **unless `bank.com` says it’s okay**.”
-
-That’s why the **backend server** must respond with something like:
-
-```http
-Access-Control-Allow-Origin: https://mytrusteddomain.com
-```
-
-Only then will the browser say, “Okay, go ahead.”
-
----
-
-### So the purpose of CORS is:
-
-✅ To **restrict browsers** from sending or accepting responses from **cross-origin** sources  
-❌ Not to protect the backend  
-❌ Not to restrict Postman, curl, servers, or mobile apps
-
----
-
-### 🔄 In Dev Work (like your React + API case):
-
-- You’re running React at `http://localhost:5173`
-- You’re running ASP.NET Core API at `https://localhost:7001`
-- The browser sees this as two **different origins** → blocks the request unless CORS is enabled on the API.
-    
----
-
-### 🧪 Why Postman works:
-- Postman isn’t a browser    
-- Postman doesn’t care about same-origin policy
-- Postman just sends requests like your backend would    
-
----
-
-### ✅ Conclusion:
-
-- **CORS is a browser feature to protect users**
-- **It restricts frontend JavaScript from calling other domains unless explicitly allowed**
-- **You must configure your server to say “Yes, I allow your frontend to talk to me”**
-
-
-## Feature-based Folder Structure
-## Explanation of the `agent.ts`
-
-## React.FC
-
-### In your code:
-
-```tsx
-const TransportationCard: React.FC<Props> = ({ transportation }) => { ... }
-```
-
-You're using `React.FC<Props>`.  
-✅ `FC` stands for **Function Component**.
-
----
-
-### So what is `React.FC` exactly?
-
-- `React.FC` (or `React.FunctionComponent`) is a **TypeScript type** that you can use to type your functional React components.
-    
-- It **tells TypeScript** that:
-    - This component is a function
-    - It **receives props** (in your case, `Props`)
-    - It **returns JSX** (it returns something React can render)
-
----
-
-### Why use it?
-
-Here’s what you get when you use `React.FC`:
-1. ✅ **Prop typing** — You get auto-complete and error checking for props.
-2. ✅ **Children** are automatically included. (More on this below.)
-3. ✅ **Cleaner code** because TypeScript understands the shape of the component.
-
----
-
-### Without `React.FC`
-
-You could just write:
-
-```tsx
-const TransportationCard = ({ transportation }: Props) => { ... }
-```
-and it would work!  
-But you lose some "extra typing safety" like automatic `children` typing.
-
----
-
-### Small Detail: `children`
-
-When you use `React.FC`, **TypeScript automatically** allows your component to accept `children` too — even if you didn’t define it in your `Props`.
-
-For example:
-
-```tsx
-<TransportationCard transportation={t}>
-  <p>Hello</p>   // This would be valid automatically
-</TransportationCard>
-```
-
-Because `children` is **always** part of a `React.FC`.
-
-👉 If you **don't** use `React.FC`, and you want to accept `children`, you have to **manually** add it to your props.
-
----
-
-### Some developers today...
-
-**Some people** (even in big companies) prefer **NOT** to use `React.FC` anymore because:
-
-- It **forces children** even when you don’t want children.
-    
-- It's **a little bit redundant** — you can already just type props without it.
-    
-
-> So in modern codebases, **both styles are OK** — it’s just a preference.
-
----
-
-### Quick Summary:
-
-|Using `React.FC`|Not using `React.FC`|
-|:--|:--|
-|Good for simple, typed functional components|Good if you want full manual control over props|
-|Auto-includes `children` prop|You must manually add `children` if needed|
-|Easy and quick|More customizable|
-
----
-
----
-
-## `CityDropdown` Component:
-
-### 1. **State Variables**
-
-```tsx
-const [cities, setCities] = useState<City[]>([]);
-const [selectedCity, setSelectedCity] = useState<number | undefined>();
-```
-
-- `cities`: holds the list of cities retrieved from the backend (starts empty `[]`).
-- `selectedCity`: holds the currently selected city’s ID (`number`) or `undefined` if nothing is selected yet.
-    
-
----
-
-### 2. **Fetching Cities on Mount**
-
-```tsx
-useEffect(() => {
-  agent.Cities.list()
-    .then(setCities)
-    .catch((err) => console.error("error loading cities", err));
-}, []);
-```
-
-- When the component **mounts** (`[]` dependency array = run once), it calls `agent.Cities.list()`.    
-- `agent.Cities.list()` presumably returns a promise that resolves to an array of `City` objects.
-- On success → `setCities` updates the `cities` state.
-- On failure → logs an error to the console.
-
----
-
-### 3. **Rendering the Dropdown**
-
-```tsx
-<select
-  value={selectedCity}
-  onChange={(e) => setSelectedCity(Number(e.target.value))}
->
-  <option value="">Select a City</option>
-  {cities.map((city) => (
-    <option key={city.id} value={city.id}>
-      {city.title}
-    </option>
-  ))}
-</select>
-```
-
-- Renders a `<select>` (dropdown).
-- Its value is bound to `selectedCity`.
-- When the user changes the selection (`onChange`), it updates `selectedCity` by converting the selected `value` from a string to a number (`Number(e.target.value)`).
-- The dropdown always starts with a placeholder option: **"Select a City"**.
-- It dynamically creates an `<option>` for each city in the `cities` array:
-    - `key` and `value` are the city's `id`.
-    - Displayed text is the city's `title`.        
-
----
-
-### What is `useEffect`?
-
-🔹 **`useEffect` is a React Hook**.  
-It **tells React to run some code after the component renders**.
-
-Think of it like:
-- _"Hey React, when this component shows up on the screen, please also run this function!"_
-    
-
-In your code:
-
-```tsx
-useEffect(() => {
-  agent.Cities.list()
-    .then(setCities)
-    .catch((err) => console.error("error loading cities", err));
-}, []);
-```
-
-- This function (`() => { ... }`) **runs right after** the component is first shown (because of `[]` — the empty array).
-- Inside it, you are **calling your API** (`agent.Cities.list()`) to get the cities.
-- When the server **responds with a list of cities**, you **save** them into your component's memory (state) by calling `setCities(data)`.
-
----
-
-### What is `useState`?
-
-🔹 **`useState` is another React Hook**.  
-It **creates a piece of memory** for your component.
-
-In your code:
-
-```tsx
-const [cities, setCities] = useState<City[]>([]);
-const [selectedCity, setSelectedCity] = useState<number | undefined>();
-```
-
-Here’s what is happening:
-- `cities` is a variable that starts as an **empty array** (`[]`).
-- `setCities` is a **function** you use to **change** the value of `cities`.
-
-Same with `selectedCity`:
-- `selectedCity` starts as `undefined` (nothing selected yet).
-- `setSelectedCity` lets you **update** which city is selected.
-    
-
----
-
-**Simple analogy:**
-
-Imagine your component is a whiteboard.
-- `useState` gives you a small _erasable box_ on the board.
-- You can write something there (`cities`, `selectedCity`).
-- If you want to change what’s written, you use the special pen `setCities` or `setSelectedCity`, **not your finger** (so React knows it changed and redraws the screen if needed).
----
-
-## `TransportationCard` Component
-
-### 1. **The Component Function**
-
-```tsx
-const TransportationCard: React.FC<Props> = ({ transportation }) => {
-```
-
-- This is a **React Functional Component**.
-- It takes `transportation` from props (destructured directly).    
-- It **returns JSX** that shows the transportation info in a styled card.
-
----
-### 2. **Inside the JSX**
-
-#### 2.1 Left Side — Price and Button
-
-```tsx
-<div className="flex flex-col items-center">
-  <div className="text-blue-600 font-bold text-lg">
-    {transportation.price} Toman
-  </div>
-  <button className="bg-blue-500 text-white px-4 py-2 rounded-md mt-2 hover:bg-blue-600">
-    Select Ticket
-  </button>
-</div>
-```
-
-- Shows the **price** (`price` field) styled with blue, bold text.
-    
-- Has a **Select Ticket** button — blue, rounded, changes shade on hover.
-    
-
----
-
-#### 2.2 Middle — Trip Info
-
-```tsx
-<div className="flex-1 mx-4 text-center">
-  <div className="font-semibold text-gray-700">
-    {transportation.companyTitle}
-  </div>
-  <div className="flex items-center justify-center mt-2">
-    <div className="mx-2">{transportation.fromCityTitle}</div>
-    <span className="text-gray-400">→</span>
-    <div className="mx-2">{transportation.toCityTitle}</div>
-  </div>
-  <div className="text-sm text-gray-500 mt-1">
-    {new Date(transportation.startDateTime).toLocaleDateString("en", {
-      hour: "2-digit",
-      minute: "2-digit",
-    })}
-  </div>
-</div>
-```
-
-- Shows the **company name**.    
-- Shows **From → To** cities in a neat way with an arrow (`→`) between them.
-- Shows the **departure time**:
-    - `startDateTime` is parsed using `new Date(...)`.
-    - `toLocaleDateString("en", { hour: "2-digit", minute: "2-digit" })` formats it to show just **hours and minutes**.
-
----
-#### 2.3 Right Side — Company Logo
-
-```tsx
-<div className="w-12 h-12">
-  <img
-    src="/images/company-placeholder.png"
-    alt="company"
-    className="w-full h-full object-contain"
-  />
-</div>
-```
-
-- Displays a small company **logo image** (placeholder image for now).
-- `object-contain` keeps the image inside the box without stretching.
-
-## `TrasnportationSearchForm` Component
-
-### 🧠 Main Concepts Used:
-
-| Feature                   | Purpose                                                                      |
-| :------------------------ | :--------------------------------------------------------------------------- |
-| `useState`                | To **store and manage** the form inputs, cities, results, and loading status |
-| `useEffect`               | To **load the list of cities once** when the component appears               |
-| **Typing with models**    | `City`, `TransportationSearchRequest`, `TransportationSearchResult`          |
-| **Event handling**        | To update form values and trigger the search                                 |
-| **Conditional rendering** | Show "Loading", "No results", or "Results" dynamically                       |
-
----
-
-### 📦 Let's break down the code:
-
-#### 1. ✍️ States
-
-```tsx
-const [searchResults, setSearchResults] = useState<TransportationSearchResult[]>([]);
-const [loading, setLoading] = useState(false);
-const [cities, setCities] = useState<City[]>([]);
-const [form, setForm] = useState<TransportationSearchRequest>({
-  fromCityId: undefined,
-  toCityId: undefined,
-  startDate: null,
-  endDate: null,
-  vehicleTypeId: undefined,
-});
-```
-
-You define **4 states**:
-
-- `searchResults`: List of found transportations
-- `loading`: True/false if waiting for API
-- `cities`: List of available cities
-- `form`: The form input values the user is selecting
-
-All typed properly ✅
-
----
-
-#### 2. 📡 Fetch cities automatically (useEffect)
-
-```tsx
-useEffect(() => {
-  agent.Cities.list().then(setCities);
-}, []);
-```
-
-**Meaning**:
-- When the page **first loads**, it **calls the API** to get cities.
-- `agent.Cities.list()` calls your backend, and when it gets the cities, it puts them into `cities` state.    
-- The empty `[]` **dependency array** means this happens **only once**, not every time anything changes.
-
-👉 This is why your cities `<select>` dropdown fills up!
-
----
-
-#### 3. ✏️ Handle input changes
-
-```tsx
-const handleChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => { ... }
-```
-
-Whenever a user types/selects:
-
-- You detect **which field** (`name`) and **what value** (`value`) they changed
-    
-- Update the `form` state accordingly:    
-    - `fromCityId` and `toCityId` are converted to numbers (`parseInt`)        
-    - `startDate` and `endDate` allow null
-    - Other fields (if any) are copied directly
-
----
-
-#### 4. 🔍 Handle Search button
-
-```tsx
-const handleSearch = () => { ... }
-```
-
-When the user clicks **Search**:
-
-- Set `loading` to `true`    
-- Call the backend API `agent.TransportationSearch.search(form)`
-- When the result comes back:
-    - Save it into `searchResults`
-- If error: log it
-- Finally, set `loading` to `false` again
-
----
-
-#### 5. 🖥️ Return (render) JSX
-You build a UI:
-
-- **Vehicle Types** (Bus, Train, Airplane) selectable with a click → sets `vehicleTypeId`
-- **From City** and **To City** dropdowns
-- **Start and End Date** inputs
-- **Search Button** to trigger the search
-- **Result area** that shows:
-    - If loading: "Loading..."
-    - If no results: "No results found"        
-    - If results: List of `TransportationCard` components for each found item.
-        
-
----
-
-
-
-
 
+# 🧠 Hints & Notes
+# 🙌 Acknowledgements
 
+- ChatGPT for snippet refinement and explanations
+# 🔍 References
+- [ ] Check out [[Session05 Additional Info]]
+- [ ] Watch for [React](https://www.youtube.com/watch?v=SqcY0GlETPk&ab_channel=ProgrammingwithMosh)