Building modern web experiences with React, Next.js, and a passion for clean code.
Tech Stack
A selection of real-world projects — from Next.js apps to vanilla JS SPAs.
A fully functional e-commerce frontend with JWT auth, product catalog, wishlist, advanced cart powered by Redux, reviews, order management UI, Zod form validation, and full REST API integration.
Front-End Developer · Sohag, Egypt
Passionate Front-End Developer focused on building modern, high-performance web applications with clean architecture and pixel-perfect UI.
I care deeply about SEO-friendly structure, Lighthouse scores, and writing code that's a pleasure to read and maintain.
Started the programming journey — explored multiple fields, then locked in on Front-End. Built solid foundations in HTML, CSS, Bootstrap & JavaScript (DOM, OOP).
Started the programming journey — explored multiple fields, then locked in on Front-End. Built solid foundations in HTML, CSS, Bootstrap & JavaScript (DOM, OOP).
Mastered API integration, React.js & Next.js. Built projects ranging from basic HTML pages all the way to a full E-commerce application.
Mastered API integration, React.js & Next.js. Built projects ranging from basic HTML pages all the way to a full E-commerce application.
Expanding into Full-Stack with ASP.NET at Route Academy. Ranked top of class for two consecutive years — GPA 3.43/4 (B+).
Expanding into Full-Stack with ASP.NET at Route Academy. Ranked top of class for two consecutive years — GPA 3.43/4 (B+).
When I first started learning React, I used useEffect for everything — especially for fetching data from APIs. It worked… but over time, I realized it can get messy very quickly. Loading states, errors, caching — all manual. Here's what I use instead.
Repetitive, hard-to-scale data fetching logic across components
React Query — handles caching, background updates & error states
// ❌ Before — manual & messy
const [data, setData] = useState(null)
useEffect(() => {
fetch("/api/data").then(...)
}, [])
// ✅ After — React Query
const { data, isLoading } = useQuery({
queryKey: ["data"],
queryFn: () => fetch("/api/data").then(r => r.json())
})When I started using Next.js, SSR and CSR sounded confusing. Once I understood them, everything clicked. Here's the clearest explanation I could write.
Blank screens, slow first loads, and SEO issues with pure CSR
Know when to use SSR vs CSR — Next.js gives you full control
Instead of repeating API logic in every component, I built a reusable custom hook. Clean, typed, and works across any component in seconds.
Copy-pasting fetch logic into every component — dirty and fragile
A typed generic useFetch<T> hook that handles everything once
I'm really happy you made it to my page. Whether you have a project, an opportunity, or just want to say hi — my inbox is always open.
Fast reply
Usually within 24h
Open to work
Remote & On-site
Sohag, Egypt
UTC+2 · Cairo Time