📦 FOR COMPANY REVIEW - Shopify Theme Task

This repo is the required Shopify task - Repo name must be same as username per requirements

• Default Branch: master -> Contains full main task (Merged PR: development -> master)
• Branch: development -> Same main task
• 🚀 Enhancement PR (Open): Extra improvements: Quick View Modal + Custom Select + Live Cart Update -> Check the Open PR here: https://github.com/omar-khatab/omar-khatab/pulls

---

👋 Omar Khatab

Engineering Software Developer | Frontend Developer

Cairo, Egypt • Ain Shams University — Mechanical Power (2026)

What it is: Interactive HVAC calculator that translates real engineering formulas into a clean web interface. Built to bridge my Mechanical Power background with frontend skills.

What it does:

• BTU / Cooling Load — estimates based on room area, occupancy, window exposure
• Duct Sizing — calculates duct area & diameter from CFM & velocity (Area = CFM / Velocity)
• Input validation, real-time results, responsive UI

Why I built it: During my internship at National Authority for Tunnels (HVAC Systems), I worked with HVAC calculations. I wanted to show I can turn engineering logic into a usable product with Next.js + TypeScript.

Next.js TypeScript Tailwind CSS Vercel

🌐 Live Demo • 💻 Source Code

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

Full e-commerce experience with real-world features:

• 🛍 Product listing from DummyJSON API with loading states
• 🛒 Shopping cart with add/remove/quantity update
• ❤ Wishlist — save favorites
• 🔎 Search & category filtering
• 📱 Fully responsive — mobile first
• 🎬 Framer Motion animations for smooth UX
• 🔔 React Hot Toast for feedback
• 🗂 Context API for global state management

React React Router Context API Framer Motion React Hot Toast REST API CSS3

🌐 Live • 💻 Code

Live: https:[STRIPPED 65 bytes].vercel.app/ | Code: https://github.com/omar-khatab/saas-landing-next.js

Modern SaaS landing page built with Next.js App Router:

• 🚀 Hero section with call-to-action
• ✨ Features, pricing, testimonials, FAQ sections
• 📱 Responsive design — works on all devices
• ⚡ Fast performance with Next.js optimization
• 🎬 Smooth scroll animations

Next.js App Router React Tailwind CSS Responsive Design

[🌐 Live](https:[STRIPPED 65 bytes].vercel.app/) • 💻 Code

Live: https://omar-khatab.github.io/Admin-Dashboard/ | Code: https://github.com/omar-khatab/admin-dashboard

Complete admin panel built from scratch:

• 📄 8 Pages: Dashboard, Projects, Courses, Files, Friends, Plans, Profile, Settings
• 📈 Statistics cards, progress bars, data tables
• 📁 File manager UI, user roles
• 📱 Responsive layout — sidebar becomes drawer on mobile
• 🧩 Built with pure HTML5, CSS3, JavaScript to master fundamentals

HTML5 CSS3 JavaScript Flexbox CSS Grid Responsive

🌐 Live • 💻 Code

Live: https://omar-khatab.github.io/roots-before-react/ | Code: https://github.com/omar-khatab/roots-before-react

Before React, I built 5 landing pages with pure HTML/CSS/JS:

HTML5 CSS3 JavaScript BEM Flexbox Grid

🌱 Live • 💻 Code

Frontend: React.js • Next.js • TypeScript • JavaScript • Tailwind CSS • HTML5 • CSS3

Libraries: Framer Motion • React Router • Context API • Material UI • Swiper • React Hot Toast

Tools: Git • GitHub • Vercel • VS Code

Engineering: Thermodynamics • Fluid Mechanics • Heat Transfer • HVAC • AutoCAD

graph TD
    A[🌱 HTML CSS JS] --> B[📚 5 Vanilla Projects]
    B --> C[⚛ React.js]
    C --> D[🛒 E-Commerce]
    D --> E[▲ Next.js]
    E --> F[🔧 HVAC Suite]
    F --> G[🚀 Production Ready]
    
    style A fill:#22C55E,stroke:#000,color:#fff
    style F fill:#22C55E,stroke:#000,color:#fff
    style G fill:#111827,stroke:#22C55E,color:#fff