رفتن به محتوا
triplem.dev

محمد مهدی مولائی

توسعه‌دهنده ارشد فرانت‌اند — Vue / Nuxt، React / Next.js

ماتجربه‌هایدیجیتالِ مقیاس‌پذیرمی‌سازم.

نمایش سه‌بعدی و تعاملی نشان triplem.dev: سه خط موازی که خط میانی طلایی است.

///سه خط، یک سیستمنشانگر را روی یک خط ببرید، برای چرخاندن بکشید، برای لایه‌لایه شدن کلیک کنید.
نمونه‌کارهای منتخب
۰۱ / درباره

رابط‌هایی می‌سازم که از پیکسل تا محصول، مقیاس‌پذیرند.

محل زندگی
آسیا
تمرکز
مهندسی فرانت‌اند
اصلی
Vue / Nuxt
همچنین
React / Next.js

مهندس ارشد فرانت‌اند هستم؛ بیشتر با Vue و Nuxt کار می‌کنم و با React و Next.js هم راحتم. به بخش‌هایی اهمیت می‌دهم که کاربر هرگز نمی‌بیند — مرزها، state، استراتژی رندر — چون همین‌ها تعیین می‌کنند بخش‌های دیدنی چه حسی داشته باشند.

از سال ۲۰۲۰ فرانت‌اند می‌سازم: یک سامانه مدیریت یادگیری برای Smart-Sino UK، یک ERP برای شرکت‌های بازرسی در NCT و اخیراً ترازو، پلتفرم حقوقی مبتنی بر Next.js با رندر سمت سرور.

بیشتر درباره من
روش — سه مرحله، یک سیستم
  1. / ۰۱

    ایده

    پیش از کشیدن درخت کامپوننت‌ها، مسئله محصول را بفهم.

  2. / ۰۲

    معماری

    مرزها، جریان داده و رندر را طوری طراحی کن که سیستم بدون بازنویسی رشد کند.

  3. / ۰۳

    تجربه

    رابط‌هایی بساز که روی هر دستگاهی سریع، دسترس‌پذیر و سنجیده باشند.

۰۲ / مهارت‌ها

یک سیستم به‌هم‌پیوسته، نه نوار پیشرفت.

یک فناوری را انتخاب کنید تا ببینید برای چیست، به چه وصل است و کجا استفاده شده.

زبان
فریم‌ورک
مهارت
۰۳ / هوش مصنوعی

با وایب کشف می‌کنم.با اسپک تحویل می‌دهم.

هر روز با هوش مصنوعی می‌سازم، از اولین طرح تا آخرین بازبینی. ابزارها هر چند ماه عوض می‌شوند. چیزی که می‌ماند، دانستن این است که هر مسئله کدام حالت را لازم دارد.

همین سایت هم همین‌طور ساخته شده: یک CLAUDE.md که کدبیس را برای ایجنت‌ها توضیح می‌دهد، اسکیل‌های پروژه برای Nuxt، Vue و چندزبانگی، و یک ورک‌فلوی روزانه که در آن Claude Code پیش‌نویس یک پست را می‌نویسد، کاورش را می‌کشد و یک pull request برای بازبینی من باز می‌کند.

  • کشف

    وایب کدینگ

    برای پروتوتایپ‌ها، آزمایش‌ها و پروژه‌های شخصی. چیزی را که می‌خواهم توصیف می‌کنم، اجرایش می‌کنم، واکنش نشان می‌دهم و حلقه را کوتاه نگه می‌دارم. هدف این است که سریع بفهمم چه چیزی ارزش ساختن دارد.

  • تحویل

    توسعه مبتنی بر اسپک

    برای هر چیزی که به production می‌رود. نیازمندی‌ها، طرح و فهرست تسک‌ها اول نوشته می‌شوند و در ریپو می‌مانند. ایجنت‌ها بر اساس آن‌ها می‌سازند و اسپک به چک‌لیست بازبینی تبدیل می‌شود.

شکل ۰۳ — یک قابلیت در طول چرخه: فرم تماس همین سایت

چه می‌سازیم و چرا، با معیارهای پذیرشی که هر کسی بتواند بررسی کند.

