Skip to content
View omar-khatab's full-sized avatar
25 followers · 29 following

Achievements

Achievement: Pull SharkAchievement: YOLOAchievement: Quickdraw

Achievements

Achievement: Pull SharkAchievement: YOLOAchievement: Quickdraw

Block or report omar-khatab

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
omar-khatab/README.md

👋 Omar Khatab

Engineering Software Developer | Frontend Engineer



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

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

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
  • 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

🛍 Shopify Custom Sections — Liquid

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

  • 🛒 Product Grid with Quick View: AJAX Cart API, variant selection, cross-sell, live cart refresh
  • 🎁 Full Banner: responsive + accessible mobile menu, theme editor editable

Liquid JavaScript Shopify Dawn

🛒 E-Commerce Store — React

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

  • 🛍 DummyJSON API with loading states
  • 🛒 Cart + Wishlist + Search + Filtering
  • 🎬 Framer Motion + React Hot Toast + Context API
  • 📱 Mobile-first responsive

React React Router Context API Framer Motion REST API

🛠 Tech Stack



Frontend: React.js • Next.js • TypeScript • Tailwind CSS • Testing (Vitest)

Engineering Mindset: Separation of Concerns • Zero-division Safety • 100% Coverage • SMACNA Standards

🧭 My Journey

graph TD
    A[🌱 HTML CSS JS] --> B[📚 6 Vanilla Projects]
    B --> C[⚛ React.js + Context API]
    C --> D[🛒 E-Commerce - API Integration]
    D --> E[▲ Next.js + TypeScript Strict]
    E --> F[🔧 HVAC Suite - 100% Tested]
    F --> G[🚀 Production Ready + Coverage]
    
    style A fill:#22C55E,stroke:#000,color:#fff
    style F fill:#22C55E,stroke:#000,color:#fff
    style G fill:#111827,stroke:#22C55E,color:#fff
Loading

Pinned Loading

  1. HVAC-Calculator HVAC-Calculator Public

    High-performance HVAC toolkit for MEP engineers: cooling load, duct sizing with aspect ratio constraints, CFM calculation & real-time unit converter. Built with Next.js + TypeScript

    TypeScript 1

  2. shopify-custom-sections shopify-custom-sections Public

    Custom Shopify Dawn sections: product grid with quick view popup and cart integration, plus a responsive banner.

    Liquid 1

  3. E-commerce E-commerce Public

    🛒 E-Commerce Store — React + Context API + Framer Motion | Cart, wishlist, filtering, search, responsive grid, checkout UI | Live: e-commerce-three-coral-58.vercel.app

    JavaScript 1

  4. roots-before-react roots-before-react Public

    🌱 Roots Before React — Before React & Next.js, mastered basics. 5 production landing pages with pure HTML5/CSS3/JS — no frameworks. Includes Leon, Kasper, Digital, Gonex Design, Special Agency. Eac…

    CSS 1

  5. Portfolio_Upgrade Portfolio_Upgrade Public

    💼 Portfolio Upgrade — Current Portfolio | Frontend Developer Omar Khatab | React / Next.js / MUI

    HTML 1

  6. file-organizer-with-python file-organizer-with-python Public

    Python 1