بخش ۱ — فرانت‌اند

تجارت آنلاین
رابط کاربری وبلاگ و مجله

وبلاگ و آرشیو دیجیتال مجله Iran Business — طراحی RTL، موبایل‌فرست و آماده توسعه بک‌اند

ViteReact 19TypeScriptReact RouterRTL / فارسیStatic SPA
tejaratonline.ir
تجارت آنلاینخانه · مقالات · مجلات

نمای دسکتاپ — هیرو + کاور مجلات

نمای موبایل — منو و مقالات

صفحات پیاده‌سازی‌شده

۶ صفحه اصلی با UI کامل و محتوای استاتیک

Static Data — بدون بک‌اند

قابلیت‌های رابط کاربری

📰

وبلاگ مجله‌محور

مقالات استاتیک با دسته‌بندی و زمان مطالعه

📖

آرشیو PDF

کاور، پیش‌نمایش و دانلود نسخه‌های چاپی

🎨

کاور واقعی

استخراج کاور از صفحه اول هر PDF

📱

موبایل‌فرست

منوی ریسپانسیو و چیدمان RTL

بدون بک‌اند

محتوا از فایل استاتیک — سریع و ساده

🔤

فونت وزیرمتن

تایپوگرافی فارسی خوانا و مدرن

سیستم طراحی

پالت رنگی

Ink#0c1929برند، متن اصلی، فوتر
Gold#e8b84aتأکید برند و CTA
Teal#2a9d8fلینک‌ها و اکسنت ثانویه
Paper#f3f1ecپس‌زمینه صفحات سایت

تایپوگرافی و چیدمان

وزیرمتن — Vazirmatn

فونت فارسی با وزن‌های ۴۰۰ تا ۸۰۰. جهت RTL، فاصله‌گذاری مناسب برای خوانایی موبایل و حس مجله‌ای.

تکنولوژی‌ها

استک فنی پروژه
یک اکوسیستم یکپارچه

سایت و پنل ادمین با Vite + React + TypeScript؛ دیتابیس PostgreSQL و API سمت Node.

فرانت‌اند سایت

همین الان پیاده‌سازی شده

Vite

ابزار بیلد سریع و مدرن

React 19

کامپوننت‌های UI و صفحات

TypeScript

تایپ‌سیف بودن کل پروژه

React Router

مسیریابی SPA و صفحات

CSS سفارشی

سیستم طراحی RTL بدون Tailwind

Vazirmatn

فونت فارسی وب

پنل ادمین

همان استک فرانت — Vite + React + TypeScript

Vite + React 19

UI پنل مدیریت جدا یا زیر /admin

TypeScript

هم‌راستا با سایت اصلی

React Router

مسیرهای داشبورد و فرم‌ها

React Hook Form + Zod

فرم‌های معتبر و type-safe

TanStack Query

کش و همگام‌سازی داده با API

همان Design System

رنگ Ink / Gold / Teal و RTL

بک‌اند و دیتابیس

فاز بعدی — اتصال پنل و سایت به داده واقعی

PostgreSQL

دیتابیس اصلی مقالات، مجلات، کاربران

Node.js + Express/Fastify

REST API برای ادمین و سایت

Prisma ORM

مدل‌سازی و مایگریشن type-safe

JWT / Session Auth

ورود ادمین و نقش‌ها

Zod

اعتبارسنجی ورودی API

S3 / MinIO

ذخیره PDF و تصاویر کاور

معماری پیشنهادی

سایت عمومی

tejaratonline.ir

Vite + React — خواندن مقالات و مجلات از API

پنل ادمین

admin.tejaratonline.ir یا /admin

همان Vite + React — مدیریت محتوا و آپلود PDF

API

api.tejaratonline.ir

Node.js + Prisma → PostgreSQL

فایل‌ها

storage / CDN

PDF مجلات و کاورها روی S3 یا MinIO

بخش ۲ — مجلات PDF

آرشیو دیجیتال
Iran Business

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

🖼️

کاور استخراج‌شده

صفحه کاور هر PDF به‌صورت PNG ذخیره و در کارت‌ها نمایش داده می‌شود.

👁️

پیش‌نمایش آنلاین

iframe برای ورق زدن PDF داخل مرورگر، بدون نیاز به اپ جدا.

⬇️

دانلود مستقیم

دکمه دانلود و باز کردن در تب جدید برای هر شماره.

📁

مدیریت از ادمین

PDF و کاور در Media آپلود می‌شوند و رکورد در Magazines ساخته می‌شود.

