Profile Picture

Staff Photo

The Official Gazette of the Front-End

Mohamed Nabih

Frontend Developer

Get
My CV
muhammadnabih2020@gmail.com•01098665218•Github
REACT✦NEXT.JS✦TYPESCRIPT✦TAILWIND CSS✦SHADCN/UI✦FRAMER MOTION✦SANITY CMS✦SUPABASE✦REACT✦NEXT.JS✦TYPESCRIPT✦TAILWIND CSS✦SHADCN/UI✦FRAMER MOTION✦SANITY CMS✦SUPABASE✦
ExclusiveFront Page

Building Interfaces That Withstand Real Use

From Figma handoff to production deploy — a developer who owns the full frontend lifecycle.

Frontend Developer with hands-on experience building production-grade web apps using React, Next.js, and TypeScript. Delivered an 8-month remote engagement building dashboard systems for a team product, plus several independent full-stack projects covering auth, CMS integration, and custom analytics. Comfortable owning a UI end-to-end — from Figma handoff to deployment.

I

Field Report

Professional Experience

Frontend Developer — Yalgamers (Team Yal)

Aug 2024 – Apr 2025 · Remote

Employee Performance & Attendance Tracking System

Built the complete frontend for a two-part internal platform — an Admin Dashboard and an Employee Dashboard — using Next.js 14, TypeScript, and Tailwind CSS.

01. Implemented role-based authentication (JWT + OTP verification) with protected routing separating Admin and Employee experiences.

02. Built and integrated RTK Query API slices for authentication, tasks, shifts, expenses, and submission history.

03. Delivered task management, attendance/shift tracking, expense review, and performance analytics modules across both dashboards.

04. Built reusable, accessible UI components with Radix UI + Tailwind CSS, and interface animations with Framer Motion.

05. Built validated forms using React Hook Form and Zod schemas across the application.

06. Implemented data export features (Excel via XLSX, PDF via jsPDF, CSV).

07. Collaborated remotely within a small product team, owning the frontend end-to-end for both dashboards over an 8-month engagement.

II

Dispatches

Personal & Open-Source Work

Clipped & Kept — Personal · Full-Stack

Life History — Habit Tracking & Personal Analytics System

Designed and built a full-stack habit-tracking app with Supabase Auth and per-user data isolation.

  • ▪Built a custom analytics engine using an \u201cOpportunity Days\u201d model — tracking progress since a habit's creation date instead of penalizing pre-existing days — plus a Year-to-Date daily average.
  • ▪Implemented a GitHub-style contribution grid per habit and mood/reflection journaling linked to daily execution.
  • ▪Built a complete in-house i18n engine with full Arabic/English support and RTL/LTR layout switching.
Live DemoSource
Next.js 14TypeScriptSupabaseTailwind CSSFramer MotionRecharts

Freelance / Remote · Full-Stack Frontend

YAL Team — Enterprise Platform & Admin Dashboard Suite

comprehensive dual-platform system (Client App + Admin Operations Dashboard) developed remotely for Yalgammer over a 6-month period. Built with Next.js 14 and TypeScript to manage complex enterprise workflows, administrative data controls, dynamic reporting, and persistent state management.

  • ▪Engineered a dual-app client and administrative ecosystem for Yalgammer, collaborating remotely to deliver production-ready features.
  • ▪Architected global and server-side state hydration using Redux Toolkit, Redux Persist, and TanStack Query for optimal performance.
  • ▪Built dynamic multi-step form workflows with strict validation layers powered by React Hook Form and Zod schemas.
  • ▪Integrated advanced interactive features, including drag-and-drop workflow interfaces (React Beautiful DnD) and virtualized data tables.
  • ▪Developed robust client-side reporting tools allowing real-time data exports in PDF (jsPDF), Excel (XLSX), and CSV formats.
  • ▪Designed a scalable UI component library using Radix UI primitives and Tailwind CSS to ensure design consistency across both applications
Live Demo
Next.js 14TypeScriptRedux ToolkitTanStack QueryTailwind CSSRadix UI / ShadcnReact Hook FormZodAxiosFramer Motion XLSXjsPDFCSV

NPM Package + VS Code Extension

Console Manager

Built and published a CLI tool and companion VS Code extension to remove or comment out console.log statements across a file or an entire project with a single command.

  • ▪Published and maintained as an open-source package on npm and the VS Code Marketplace.
Live DemoSourcenpm
TypeScriptNode.js CLIVS Code Extension API
III

Classifieds

Technical Skills

01 / 05

Tooling

  • —Git
  • —Github
  • —Husky
  • —Eslint
  • —Prettier
  • —GitHub Actions
  • —ETC...

02 / 05

Core

  • —React
  • —Next.js
  • —TypeScript
  • —JavaScript (ES6+)

03 / 05

Styling & UI

  • —Tailwind CSS
  • —shadcn/ui
  • —Material UI
  • —Bootstrap
  • —Framer Motion
  • —GSAP
  • —THREE.JS
  • —ETC...

04 / 05

Data & State

  • —RTK Query
  • —React Hook Form
  • —Zod
  • —Zustand
  • —TanStack Query
  • —TanStack Router
  • —Redux Toolkit
  • —ETC...

05 / 05

CMS & Backend

  • —Sanity CMS
  • —Strapi CMS
  • —Supabase
  • —SQL
  • —PRISMA
  • —MONGO DB
  • —Nodejs

Military Service: Completed

IV

Wire Service

Notes & Dispatches

“More to follow in the next edition.”

New dispatches are being typeset — check back soon