spec.md
# Contact form## WhyVisitors need a direct way to reach me,without the site becoming a spam relay.## Acceptance criteria- [ ] Name, email, topic and message are required- [ ] At most 5 messages per IP every 15 minutes- [ ] Bots get a quiet success, never an error- [ ] Mail reaches me only; the visitor is Reply-To
ابزارهای این مرحلهChatGPTClaude
پنج ابزار، هر کدام با یک کار

  • ChatGPT

    هم‌فکر من: تحقیق، مقایسه گزینه‌ها و محک زدن یک ایده پیش از آنکه به اسپک تبدیل شود.

    استفاده در تعریف

  • Claude

    خواندن و نوشتن طولانی و دقیق: اسپک‌ها، طرح‌ها و نظر دوم روی تغییرات بزرگ.

    استفاده در تعریف · طرح

  • Claude Code

    ایجنت ترمینال من. ریپو و CLAUDE.md را می‌خواند، برنامه می‌ریزد و بعد تسک‌ها را یکی‌یکی پیش می‌برد.

    استفاده در طرح · تسک‌ها · ساخت · بررسی

  • GitHub Copilot

    تمام روز در ادیتور: تکمیل خودکار و ویرایش درجا، به‌علاوه بازبینی pull requestها.

    استفاده در ساخت · بررسی

  • OpenCode

    یک ایجنت ترمینال متن‌باز، برای اجرای همین چرخه با هر مدلی که برای آن کار مناسب‌تر است.

    استفاده در تسک‌ها · ساخت

۰۴ / تجربه

فصل‌ها

جدیدترین در ابتدا
  1. ۲۰۲۶
    فصل 04 · پلتفرم حقوقی

    توسعه‌دهنده فرانت‌اند

    ترازو

    فرانت‌اند ترازو؛ پلتفرم مشاوره حقوقی با رندر سمت سرور که کاربران در آن خدمات حقوقی را مرور می‌کنند، با کمک هوش مصنوعی سؤال حقوقی می‌پرسند و وقت مشاوره با وکیل رزرو و پرداخت می‌کنند.

    صفحه اصلی ترازو: معرفی پلتفرم حقوقی در کنار کارت دستیار حقوقی هوش مصنوعی
    TypeScript
    JavaScript
    Next.js
    React
    TypeScript
    TanStack Query
    Redux
    NextAuth
    Tailwind
    Radix UI
    React Hook Form
    Zod
    Docker
    Sentry
    HTML & CSS
    Architecture
    etarazoo.com
    بیشتر بخوانید — ترازو

    معماری ماژولار روی App Router در Next.js با مالکیت روشن برای هر بخش: وضعیت سمت سرور با TanStack Query، وضعیت سمت کلاینت با Redux Toolkit و ورود با کد یک‌بارمصرف (OTP) از طریق NextAuth. همه‌چیز با یک دیزاین سیستم اختصاصی بر پایه Tailwind CSS 4 و Radix UI ساخته شده، با Docker و Nginx منتشر می‌شود و در محیط اصلی با Sentry و لاگ ساخت‌یافته پایش می‌شود.

    نکات برجسته
    • یک سیستم صفحه‌ساز که بلوک‌های قابل پیکربندی (هیرو، خدمات، مزایا، سؤالات متداول، روند کار، بلاگ و اخبار، نظرات) را از داده‌های بک‌اند رندر می‌کند.
    • قابلیت پرسش حقوقی با کمک هوش مصنوعی و فرایند رزرو وکیل با پرداخت یکپارچه.
    • فرم‌های مطمئن با React Hook Form و Zod و اعتبارسنجی مبتنی بر اسکیما در ورود، پرسش‌ها و رزروها.
  2. ۲۰۲۴
    فصل 03 · IKA · ERP بازرسی

    توسعه‌دهنده فرانت‌اند

    IKA Engineering Co — ایران . تهران

    IKA، یک سیستم ERP برای شرکت‌های بازرسی؛ یک فضای کار واحد برای افراد، قراردادها و بازرسی‌هایی که پشت هر پروژه هستند.

    داشبورد IKA: منوی کناری با ماژول‌های کاربران، مشتریان، هماهنگ‌کننده‌ها، بازرس‌ها، قراردادها و بازرسی‌ها
    صفحه ورود IKA با کلیدهای تغییر پوسته و زبان
    Nuxt.js
    Vue
    Vuetify
    TypeScript
    HTML & CSS
    Tailwind
    JavaScript
    Architecture
    بیشتر بخوانید — IKA Engineering Co

    ساختار برنامه حول خودِ کسب‌وکار بازرسی شکل گرفته است: کاربران، مشتریان، هماهنگ‌کننده‌ها و بازرس‌ها، همراه با بخش‌های تودرتوی قراردادها و بازرسی‌ها. کارهای اداری هم در همین برنامه انجام می‌شود (مکاتبات، مدیریت فایل، منوی ماهانه و رزرو غذای کارکنان) تا تیم‌ها به‌جای چند ابزار، در یک ابزار کار کنند.

    نکات برجسته
    • صفحات مدیریت کاربران، مشتریان، هماهنگ‌کننده‌ها و بازرس‌ها، به‌همراه بخش‌های تودرتوی قرارداد و بازرسی.
    • ماژول‌های پشتیبانی در همان برنامه: مکاتبات، مدیریت فایل، منوی ماهانه و رزرو غذا.
    • پوسته روشن و تیره، تغییر زبان و اعلان‌های زنده در سراسر برنامه.
  3. ۲۰۲۳
    فصل 02 · ERP بازرسی

    توسعه‌دهنده فرانت‌اند

    NCTEVO — چین

    یک سیستم ERP برای شرکت‌های بازرسی؛ یک فضای کار واحد برای افراد و بازرسی‌هایی که پشت هر پروژه هستند.

    داشبورد IKA: منوی کناری با ماژول‌های کاربران، هماهنگ‌کننده‌ها، بازرس‌ها و بازرسی‌ها
    صفحه ورود IKA با کلیدهای تغییر پوسته و زبان
    Nuxt.js
    Vue
    Vuetify
    TypeScript
    HTML & CSS
    Tailwind
    Architecture
    NCTEVO
    بیشتر بخوانید — NCTEVO

    ساختار برنامه حول خودِ کسب‌وکار بازرسی خارجی شکل گرفته است: مشتریان، هماهنگ‌کننده‌ها و بازرس‌ها و بازرسی‌ها.

    نکات برجسته
    • صفحات مدیریت کاربران، مشتریان، هماهنگ‌کننده‌ها و بازرس‌ها، به‌همراه بخش‌های تودرتوی بازرسی.
    • پوسته روشن و تیره، تغییر زبان و اعلان‌های زنده در سراسر برنامه.
    • experience.items.nctevo.highlights.2
  4. ۲۰۲۰
    فصل 01 · سامانه مدیریت یادگیری

    توسعه‌دهنده فرانت‌اند

    Smart-Sino UK — چین

    یک سامانه پیشرفته مدیریت یادگیری که داده‌های دانشجویان و مدرسان را در یک‌جا نگه می‌دارد.

    صفحه فرود Smart-Sino UK: شعار «Wise choice, worthy cost» روی تصویر پل برج لندن
    Nuxt.js
    Vue
    Vuetify
    TypeScript
    JavaScript
    HTML & CSS
    Architecture
    بیشتر بخوانید — Smart-Sino UK

    محصول اصلی، یک سامانه پیشرفته مدیریت یادگیری (LMS) بود که برای مدیریت کارآمد داده‌های دانشجویان و مدرسان طراحی شد و با قابلیت زمان‌بندی، زمان‌های در دسترس مدرسان و جلسات کلاس را سازمان‌دهی می‌کند.

    نکات برجسته
    • مدیریت پرونده‌های دانشجویان و مدرسان در یک سامانه.
    • زمان‌بندی زمان‌های در دسترس مدرسان و جلسات کلاس.
