Mahdi Delavar

Frontend Developer

Based in Tabriz, Iran · Open to remote work & relocation

Building complex, data-intensive products with React & TypeScript.

I build maintainable frontend systems for complex products, with a focus on reusable architecture, data-intensive interfaces, and real business workflows.

Download Résumé
About

Frontend Engineering in Practice

React and TypeScript for enterprise workflows and maintainable products

Portrait of Mahdi Delavar

Mahdi Delavar

Frontend Developer

3+ YearsTabriz, IranReact + TypeScript

I'm a frontend developer working mainly with React and TypeScript. Over the past few years, I've worked on everything from personal full-stack products to a large, multi-module enterprise ERP.

Most of my professional work has involved turning complex business workflows into maintainable frontend systems: data-heavy interfaces, reusable form and table infrastructure, routed workflows, state management, and shared architecture such as PageShell.

I usually care as much about the structure behind a feature as the UI itself. I try to understand how the workflow and data actually behave, then build the frontend around that instead of duplicating the same logic for every new page. I also use personal projects to explore full-stack development and product engineering end to end.

Experience

Professional Journey

Frontend experience across enterprise ERP and product delivery

Pump Turbine Co. (Petco)

Frontend Developer

Full-time
Aug 2024 – Present · 2+ yearsTabriz, Iran

In-house ERP for a pump and turbine manufacturer, covering sales, engineering, planning, finance and office workflows. I started on the legacy system and have been building the new React + TypeScript ERP since November 2024.

  • Designed and built PageShell, a factory-based page system that removes repeated component wiring and CRUD logic across modules, cutting code size by 60%. It supports plugins such as file upload, digital signature and reporting, plus nested pages with parent context; 57 of the ERP's ~80 pages are built on it.
  • Designed and built the shared data-table system in client-side and server-side versions: server-side paging, sorting and filtering, multi-condition search, per-table persisted state, bulk actions, permission-aware actions and a responsive mobile card view.
  • Built a multi-tab workspace on React Router with temporary and pinned tabs, tab reordering and state that survives reloads, so users can work on several records at once.
  • Implemented the workflow system: approval inbox (cartable), signatures, revisions, request rejection and reset to the first step, with transactions handled at each step.
  • Codified the ERP's frontend and backend architecture as agent skills and docs, so new modules built with Codex and Claude Code follow the same conventions as the hand-written code.
ReactTypeScriptTanStack QueryZustandReact Hook FormTailwind CSS 4RTL UI.NET Core (supporting)

1 / 2

Projects

Featured Projects

Products I designed, built and deployed end to end

TidySense screenshot
Full Stack · 2026

TidySense

AI-assisted personal planner (Persian, RTL)

A planner where you describe a goal and the AI drafts a week of tasks and routines. Nothing is saved until you review and apply the draft, and manual planning keeps working when AI is off.

Key Features

  • AI-drafted weekly plans with review before apply
  • Today view with tasks, dependencies & recurring routines
  • Phone OTP login with cookie-based sessions

Tech Stack

React 19TypeScriptTanStack Router & QueryZustand.NET 10PostgreSQL
Live demo Source code
Skills

Tech Stack

React and TypeScript first, supported by frontend architecture, data handling, and practical backend tooling.

Core Frontend

  • React.js
  • TypeScript
  • Next.js
  • Tailwind CSS

State & Data

  • TanStack Query
  • Zustand
  • React Hook Form
  • React Router

Frontend Architecture

  • Data-Intensive UI
  • Reusable Architecture
  • Routed Workspaces
  • RTL Support
  • Server / Client Tables

Supporting Stack

  • Vite
  • Axios
  • Node.js
  • Express
  • PostgreSQL
  • SQL Server
  • Docker
  • Docker Compose
  • REST APIs

Tools

  • Git / GitHub
  • Azure
  • CI/CD
  • Stimulsoft Report
  • Claude Code / Codex
  • Agent skills & MCP
Built Product

Performance Lab

A simulated online store with real performance tickets: you find what makes it slow, change the code, and watch the numbers drop.

Open the Labor try the JavaScript & React quiz

3 tickets open · Free, in Persian, no sign-up.

loadProductsPage()target ≤ 1,500ms

Request waterfall of a product page: 2,860ms before the fix, 1,160ms after.

Articles

Engineering, explained

Technical notes and case studies about frontend architecture, product decisions, and the lessons behind complex interfaces.

ERPOctober 25, 20269 min read

Building a Shared Data Table for an ERP: Who Owns the State?

How a client-side list component grew into separate client and server tables, why TanStack Table was tried and not adopted, and how table state moved from the URL to per-table persisted stores.

Frontend ArchitectureState Management
See all articles

Education

B.Sc. in Computer Engineering

Islamic Azad University, Tabriz

2023 – expected 2028Tabriz, Iran

Focus: Software engineering and web development

Contact

Let's Connect

I'm open to frontend opportunities, technical collaboration, and conversations around complex product engineering.

Contact Information

Send Message