مشاهده ریپو نمایش سایت
نمونه کار Full-Stack Production Ready

پورتفولیو شخصی
با CMS، پادکست و سفارش‌گیری

یک وب‌اپلیکیشن کامل برای معرفی حرفه‌ای، مدیریت محتوا از پنل ادمین، پخش پادکست، نمایش نمونه‌کارها و دریافت سفارش طراحی سایت — با UI مدرن، RTL و معماری React + Express + MongoDB.

48+فایل سورس فرانت
10+ماژول API
100%RTL فارسی
مشاهده سایت زنده مشاهده Repository

آدرس استقرار: person.mmdcode.top

person.mmdcode.top
👨‍💻
🎙️
پادکستپلیر پیشرفته
⚙️
CMSمدیریت محتوا
⚡

Vite + React 18

SPA سریع با code splitting، lazy chunks و HMR در توسعه

🗄️

MongoDB + Mongoose

ذخیره تنظیمات، پروژه‌ها، پادکست، پیام و سفارش

🎨

Design System

Glassmorphism، نئون، Tailwind و کامپوننت UI یکپارچه

🔐

JWT + Security

Helmet، CORS، Rate Limit، XSS clean و bcrypt

Frontend

قابلیت‌های سایت عمومی

هر بخش از صفحه اصلی با محتوای داینامیک از API و تجربه کاربری مدرن

01

صفحه خانه (Hero)

  • عنوان، زیرعنوان و توضیحات از Settings API
  • آمار تجربه، پروژه و مشتری
  • تصویر پروفایل با fallback انیمیشن‌دار
  • Color Picker — ۸ رنگ تم با CSS Variables
  • لینک شبکه‌های اجتماعی (GitHub، Instagram، Telegram، WhatsApp، YouTube)
  • CTA: نمونه‌کارها، سفارش سایت، تماس
02

درباره من

  • متن معرفی داینامیک
  • کارت دستاوردها (تجربه، پروژه، رضایت مشتری)
  • Skill bars — HTML، CSS، JS، Bootstrap، Tailwind، WordPress، Elementor، SEO
  • انیمیشن progress bar
03

پادکست‌ها

  • لیست پادکست با thumbnail و دسته‌بندی
  • پلیر صوتی کامل: play/pause، seek، volume، mute
  • نمایش duration و تاریخ
  • Like / علاقه‌مندی
  • فیلتر پلی‌لیست و دسته‌بندی
  • Modal جزئیات پادکست
04

نمونه کارها

  • Grid responsive با تصویر پروژه
  • Modal جزئیات: توضیح، تکنولوژی، سال، دسته
  • لینک مستقیم به وبسایت پروژه
  • Pagination
  • بارگذاری از API
05

تماس با من

  • فرم: نام، ایمیل، موضوع، پیام
  • Validation سمت کلاینت
  • ارسال به /api/contact
  • Success Modal
  • اطلاعات تماس، ساعات کاری، social links
06

سفارش طراحی سایت

  • Modal چندمرحله‌ای (Wizard)
  • انتخاب نوع: فروشگاهی، شرکتی، آموزشی، املاک
  • انتخاب پلن قیمت (اقتصادی، نقره‌ای، طلایی)
  • فرم اطلاعات مشتری
  • ثبت در /api/orders
07

UX و افکت‌ها

  • Welcome Modal — اولین بازدید (localStorage)
  • Loader اولیه با انیمیشن MSK
  • Custom Cursor (Firefly style)
  • Background orbs + grid pattern + particles
  • NavBar sticky با scroll spy
  • منوی موبایل drawer
  • Section dividers
08

SEO و Meta

  • DocumentMeta — title و description داینامیک
  • theme-color از تنظیمات
  • React Router — مسیر admin
  • SPA fallback (.htaccess / _redirects)
  • فونت Vazirmatn لوکال
UI Design

پیش‌نمایش المان‌های طراحی‌شده

نمونه بصری از بخش‌هایی که در پروژه پیاده‌سازی شده‌اند

پلیر پادکست
🎙️

اپیزود طراحی UI مدرن

12:34تکنولوژی
ویزارد سفارش سایت
۱ نوع ۲ پلن ۳ اطلاعات
🛒فروشگاهی
🏢شرکتی
🎓آموزشی
🏠املاک
پلن طلایی
کارت نمونه کار
React

فروشگاه آنلاین

طراحی UI/UX و توسعه فرانت با React

TailwindNode.js
فرم تماس
Color Picker تم

🎨 رنگ تم سایت

--color-primary: #6366f1
Responsive موبایل
☰
Admin Panel

پنل مدیریت CMS

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

⚙️ پنل مدیریت
  • 📊 داشبورد
  • ⚙️ تنظیمات
  • 🎙️ پادکست ▼
  • 📁 دسته‌بندی
  • 📋 پلی‌لیست
  • 💼 نمونه کارها
  • 🛒 سفارشات 3
  • ✉️ پیام‌ها 5
24پیام
8پادکست
12سفارش
15پروژه
فعالیت هفتگی — Chart.js

📊 داشبورد

آمار پیام، پادکست، سفارش و پروژه — فعالیت‌های اخیر — نمودار هفتگی Chart.js — توزیع دسته‌بندی

⚙️ تنظیمات CMS

ویرایش خانه، درباره من، تماس، social — آپلود تصویر پروفایل و لوگو — bulk save — initialize defaults

🎙️ مدیریت پادکست

CRUD پادکست — آپلود audio/image — دسته‌بندی و پلی‌لیست — thumbnail و duration

💼 نمونه کارها

ایجاد/ویرایش/حذف — آپلود تصویر پروژه — تکنولوژی، URL، سال، دسته

🛒 سفارشات و پلن‌ها

لیست سفارشات — فیلتر وضعیت — تغییر status — مدیریت پلن‌های قیمت

✉️ پیام‌ها

inbox پیام‌های تماس — mark as read — جستجو — حذف — badge unread

🔐 احراز هویت

Login JWT — refresh token — ProtectedRoute — change password — rate limit login

📤 آپلود فایل

ImageUploader، AudioUploader، SingleImage — validation نوع و حجم — multer backend

Backend API

معماری سرور و API

React SPA
Vite Build
→
Express REST
/api/*
→
MongoDB
Mongoose
/api/settings /api/projects /api/podcasts /api/contact /api/orders /api/auth /api/plans /uploads

🛡️ امنیت

Helmet CSP — CORS whitelist — HPP — XSS clean — mongo sanitize — express-rate-limit — slow-down — bcrypt — JWT

📁 فایل و رسانه

Multer uploads — static /uploads — projects، audio، playlists — MAX_FILE_SIZE config

🏥 Health & Ops

/health/live — /health/ready — Pino logging — PM2 ecosystem — graceful shutdown — trust proxy

🌱 Seed & Deploy

seed-demo-data — AdminInitializer — ENV docs — DEPLOY.md — Vite proxy dev — .htaccess SPA

Stack

تکنولوژی‌های استفاده‌شده

Frontend

React 18Vite 5Tailwind CSS React Router 6Chart.jsReact Icons

Backend

Node.jsExpress 4Mongoose 9 JWTMulterexpress-validator

DevOps

PM2CompressionPino dotenvcPanel/nginx

آماده مشاهده پروژه؟

نسخه زنده روی دامنه person.mmdcode.top در دسترس است. سورس کد در GitHub (لینک قابل تنظیم).

نمایش سایت زنده مشاهده Repository

طراحی و توسعه: محمد سجادی (mmdcode)