Skip to content
View Mostafashadow1's full-sized avatar
156 followers · 2 following

Achievements

Achievement: YOLOAchievement: StarstruckAchievement: QuickdrawAchievement: Pull Shark

Achievements

Achievement: YOLOAchievement: StarstruckAchievement: QuickdrawAchievement: Pull Shark

Block or report Mostafashadow1

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
mostafashadow1/README.md

Hi there, I'm Mostafa Mohamed 👋

Senior Frontend Engineer & Open Source Creator specializing in Frontend Architecture, Scalable React/Next.js Applications, and Developer Experience. Founder of Shadow Coding and maintainer of developer-focused npm packages.

🚀 What I Do

  • Frontend Architecture: Designing shared foundational systems, micro-frontends, and multi-tenant SaaS control planes using React, Next.js, and TypeScript.
  • Performance & Optimization: Building high-speed UI, client-side Web Worker image processing, and real-time WebSocket/SignalR data pipelines.
  • Open Source: Creator and maintainer of small, zero-dependency web engineering tools, built for React, Next.js and AI coding agents.
  • Content & Mentorship: Founder of Shadow Coding (17K+ subscribers), mentoring over 100+ software engineers in frontend architecture and career growth.

📦 Featured Open Source Packages (npm)

Package What it does Works with Links
React Loadly Loaders, skeletons and loading-state hooks. New in 3.1: Skeletonize, which turns your real component into its own skeleton, with no layout shift. React, Next.js npm · Demo · GitHub
Accessly Permissions, RBAC and feature flags where every check explains why it passed or failed. accessly/core runs the same rules on the server. React, Next.js, Node npm · Docs · GitHub
Compressly Compress and resize images in the browser before upload, using Web Workers and OffscreenCanvas. Fixes EXIF rotation. React, Next.js, Vue, Svelte, JS npm · Demo · GitHub
Tonely UI sounds generated at runtime with the Web Audio API. No audio files, under 3 kB gzip. React, Next.js, Vue, Svelte, JS npm · Demo · GitHub

👉 Check out all my published packages on my npm profile.

🤖 Built for AI Coding Agents

Every package ships an AGENTS.md with when to use it, the exact API and common mistakes, and each docs site publishes an llms.txt. Skills and rules for Cursor, Copilot and other agents live in agent-skills.

✍️ Writing

I write about shipping npm packages for React and Next.js on DEV: permissions that explain themselves, client-side image compression, UI sounds without audio files, and the bugs that only show up in other people's projects.

🛠 Tech Stack

  • Core: React, Next.js, TypeScript, JavaScript, HTML5, CSS3, Multi-Tenant SaaS
  • State & Data: Zustand, TanStack React Query v5, Redux Toolkit, WebSockets, SignalR, Axios
  • UI & Animation: Tailwind CSS, HeroUI, Radix UI, Framer Motion, GSAP
  • Forms & Validation: React Hook Form, Valibot, Zod
  • Tools & Build: Git, GitHub Actions (CI/CD), npm, pnpm, Web Workers

🎥 Shadow Coding (YouTube)

I create technical content around React, Next.js, TypeScript, software engineering practices, and system design.

  • 👥 17,000+ Subscribers
  • 👁️ 466,000+ Views
  • 📹 200+ Technical Videos
  • 🌐 Website: www.shadow-coding.com

📫 Connect With Me

Pinned Loading

  1. compressly compressly Public

    Compress and resize images in the browser before upload. Target size, WebP/JPEG, EXIF rotation, Web Worker. ~2.2 KB.

    TypeScript 35

  2. tonely tonely Public

    UI sound effects for web apps, synthesized with the Web Audio API. No audio files, ~2.5 KB, SSR-safe.

    TypeScript 9

  3. accessly accessly Public

    Permissions, RBAC and feature flags for React and Next.js UIs, with decisions that explain why access was denied.

    TypeScript 10

  4. react-loadly react-loadly Public

    Accessible React loaders, spinners and skeleton screens with loading-state hooks. SSR and Next.js ready.

    TypeScript 54 2

  5. agent-skills agent-skills Public

    Agent skills and editor rules for tonely, compressly, accessly and react-loadly: Claude Code, Cursor and Copilot.

  6. shadow-form-handler shadow-form-handler Public

    shadow-form-handler, the ultimate toolkit for effortless form handling and validation in JavaScript and TypeScript! Whether you're building simple forms or complex multi-step processes, our lightwe…

    TypeScript 10 1