DEVSTACKDEVSTACK

  • ProfileProfileProfile
  • ReposReposRepos
Sign in
S

Salah Mohsen

frontend engineer focused on React, TypeScript, Next.js, and Tanstack Start.

frontend engineer focused on React, TypeScript, Next.js, and Tanstack Start.

Language

TypeScript
TypeScript

Framework

ReactNext.jsTanStack RouterTanStack StartPayload CMS
ReactNext.jsTanStack RouterTanStack StartPayload CMS

UI

Tailwind CSSTanStack TableFramer MotionRadix UIBase UIshadcn/ui
Tailwind CSSTanStack TableFramer MotionRadix UIBase UIshadcn/ui

State Management

TanStack QueryTanStack FormZustandnuqs
TanStack QueryTanStack FormZustandnuqs

Database

PostgreSQL
PostgreSQL

AI

AI SDKMastra
AI SDKMastra

Testing

VitestPlaywright
VitestPlaywright

Other

FirebaseZodnext-intlSentry
FirebaseZodnext-intlSentry

Overview

Senior Frontend Engineer @Ment’ech
salahmohsen.com
[email protected]
+201025295958
Cairo - Maadi

Social Links

  • Website
  • GitHub
  • LinkedIn

Experience

  1. Jun 2025 – Present

    Senior Frontend Engineer · Ment’ech

    Jun 2025 – Present

    Top contributor across three production Next.js platforms delivered for Ment'ech clients: an operations console for a multi-center workspace business (595 of 1,298 commits), a multi-tenant transportation admin platform (top author on the admin frontend), and the dealer and buyer frontends of an automotive marketplace (377 commits across both apps).

    Set the frontend architecture and engineering rules the team builds on: shared form, data-table, UI and i18n layers, feature-folder conventions, and Cursor rules and AGENTS.md files that codify them.

    Built schema-driven forms with TanStack Form and Zod, typed REST data layers with TanStack Query (server prefetch, hydration and mutation-driven cache invalidation), and reusable admin data tables with URL-synced filtering, sorting and pagination through nuqs.

    Implemented secure authentication and authorization: encrypted session cookies, middleware token refresh, and role-based access control with route guards and permission-gated UI, including a model of about 188 permissions.

    Delivered English and Arabic interfaces with next-intl, typed messages and full RTL support, plus Firebase push notifications and Sentry error monitoring.

    Worked in teams of 5 to 10 with Laravel backend engineers against typed API contracts, using GitLab merge requests and conventional commits.

  2. Nov 2024 – Jun 2025

    Frontend Engineer · IKNOWLY

    Nov 2024 – Jun 2025

    Rebuilt core product screens to a new design for a consultation platform: authentication, consultant and consultee dashboards, session pages, blog, about page and the home hero.

    Shipped consultation features in Next.js and React: session tabs with live counts and status badges, messaging a consultant, a multi-step consultant profile stepper, and consultee email verification.

    Managed state and data with Zustand, Formik with Yup validation and TanStack Query, and integrated REST endpoints including public configuration APIs with backend engineers.

    Applied next-intl localisation across authentication pages and dashboards, and built responsive components with NextUI, Radix and Tailwind CSS that hold up on mobile screens.

    Delivered work through ticket-driven pull requests.

  3. Feb 2023 – Aug 2024

    Frontend Engineer · One Solution

    Feb 2023 – Aug 2024

    Built responsive, production web interfaces with React and Next.js for client projects.

    Refactored components to improve performance and maintainability of existing codebases.

    Delivered scalable frontend solutions aligned with client requirements.

Download resume

Projects

CILAS: Cairo Institute of Liberal Arts and Sciences
Payload CMSReactTailwind CSSnext-intlResendTypesenseTanStack FormRadix UIPlaywrightCloudflare R2
Payload CMSReactTailwind CSSnext-intlResendTypesenseTanStack FormRadix UIPlaywrightCloudflare R2
Next.jsTypeScriptPostgreSQLFramer MotionVitestPostHogBase UIOxlintLexical
Next.jsTypeScriptPostgreSQLFramer MotionVitestPostHogBase UIOxlintLexical
2026 — current

