FadyEmad

Frontend Developer with +3 years of experience building performant, user-focused web applications. I've shipped frontend products from scratch, turning ideas into production-ready solutions. Currently focused on building scalable, user-driven apps with a clean, minimal design approach.

LinkedIn GitHub WhatsApp

Recent projects

Early 2026

Xperience academy. Bilingual (Arabic/English) online tech education platform with a course catalog, instructor profiles, application/enrollment flow, and rich motion design. Built as a marketing and lead-generation site for practical tech training targeting Arabic-speaking audiences.

Link

xperience-eg.com old, xperience-test.vercel.app new

Stack: Next.js 16 (App Router), React 19, TypeScript, next-intl, Tailwind CSS v4, Motion, Lenis (smooth scroll), shadcn/ui / Radix UI, PostgreSQL / Drizzle ORM, Better-Auth, Resend
Role: Full-Stack Developer (Frontend-heavy)
Highlights: •Built a fully bilingual learning platform (Arabic/English) with RTL layout support using next-intl
•Engineered a cinematic intro animation system with orchestrated transitions (Motion + Lenis smooth scroll) and staggered child reveals
•Developed a dark-themed design system with Tailwind CSS v4, shadcn/ui components, and a green accent palette
•Integrated Better-Auth + Resend for email magic-link authentication and a WhatsApp-based enrollment flow

Mid 2026

Sha Memory. A password-protected love letter sharing platform where heartfelt messages are delivered to friends through personalized, password-protected pages. Each letter features a warm, vintage-inspired design with custom typography (Ballet, Fleur De Leah, Imperial Script, Amiri), scroll-based fade effects, and dynamically generated Open Graph images optimized for social sharing on WhatsApp, Facebook, and Twitter.

Link

https://love-letter-smoky-rho.vercel.app/love/fady password:123

Stack: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, Sharp, Vercel
Role: Frontend Developer
Highlights: •Built a password-protected letter delivery system with 7-day cookie-based authentication per recipient
•Engineered dynamically generated Open Graph images (1200×630) using next/og, with JPEG conversion via Sharp to meet WhatsApp's 600 KB limit
•Designed a warm, vintage-themed UI with custom font pairing (Ballet, Fleur De Leah, Imperial Script, Amiri) supporting both English and Arabic script
•Implemented a scroll-fade hook that subtly fades content edges to enhance the letter-reading experience
•Created dedicated WhatsApp-compatible OG images using URL-based image references alongside base64-embedded versions for Facebook/Twitter

Last 2025 - Mid 2026

Tactix — AI-Powered Football Tactical Analysis Platform. A comprehensive football/soccer tactical analysis platform for coaches and analysts. Features an interactive SVG tactical board editor with drawing tools, player placement, formation presets, and multi-scene management; a video analysis editor with time-based event tagging, client-side clip extraction via FFmpeg WASM, and board-to-tag linking; plus AI-assisted analysis, customizable panel/tag systems, and a full auth flow with OTP verification.

Link

tactix-front.vercel.app , https://github.com/FadyEmad01/tactix-front github front-end, https://github.com/abdelrahmann22/tactix-graduation-project-Backend github back-end

Stack: Next.js 15 (App Router), React 19, TypeScript 5, Tailwind CSS v4, Zustand 5, shadcn/ui / Radix UI, Motion (Framer Motion successor), GSAP, Lenis (smooth scroll), Zod 4, react-hook-form, FFmpeg WASM (@ffmpeg/ffmpeg), OpenAI API, Cloudinary, Lucide React / Remixicon
Role: Frontend Developer (Frontend-heavy) | Designed the entire frontend architecture, UI/UX, and implemented all features,visual design, and animations
Highlights: •Engineered an SVG-based tactical board editor with drag-and-drop player/ball placement, freehand drawing, curved/dotted/dashed arrows, undo/redo (30-level history stack), zoom/pan, and multi-scene management for creating complex tactical sequences
•Built a video analysis editor with time-based event tagging across 4 category groups (Common, Attacking, Defensive, Transition events), client-side clip extraction via FFmpeg WASM, and linking tactical boards to specific video timestamps
•Designed a custom shadcn/ui component system with 42+ primitives, CSS-based dark/light mode via next-themes, and configurable theme presets with HSL adjustments
•Implemented a full authentication system (login, signup, OTP, email verification, password reset) with JWT in httpOnly cookies, Zod validation, and middleware-based route protection
•Integrated an AI chat assistant (OpenAI/Gemini) with conversation management, persistent history, and board-context-aware analysis panels
•Created a cinematic landing page intro using GSAP with orchestrated animations and Lenis smooth scrolling

Preview of Tactix — AI-Powered Football Tactical Analysis Platform

2025 — Present

Fixel UI — shadcn/ui-Compatible Component Registry. An open-source shadcn/ui-compatible component registry featuring production-ready React blocks and 40+ SVG illustrations. Features a custom registry generation pipeline that automatically scans components, extracts dependencies via AST parsing, transforms import paths, and generates shadcn-compliant JSON registry files. Includes 59 UI primitives, a category thumbnail system with 58 SVG components, an illustration system with shared base components, and full CLI install support via `npx shadcn@latest add`. Built with a copy-paste philosophy — users own the code with zero runtime dependencies.

Link

fixel-ui.vercel.app , https://github.com/FadyEmad01/Fixel-UI github

Stack: Next.js 16 (App Router), React 19.2, TypeScript 5, Tailwind CSS v4, shadcn/ui / Radix UI / Base UI, Motion (Framer Motion successor), Biome (linting/formatting), Lucide React / @tabler/icons-react, class-variance-authority, next-themes, embla-carousel-react, recharts, react-hook-form, sonner, vaul, cmdk, date-fns, @tanstack/react-table, next-mdx-remote, rehype-pretty-code, React Compiler, posthog-js, @vercel/analytics / speed-insights
Role: Frontend Developer (Solo) | Designed the entire registry architecture, component system, illustration pipeline, and build tooling
Highlights: •Architected a custom registry generation pipeline with 7 modular lib modules (file scanning, AST-based dependency extraction, import path transformation, metadata loading, registry building, schema validation) that automatically generates shadcn-compliant JSON registry files from component source code
•Built 2 production-ready block components (on-hover-01 with Apple-inspired spring animations via Motion, footer-01 with masked background images and gradient overlays) and an illustration system with 40+ SVG category thumbnails using shared composable base components
•Designed and implemented 59 shadcn/ui primitives (accordion, dialog, carousel, chart, sidebar, table, form, etc.) with full TypeScript types, CSS-based dark/light mode via next-themes, and Radix UI / Base UI headless primitives
•Engineered a dual-component registry architecture supporting 3 types (file blocks, directory blocks with multi-file support, and illustrations) with automatic dependency categorization into registry deps (@/components/ui/*) and npm deps (from package.json)
•Implemented an SVG category thumbnail system with 58 hand-crafted components using Lucide icons, Motion animations, and composable base primitives (IllustrationCard, IllustrationIcon, IllustrationText) for consistent visual previews
•Built the entire developer experience around the shadcn CLI — users install components with a single npx command, getting copy-pasted source files with zero runtime dependencies and full ownership

Preview of Fixel UI — shadcn/ui-Compatible Component Registry