Omar Khatab omar-khatab

👋 Omar Khatab

Software Developer | Python & JavaScript | React / Next.js

Cairo, Egypt • Ain Shams University — Mechanical Power (2024) • NAT - HVAC Systems

🔧 Featured Project — HVAC Engineering Suite [100% Tested]

Live: https://hvac-calculator-ebon.vercel.app/

Next.js TypeScript Tailwind Tests Coverage Vitest Playwright

What it is: Production-grade HVAC toolkit translating real engineering formulas into a testable, traceable web interface.

Engineering Highlights:

Separated Logic: Core formulas isolated in libs/formulas.ts for unit testability - no UI coupling
100% Coverage: Stmts, Branch, Funcs, Lines - edge cases velocity=0, cfm=0, toBeCloseTo for float conversions
E2E & CI/CD Automation: 28 Playwright E2E tests, GitHub Actions CI running tests and Lighthouse reporting on every push.
Duct Sizing: Continuity Equation A = Q / V + SMACNA-aligned rectangular selection
BTU Load: Field method with sun exposure factors + occupant heat load logic

🌐 Live Demo • 💻 Source Code

🐍 Featured Project — File Organizer [Python Desktop App]

Python PySide6 SQLite Platform Version

What it is: A real-world Windows utility I built to solve my own messy Downloads / Desktop problem. It started as a CLI script and became a full desktop product anyone can use.

Product Highlights:

Smart Organizing: Automatically sorts any folder by file type (Images, Docs, Videos, etc.) with duplicate handling and no overwrites
Full Desktop GUI: Dark-theme PySide6 app with live folder watching, preview before organize, undo, drag & drop, and Arabic/English toggle
Built for Safety: Dry-run mode, confirmation prompts, protected-path check, and right-click context menu integration
Persistence: Complete file history and operation log stored in SQLite
Two Versions: CLI version with argparse for power users + GUI version for everyone

💻 Source Code

🛍 Shopify Custom Theme Sections

Code: https://github.com/omar-khatab/shopify-custom-sections

Translated Figma designs into custom Dawn theme sections (Banner + Product Grid with Quick View) using Liquid and Vanilla JS.
Implemented O(1) hash-map variant selector, Black+Medium cross-sell auto-add, and no-reload header cart refresh.
Handled async race conditions by locking popups during requests using a feature-branch + PR workflow.

Liquid JavaScript Shopify CLI Dawn Theme

🛒 E-Commerce Store — React

Live: https://e-commerce-three-coral-58.vercel.app/ | Code: https://github.com/omar-khatab/e-commerce

Full-featured responsive storefront built with React, React Router, and Context API.
Integrated live product data from REST API (DummyJSON) with robust error boundaries and skeleton loading states.
Persisted cart/favorites with localStorage and enriched UI with Framer Motion and mobile-first design.

React React Router Context API Framer Motion REST API

🛠 Tech Stack

Frontend: React.js • Next.js • TypeScript • Tailwind CSS • Material UI • Framer Motion
Python & Desktop: Python • PySide6 • SQLite • pathlib / shutil / argparse
Testing & Quality: Vitest • React Testing Library • Playwright • GitHub Actions • Lighthouse CI
E-Commerce & Tools: Shopify (Liquid, Ajax Cart) • Git • GitHub • Vercel

🧭 My Journey

graph TD
    A[🌱 HTML CSS JS] --> B[📚 5 Responsive Pages & Admin Dashboard]
    B --> C[⚛ React.js + Context API]
    C --> D[🛒 E-Commerce Store - REST API]
    D --> E[▲ Next.js + TypeScript Strict]
    E --> F[🔧 HVAC Suite - 100% Test Coverage]
    F --> G[🐍 Python Tool - CLI to Desktop GUI]
    G --> H[🚀 Production Ready + Automation + Web]
    
    style A fill:#22C55E,stroke:#000,color:#fff
    style F fill:#22C55E,stroke:#000,color:#fff
    style G fill:#3776AB,stroke:#000,color:#fff
    style H fill:#111827,stroke:#22C55E,color:#fff

Navigation Menu