Bilingual (English/Arabic) website, CMS and private learning community for the Cairo Institute of Liberal Arts and Sciences, built end to end as a freelance project on Next.js 16 and Payload CMS 3.

  • Modeled the institute's domain in 29 Payload collections: cycles, courses, programmes and cohorts, people kept separate from login accounts, enrollments, events, articles, publications, press and newsletters, with ten architecture decision records behind the hard calls.

  • Built role-based access control for super admin, admin, fellow, member and student, with per-role admin views, ownership rules and a draft, review and publish workflow.

  • Shipped application forms with private file uploads and an admin review flow that creates the account, person record and enrollment, then sends the acceptance email through Resend, protected by a honeypot and optional Turnstile.

  • Designed Spaces, private community areas for community, cohort and course audiences whose access is derived from enrollment and membership records, with posts, comments, reactions, polls, events with RSVPs, moderation, private file serving, notifications and web push.

  • Implemented bilingual Typesense search for public content plus a server-mediated private search that re-checks the requester's access on every request.

  • Delivered English and Arabic routes with RTL layouts and localized CMS content, a poster-style card system with motion across the site, light and dark themes, and responsive live previews.

  • Wrote a Weebly archive importer that turns the old site into reviewable drafts with one redirect per legacy URL, and a security audit with fixes for a draft-preview authorization bypass and an open-redirect case.

  • Containerised and deployed on Dokploy behind CI that gates deploys, with PostgreSQL, Cloudflare R2 storage, cookieless PostHog analytics, and Vitest and Playwright coverage.

DEVSTACK
Open repository devstack
ResendBetter AuthHonoBullMQFontsource Variable InterZodTanStack TableFramer MotionReactShikiSonnerAWS S3CVAReact EmailTailwind MergedotenvxnuqsTanStack RouterTanStack FormReact IconsOxlintReact DoctorPdfnativeLoadable ComponentNumber FlowFiles SdkReact MarkdownMdx Js RollupUnpdfT3 EnvDefuReact Day PickerVaulBase UIshadcn/uiAssistant UiMastraVitest
ResendBetter AuthHonoBullMQFontsource Variable InterZodTanStack TableFramer MotionReactShikiSonnerAWS S3CVAReact EmailTailwind MergedotenvxnuqsTanStack RouterTanStack FormReact IconsOxlintReact DoctorPdfnativeLoadable ComponentNumber FlowFiles SdkReact MarkdownMdx Js RollupUnpdfT3 EnvDefuReact Day PickerVaulBase UIshadcn/uiAssistant UiMastraVitest
ViteDrizzlePostgreSQLRedisTanStack StartTanStack StoreLucidenext-themesRechartsSharpZustandTanStack DevtoolsNitrocmdkCommitlintOctokitdate-fnsTanStack QueryJoseTailwind CSSEvlogOllama Ai Provider V2BprogressLonik Oh ImageTanStack VirtualFuse.jsBabelRolldown Plugin BabelExtractus Article ExtractorStd EnvGeistReact Resizable PanelsoRPCdnd kitTipTapAI SDKSocket.IO
ViteDrizzlePostgreSQLRedisTanStack StartTanStack StoreLucidenext-themesRechartsSharpZustandTanStack DevtoolsNitrocmdkCommitlintOctokitdate-fnsTanStack QueryJoseTailwind CSSEvlogOllama Ai Provider V2BprogressLonik Oh ImageTanStack VirtualFuse.jsBabelRolldown Plugin BabelExtractus Article ExtractorStd EnvGeistReact Resizable PanelsoRPCdnd kitTipTapAI SDKSocket.IO
2026 — current

Dev-Hub is a self-hostable multi-tenant career OS: public portfolios, an evidence graph (experiences, projects, stacks), resume import/generate, a job applications CRM, and a Career Inbox that turns hiring email into pipeline actions — powered by TanStack Start, Hono, oRPC, Drizzle, Better Auth, and Mastra agents with BYO AI.

Open-source career platform for job seekers who want one system instead of a portfolio site, a resume tool, a spreadsheet CRM, and a Gmail inbox.

Public surface: path-based portfolios (/{profileName}) or verified custom domains, with opt-in evidence and a tenant-scoped public GitHub repo browser.

Private dashboard: CRUD for experiences, projects, and stacks; resume PDF import and generation; kanban applications CRM; Career Inbox (Gmail sync, classify, job-digest harvest, reply assist); review queue for AI drafts; settings for profile, domain, invites, connections, AI providers, job preferences, smart rules, and notifications.

Architecture: pnpm monorepo with shared domain contracts in Zod (packages/core), Postgres/Drizzle repositories, typed oRPC APIs, BullMQ workers, and Mastra multi-step AI workflows. MIT, Docker/Dokploy-first, no platform-funded LLM or mail budget.