۰۵ / بلاگ

بلاگ

یادداشت‌های مهندسی درباره معماری، رندر و ظرافت رابط کاربری.

همه نوشته‌ها
  1. 01 · ۱۴۰۵ آبان
    نکتهٔ حرفه‌ای Nuxt: خطای ویجت‌ها را با NuxtErrorBoundary مهار کنید، نه با صفحهٔ خطای تمام‌صفحه nuxt · pro-tip · error-handling
  2. 02 · ۱۴۰۵ مهر
    Vite 8.3.5: انتشاری برای مستحکم‌کردن bundled-dev، به‌همراه اصلاحات import map و optimizer vite · tooling · rolldown
  3. 03 · ۱۴۰۵ مهر
    create-vite یک روز به TypeScript 7 رفت: بازگشت آن دربارهٔ toolchain شما چه می‌گوید typescript · vite · tooling
  4. 04 · ۱۴۰۵ مهر
    نکتهٔ حرفه‌ای Next.js: بررسی احراز هویت در سطح صفحه از Server Action داخل آن محافظت نمی‌کند next.js · pro-tip · security
۰۶ / تماس

بیایید چیزی
عالی بسازیم.

ایده محصول، چالش فنی یا فرصتی جذاب دارید؟ صحبت کنیم.

mahdi.molaei2000@gmail.com
یا یک پیام بفرستید
GitHub LinkedIn Telegram