افزودن شماره جدید

  1. وارد /admin شوید
  2. PDF و کاور را در Media آپلود کنید
  3. یک رکورد در کالکشن Magazines بسازید
  4. شماره بلافاصله در آرشیو و صفحه اصلی دیده می‌شود
بخش ۳ — محتوا

مقالات وبلاگ
با Payload CMS

مقالات از کالکشن Articles در پنل ادمین مدیریت می‌شوند و روی سایت نمایش داده می‌شوند.

نمونه مقالات فعلی

0 مطلب در CMS

ساختار داده مقاله

هر مطلب شامل slug، عنوان، خلاصه، دسته، تاریخ، زمان مطالعه، کاور و بدنه متن است.

{
  slug: "ayande-tejarat-electronici",
  title: "آینده تجارت الکترونیکی...",
  category: "تحلیل",
  date: "۱۴۰۴/۰۴/۱۲",
  body: RichText (Lexical)
}
بخش ۴ — بک‌اند و پنل ادمین

پنل مدیریت
Vite + React + PostgreSQL

ادمین با همان تکنولوژی فرانت فعلی ساخته می‌شود؛ داده روی PostgreSQL و API سمت Node.

تکنولوژی‌های پنل و بک‌اند

Vite + React 19

همان استک سایت — UI پنل ادمین

TypeScript

تایپ‌سیف در فرم‌ها و API client

React Router

مسیرهای /admin و صفحات داشبورد

PostgreSQL

دیتابیس اصلی محتوا و کاربران

Prisma ORM

مدل Article، Magazine، User

Node.js API

REST برای CRUD و آپلود فایل

Auth + RBAC

ورود ادمین، سردبیر، نویسنده

S3 / MinIO

ذخیره PDF و کاور مجله

ماژول‌های پنل ادمین

همان تجربه UI سایت — برای تیم تحریریه

📝

مدیریت مقالات

ایجاد، ویرایش، انتشار و زمان‌بندی مطالب وبلاگ

📚

مدیریت مجلات

آپلود PDF، کاور، شماره، تاریخ و تعداد صفحات

🏷️

دسته‌ها و برچسب‌ها

ساختار محتوایی برای فیلتر و سئو داخلی

👤

کاربران و نقش‌ها

ادمین، سردبیر، نویسنده با دسترسی محدود

🖼️

رسانه

آپلود تصویر مقاله و فایل PDF روی storage

📊

آمار

بازدید مطالب و تعداد دانلود هر شماره

نقش‌ها (RBAC)

ادمین

Admin

دسترسی کامل به محتوا، کاربران و تنظیمات

سردبیر

Editor

انتشار مقالات و مدیریت مجلات PDF

نویسنده

Writer

ایجاد و ویرایش پیش‌نویس مطالب خود

مدل‌های PostgreSQL

جداول اصلی با Prisma روی PostgreSQL

articles

slug, title, body, category, status, published_at

magazines

issue, pdf_url, cover_url, pages, published_at

users

email, role, password_hash, created_at

categories

name, slug, sort_order

چرا همین استک؟

  • پنل ادمین و سایت عمومی یک زبان، یک تیم، یک Design System
  • PostgreSQL پایدار و مناسب آرشیو مقالات و متادیتای مجلات
  • سردبیر بدون دسترسی به کد، مطلب و PDF اضافه می‌کند
  • جستجو، فیلتر، پیش‌نویس و آمار دانلود روی داده واقعی
بخش ۵ — SEO

دیده‌شدن در گوگل
برای مجله و مقالات

ساختار محتوایی وبلاگ و آرشیو PDF برای جستجوی موضوعی و برند آماده است.

🏗️

سئوی فنی

  • عنوان و meta description اختصاصی هر صفحه
  • ساختار URL تمیز برای مقالات و مجلات
  • sitemap و robots در فاز استقرار
  • Open Graph برای اشتراک شبکه‌های اجتماعی
📝

سئوی محتوا

  • هدینگ سلسله‌مراتبی در مقالات
  • متن یونیک برای هر مطلب و معرفی مجله
  • alt روی کاور مجلات و تصاویر
  • لینک داخلی بین مقالات و آرشیو PDF
📊

Schema پیشنهادی

  • Organization / WebSite برای برند
  • Article برای مطالب وبلاگ
  • BreadcrumbList در جزئیات
  • CreativeWork برای نسخه‌های مجله

الگوی عنوان صفحات

خانه

تجارت آنلاین | مجله و وبلاگ Iran Business