Edge innovation center Dashboard - RAYA
Svgr WebpackTanStack QueryFloating UIRadix UIT3 OSS Env Next.jsTipTapCVACountry Data ListHtml React ParserLodashNext.jsPostCSSReact Circle FlagsReact DropzoneReact Phone Number InputSonnerTailwind CSSVaulLingual I18n CheckTanStack DevtoolsBaseline Browser MappingReact GrabZodJosedate-fnsFirebaseshadcn/ui
Svgr WebpackTanStack QueryFloating UIRadix UIT3 OSS Env Next.jsTipTapCVACountry Data ListHtml React ParserLodashNext.jsPostCSSReact Circle FlagsReact DropzoneReact Phone Number InputSonnerTailwind CSSVaulLingual I18n CheckTanStack DevtoolsBaseline Browser MappingReact GrabZodJosedate-fnsFirebaseshadcn/ui
next-intldnd kitReact Hook FormReact Google Maps ApiTanStack TableZappiconcmdkFramer MotionInput OtpLucidenext-themesReactReact Day PickerReact Hotkeys HookRechartsTailwind Mergeusehooks-tsZustandAxiosAgentationHuskySassTanStack FormnuqsSentryTypeScript
next-intldnd kitReact Hook FormReact Google Maps ApiTanStack TableZappiconcmdkFramer MotionInput OtpLucidenext-themesReactReact Day PickerReact Hotkeys HookRechartsTailwind Mergeusehooks-tsZustandAxiosAgentationHuskySassTanStack FormnuqsSentryTypeScript
2025

Operations admin console for EDGE Innovation Center, a multi-center coworking and flexible-workspace business. Staff manage centers, floors, doors, spaces and pricing, bookings, invoices, purchases, companies and customers, support content and push notifications, with per-admin permissions. Frontend only, consuming a separate Laravel API.

  • Top contributor on a 5-person frontend team (595 of 1,298 commits, about 70% of surviving lines by blame). Authored the initial architecture on Next.js 16 App Router, React 19 and TypeScript: shared UI, form, data-table, command-palette and i18n layers.

  • Built a reusable data-table framework on TanStack Table with URL-synced filtering, sorting and pagination through nuqs, and expandable rows.

  • Built a schema-driven form system on TanStack Form and Zod with a field registry, reused across the admin, customer, company, center and space modules.

  • Standardized the typed REST layer: an Axios fetcher with error normalization, an endpoint registry, TanStack Query queryOptions, server prefetch with hydration and mutation-driven cache invalidation.

  • Implemented authentication and authorization: JOSE-encrypted session cookies, middleware token refresh, redirect-after-login, and role-based access with about 188 permissions driving route guards and a permission-gated sidebar.

  • Owned the dashboard home with KPI cards and charts, administration (admins and roles), customers and groups, companies, centers with floors, doors and access logs using Google Maps selection, and spaces with types, amenities, layouts and pricing. Contributed to the multi-step booking flow, news with a TipTap editor, and push notifications.

  • Delivered English and Arabic interfaces with next-intl, typed messages, RTL direction handling and message-audit scripts, plus a command palette and an FCM-backed notification inbox.

  • Codified conventions as Cursor rules and an AGENTS.md used across the team, with Sentry instrumentation, Husky hooks and Bun-based tooling.

Alouf Transportation Admin Dashboard
Svgr WebpackTanStack QueryReact Hook FormReact Google Maps ApiAxiosCVAFramer MotionLucidenext-themesReact Day PickerReact Phone Number InputSonnerTailwind CSSVaulLingual I18n CheckHuskyCanvas ConfettiBase UITanStack FormnuqsFirebase
Svgr WebpackTanStack QueryReact Hook FormReact Google Maps ApiAxiosCVAFramer MotionLucidenext-themesReact Day PickerReact Phone Number InputSonnerTailwind CSSVaulLingual I18n CheckHuskyCanvas ConfettiBase UITanStack FormnuqsFirebase
next-intldnd kitRadix UIT3 OSS Env Next.jsTanStack TablecmdkInput OtpNext.jsReactReact DropzoneRechartsTailwind Mergeusehooks-tsZustandTanStack DevtoolsReact GrabReact Grab CursorZodJosedate-fnsTypeScript
next-intldnd kitRadix UIT3 OSS Env Next.jsTanStack TablecmdkInput OtpNext.jsReactReact DropzoneRechartsTailwind Mergeusehooks-tsZustandTanStack DevtoolsReact GrabReact Grab CursorZodJosedate-fnsTypeScript
2025

