I am a Computer Systems Engineer graduated from Al-Azhar University, specializing in modern Frontend Engineering with React.js (React 19), Next.js (App Router), and TypeScript.
I have hands-on experience building high-performance B2B SaaS platforms, real-time IoT & telemetry dashboards, and scalable web apps. I focus on clean code, seamless API integrations, server-state caching (TanStack Query), responsive UI design, and rigorous testing.
- 🔭 Currently working on: Core frontend features for Zimam (B2B Multi-tenant Fleet Management SaaS).
- 💼 Open to: Frontend Developer & Full-Stack (Next.js) Engineering opportunities.
- ⚡ Superpowers: React 19, Next.js App Router, TanStack Table/Query, Real-Time Leaflet & WebSockets, Performance Optimization (Web Vitals).
| Category | Technologies & Tools |
|---|---|
| Frontend Frameworks | React.js (React 19), Next.js (App Router), TypeScript, JavaScript (ES6+) |
| State & Data Management | Redux Toolkit, TanStack Query (React Query), TanStack Table, Axios |
| UI & Styling | Tailwind CSS, Radix UI, Material UI (MUI), Framer Motion, HTML5/CSS3 |
| Backend & Databases | Next.js API Routes, Node.js, Express.js, Prisma ORM, PostgreSQL, MongoDB |
| Integrations & Real-Time | Socket.IO, Leaflet (Interactive Maps), Google Gemini API, Stripe, Lahza, Twilio SMS |
| Testing & Quality | Jest, React Testing Library, MSW, Zod Validation, Lighthouse Performance |
Multi-tenant fleet management & dispatch platform for real-time operations.
Tech Stack: Next.js • React 19 • TypeScript • TanStack Table • Leaflet • Socket.IO • Tailwind CSS
- Built real-time vehicle telemetry tracking on interactive maps with Leaflet & Socket.IO.
- Implemented high-density data tables using TanStack Table with multi-column filtering and server-side pagination.
- Designed a Driver Field Mini-App (PWA) for fuel logging with camera uploads and task dispatching.
Full-stack IoT dashboard for real-time compressor monitoring & preventive maintenance.
Tech Stack: Next.js • React 19 • TypeScript • Prisma ORM • PostgreSQL • Recharts • NextAuth.js
- Monitored real-time pressure levels (Bar/PSI), operating hours, and anomaly alerts.
- Built interactive duty-cycle analytics charts with Recharts for preventive maintenance decisions.
- Designed schema with Prisma & PostgreSQL and implemented role-based authentication with NextAuth.js.
Intelligent LMS platform with AI revision summaries, diagnostic quizzes, and Stripe checkout.
Tech Stack: React.js • Next.js • TypeScript • Google Gemini API • Stripe • Jest • RTL
- Integrated Google Gemini API for automated study summaries and custom curriculum quizzes.
- Integrated Stripe payment gateway for course enrollments and subscriptions.
- Boosted Lighthouse performance to 86 (100 Accessibility) and reduced CLS from 0.403 to 0.009. Tested using Jest & MSW.
Administrative platform for recitation tracking, teacher-parent portals, and attendance analytics.
Tech Stack: Next.js • TypeScript • Tailwind CSS • PostgreSQL • Prisma
- Built multi-role dashboards for administrators, teachers, and students to track memorization progress.
- Implemented attendance analytics, performance evaluation records, and weekly goal plans.
⭐️ Open for innovative Frontend & Full-Stack projects! Feel free to connect or explore my code!