طراحی اولیه «مجله آموزشی تدریسینو» #1

New Issue

zehish · 2026-10-06T01:00:03+03:30

zehish commented

2026-10-06 01:00:03 +03:30

Frontend — طراحی اولیه «مجله آموزشی تدریسینو» با Figma Make

هدف

طراحی و ساخت نسخه اولیه Frontend برای «مجله آموزشی تدریسینو» با تمرکز روی تجربه کاربری ساده، تمیز، دانش‌آموزپسند و Responsive.

Frontend:
https://blog.tadrisino2.ir

Backend API:
https://blog-api.tadrisino2.ir/api/

مهم:
بخش مجله کاملاً Public است و کاربر برای مشاهده محتوا، جستجو، فیلتر کردن یا باز کردن مقاله‌ها نیازی به Login/Register ندارد.
هیچ صفحه Login/Register و هیچ Auth Flow برای این پروژه طراحی نشود.

1. صفحات اصلی

در نسخه اولیه این 5 صفحه ساخته شود:

1. Home

Route:
/

صفحه اصلی مجله شامل:

Header / Navigation
Hero section
Featured Articles
Latest Articles
Popular Articles
Recommended Articles
Categories
Grades
Footer

Hero:

عنوان: «مجله آموزشی تدریسینو»
توضیح کوتاه درباره مجله
CTA: «مطالعه مطالب»
تصویر/Illustration مرتبط با دانش‌آموز، مطالعه، آموزش و تکنولوژی

2. Magazine / Articles List

Route:

/magazine

امکانات:

نمایش لیست همه مقالات
Search
Filter بر اساس Category
Filter بر اساس Grade
Sort:
- جدیدترین
- محبوب‌ترین
- منتخب
Article Cards
Pagination یا Load More
Sidebar در Desktop
فیلترها در حالت Mobile به صورت Drawer / Dropdown

Article Card شامل:

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

3. Article Detail

Route:

/magazine/articles/{slug}

شامل:

Breadcrumb
عنوان مقاله
Subtitle / Excerpt
تصویر اصلی
نویسنده
تاریخ
زمان مطالعه
تعداد بازدید
تعداد لایک
محتوای کامل مقاله
Table of Contents برای مقالات طولانی
Related Articles
Recommended Articles

محتوای مقاله باید برای این نوع Contentها آماده باشد:

Paragraph
H2 / H3
Image
Quote
List
Highlight Box
Table
Link

در پایین مقاله:

Related Articles
Recommended Articles
Comments UI

چون پروژه Public است، هیچ Auth UI نمایش داده نشود.
Like / Save / Comment در این نسخه می‌توانند با Mock Data و UI اولیه کار کنند و ساختار API آنها آماده باشد.

4. Grades

Route:

/grades

نمایش پایه‌های تحصیلی:

ابتدایی
متوسطه اول
متوسطه دوم

هر Grade با Card نمایش داده شود و با کلیک کاربر به:

/magazine?grade={slug}

هدایت شود.

5. About

Route:

/about

یک صفحه ساده و تمیز برای معرفی:

«مجله آموزشی تدریسینو»

شامل:

معرفی مجله
هدف مجله
مخاطبان
ارتباط مجله با تدریسینو

Header و Footer باید به Routeهای واقعی متصل باشند.

Navigation:

خانه → /
مجله → /magazine
پایه‌های تحصیلی → /grades
درباره ما → /about

Search باید کاربر را به /magazine ببرد و Query جستجو را اعمال کند.

هیچ Navigation عادی نباید به Not Found برسد.

در Mobile:

Hamburger Menu
Logo
Search

3. API Integration

API Base URL از Environment Variable گرفته شود و داخل Componentها Hard-code نشود.

مثلاً:

VITE_API_BASE_URL=https://blog-api.tadrisino2.ir/api

Frontend API Layer به صورت جداگانه ساخته شود، مثلاً:

src/api/
  client
  magazine
  articles
  categories
  grades
  comments