Platform-operator console for Al-Ouf, a B2B multi-tenant passenger-transport platform for corporate and school organisations. Admins run tenants and contracts, drivers, vehicles, routes and shifts, trips, rider and driver requests, field services, support tickets, reports and notifications. Frontend only, consuming a separate Laravel API.

  • Top contributor on the admin frontend (about 595 of 1,391 commits on the main line) of a Next.js 15, React 19, strict TypeScript and Tailwind 4 app with 98 routes.

  • Owned the tenants module (about 94% of its lines), settings (98%), notifications (100%) with an outbound composer and Firebase push, riders (75%), services (60%) and the application shell, and wrote the tenants pattern used as the reference feature structure.

  • Standardized the data layer: centralized endpoint contracts, a typed fetcher, TanStack Query queryOptions and mutation helpers across the backend's domains, with server prefetch on detail pages.

  • Built the shared form system on TanStack Form and Zod (used across 65 files) and the reusable data-table system with TanStack Table and URL-synced filters through nuqs.

  • Implemented authentication and authorization: encrypted session cookies, middleware token refresh, a role and permission matrix editor, and permission-gated sidebar and actions.

  • Delivered English and Arabic interfaces with RTL support and typed message files, plus public policy pages with localisation.

  • Contributed to drivers, vehicles, routes and shifts with map views, trips, requests, contracts and reports.

  • Maintained the team's engineering rules as Cursor rules and Taskmaster docs, with migration guides for pagination and the UI system.

RealDeal (Client + Vendor Web Platforms)
DompurifyReact Facebook LoginSlick CarouselEmotionnext-intlReact AriaAxiosTanStack FormnuqsFirebaseTailwind CSSCVALucidenext-themesReact DropzoneSonnerusehooks-tsLingual I18n CheckHuskydnd kitReact LeafletReact Oauth Google
DompurifyReact Facebook LoginSlick CarouselEmotionnext-intlReact AriaAxiosTanStack FormnuqsFirebaseTailwind CSSCVALucidenext-themesReact DropzoneSonnerusehooks-tsLingual I18n CheckHuskydnd kitReact LeafletReact Oauth Google
Qrcode.reactReact SlickHeroUISvgr WebpackTanStack QueryLottieFilesZodJosedate-fnsT3 OSS Env Next.jsTanStack TableFramer MotionNext.jsReactRechartsTailwind MergeZustandBaseline Browser MappingPostCSSEmbla CarouselInlangTypeScript
Qrcode.reactReact SlickHeroUISvgr WebpackTanStack QueryLottieFilesZodJosedate-fnsT3 OSS Env Next.jsTanStack TableFramer MotionNext.jsReactRechartsTailwind MergeZustandBaseline Browser MappingPostCSSEmbla CarouselInlangTypeScript
2025

Automotive marketplace for Egypt built as two Next.js frontends. The buyer site covers browsing, comparing, price history, official price lists, bidding, payment and deal tracking. The dealer dashboard covers inventory, paid ads, leads, a dealer-to-dealer platform, a points wallet, employees and roles.

  • Top contributor on both frontends: 223 of 620 commits in the dealer dashboard and 154 of 591 in the buyer site, about 46% of surviving source lines in each, working in teams of 8 to 10 contributors.

  • Dealer dashboard: main author of inventory (agent and private stock with filters), bidding, leads, settings, sidebar, landing KPIs and the auth and session layer. Buyer site: price history charts, official price lists, car details and my-deals, plus a large share of the shared components.

  • Standardized frontend architecture across both apps with feature folders, an API path registry, a shared axios fetcher, ESLint-enforced module boundaries and Cursor rules.

  • Built a typed REST layer with TanStack Query queryOptions and, in the buyer site, server prefetch with dehydrate, and schema-first multi-step forms on TanStack Form and Zod.

  • Implemented authentication and authorization: encrypted session cookies, token refresh, middleware route protection and permission-gated UI with roles in the dealer dashboard, plus Google and Facebook login in the buyer site.

  • Delivered English and Arabic with next-intl, direction switching and RTL-aware styling, with URL-synced filters through nuqs.

  • Built ad creation as a multi-step form with presigned S3 media upload and drag-sort ordering, a car comparison of up to four vehicles with a sortable grouped table, and Firebase push notifications.