برند + مجله

مقالات

مقالات | تجارت آنلاین

آرشیو وبلاگ

مقاله

{عنوان مطلب} | تجارت آنلاین

کلمه کلیدی مطلب

مجلات

آرشیو مجلات PDF | تجارت آنلاین

Iran Business + PDF

بخش ۶ — سرعت

عملکرد
سبک و قابل استقرار

فرانت استاتیک روی هر هاست استاتیک یا CDN قابل deploy است.

Vite + SPA سبک

بیلد سریع و bundle فشرده برای تجربه روان روی موبایل.

📦

محتوای استاتیک

بدون درخواست API برای لیست مقالات و مجلات در فاز فعلی.

🖼️

کاور lazy-load

تصاویر کاور با loading=lazy برای کاهش بار اولیه.

📄

PDF جدا از UI

فایل‌های سنگین فقط در صفحه جزئیات مجله بارگذاری می‌شوند.

بخش ۷ — زمان‌بندی

نقشه راه
طراحی سایت، نه تولید محتوا

تعهد ما طراحی و پیاده‌سازی سایت و پنل است. متن مقالات، PDFها و محتوای نهایی را خود کارفرما وارد می‌کند.

تفکیک مسئولیت

تیم طراحی / توسعه

  • UI/UX و فرانت‌اند سایت
  • پنل ادمین و اتصال به PostgreSQL
  • داده نمونه فقط برای نمایش دمو

کارفرما / تحریریه

  • نوشتن و انتشار مقالات
  • آپلود شماره‌های PDF و کاور
  • به‌روزرسانی درباره ما و متون برند
ماه 1هفته ۱ – ۲

طراحی و فرانت‌اند سایت

تیم توسعه

  • طراحی و پیاده‌سازی UI (موبایل + دسکتاپ)
  • صفحات خانه، مقالات، مجلات، درباره ما
  • آرشیو PDF با کاور، پیش‌نمایش و دانلود
  • سیستم طراحی RTL و داده نمونه برای دمو

سمت کارفرما

  • تأیید ظاهر، منو و حس برند (در صورت نیاز لوگو/رنگ)
  • تأیید ساختار صفحات — بدون نیاز به تحویل متن مقاله
ماه 1هفته ۳ – ۴

پرداخت نهایی UI و استقرار

تیم توسعه

  • رفع باگ UI و هماهنگی ریسپانسیو
  • SEO فنی پایه (عنوان، متا، ساختار URL)
  • آماده‌سازی بیلد و Deploy روی دامنه

سمت کارفرما

  • دامنه، هاست/CDN و SSL
  • تأیید نهایی ظاهر سایت
ماه 2هفته ۵ – ۸

API + PostgreSQL + پنل ادمین

تیم توسعه

  • راه‌اندازی PostgreSQL و Prisma
  • API برای مدیریت مقالات و مجلات (CRUD + آپلود)
  • پنل ادمین با Vite + React + TypeScript
  • نقش‌ها و اتصال سایت به API

سمت کارفرما

  • ورود به پنل و وارد کردن محتوا توسط خود تیم کارفرما
  • آپلود PDF و مقالات — خارج از تعهد تیم طراحی

چک‌لیست کارفرما

دامنه و SSLقبل از publish
لوگو / رنگ برند (اختیاری)هفته ۱
تأیید ظاهر و بازخورد UIمداوم
ورود محتوا در پنل (مقاله، PDF، درباره ما)بعد از تحویل پنل — توسط کارفرما
اگر دوست داشتید

امکانات اختیاری
بعد از فاز اصلی

این موارد ضروری نیستند؛ در صورت نیاز به تجربه غنی‌تر اضافه می‌شوند.

🔍

جستجوی داخلی

جستجو روی عنوان و متن مقالات و عنوان مجلات.

🌙

حالت مطالعه

تم خواندن برای مقالات با فونت و عرض بهینه.

📬

خبرنامه

عضویت برای اطلاع از شماره جدید مجله.

📤

اشتراک‌گذاری

دکمه‌های اشتراک مقاله و مجله در شبکه‌ها.

🗂️

فیلتر دسته‌ها

فیلتر مقالات بر اساس تحلیل، بازاریابی و ...

📱

PWA

نصب سایت روی موبایل برای دسترسی سریع به آرشیو.

آماده مشاهده سایت هستید؟

فرانت فعلی با مقالات نمونه و سه شماره PDF Iran Business آماده دمو است.

رفتن به سایتآرشیو مجلات