# Frontend — طراحی اولیه «مجله آموزشی تدریسینو» با Figma Make ## هدف طراحی و ساخت نسخه اولیه Frontend برای «مجله آموزشی تدریسینو» با تمرکز روی تجربه کاربری ساده، تمیز، دانش‌آموزپسند و Responsive. Frontend: https://blog.tadrisino2.ir Backend API: https://blog-api.tadrisino2.ir/api/ > مهم: > بخش مجله کاملاً Public است و کاربر برای مشاهده محتوا، جستجو، فیلتر کردن یا باز کردن مقاله‌ها نیازی به Login/Register ندارد. > هیچ صفحه Login/Register و هیچ Auth Flow برای این پروژه طراحی نشود. --- # 1. صفحات اصلی در نسخه اولیه این 5 صفحه ساخته شود: ### 1. Home Route: `/` صفحه اصلی مجله شامل: - Header / Navigation - Hero section - Featured Articles - Latest Articles - Popular Articles - Recommended Articles - Categories - Grades - Footer Hero: - عنوان: «مجله آموزشی تدریسینو» - توضیح کوتاه درباره مجله - CTA: «مطالعه مطالب» - تصویر/Illustration مرتبط با دانش‌آموز، مطالعه، آموزش و تکنولوژی --- ### 2. Magazine / Articles List Route: `/magazine` امکانات: - نمایش لیست همه مقالات - Search - Filter بر اساس Category - Filter بر اساس Grade - Sort: - جدیدترین - محبوب‌ترین - منتخب - Article Cards - Pagination یا Load More - Sidebar در Desktop - فیلترها در حالت Mobile به صورت Drawer / Dropdown Article Card شامل: - تصویر - دسته‌بندی - عنوان - خلاصه - نویسنده - تاریخ انتشار - زمان مطالعه - تعداد بازدید - تعداد لایک --- ### 3. Article Detail Route: `/magazine/articles/{slug}` شامل: - Breadcrumb - عنوان مقاله - Subtitle / Excerpt - تصویر اصلی - نویسنده - تاریخ - زمان مطالعه - تعداد بازدید - تعداد لایک - محتوای کامل مقاله - Table of Contents برای مقالات طولانی - Related Articles - Recommended Articles محتوای مقاله باید برای این نوع Contentها آماده باشد: - Paragraph - H2 / H3 - Image - Quote - List - Highlight Box - Table - Link در پایین مقاله: - Related Articles - Recommended Articles - Comments UI > چون پروژه Public است، هیچ Auth UI نمایش داده نشود. > Like / Save / Comment در این نسخه می‌توانند با Mock Data و UI اولیه کار کنند و ساختار API آنها آماده باشد. --- ### 4. Grades Route: `/grades` نمایش پایه‌های تحصیلی: - ابتدایی - متوسطه اول - متوسطه دوم هر Grade با Card نمایش داده شود و با کلیک کاربر به: `/magazine?grade={slug}` هدایت شود. --- ### 5. About Route: `/about` یک صفحه ساده و تمیز برای معرفی: «مجله آموزشی تدریسینو» شامل: - معرفی مجله - هدف مجله - مخاطبان - ارتباط مجله با تدریسینو --- # 2. Navigation Header و Footer باید به Routeهای واقعی متصل باشند. Navigation: - خانه → `/` - مجله → `/magazine` - پایه‌های تحصیلی → `/grades` - درباره ما → `/about` Search باید کاربر را به `/magazine` ببرد و Query جستجو را اعمال کند. هیچ Navigation عادی نباید به Not Found برسد. در Mobile: - Hamburger Menu - Logo - Search --- # 3. API Integration API Base URL از Environment Variable گرفته شود و داخل Componentها Hard-code نشود. مثلاً: `VITE_API_BASE_URL=https://blog-api.tadrisino2.ir/api` Frontend API Layer به صورت جداگانه ساخته شود، مثلاً: ```text src/api/ client magazine articles categories grades comments

mhnmaleki was assigned by zehish

2026-10-06 01:02:28 +03:30

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: zehish/Tadrisino_magazine#1