متجر منستي 💖

متجر إلكتروني أنيق وعصري لأزياء الرجال، مبني باستخدام Next.js 15 و Sanity CMS و Tailwind CSS 4.

🔗 نسخة مباشرة: mensty.vercel.app

✨ المميزات

• كتالوج المنتجات — إدارة المنتجات والأقسام والألوان والمقاسات من خلال Sanity CMS.
• صفحات المنتجات — مسارات ديناميكية (/product/[slug]) مع معرض صور واختيار المقاس واللون ووصف تفصيلي.
• سلة التسوق — سلة تعمل من جانب العميل باستخدام React Context مع درج سلة منسدل وحفظ تلقائي للحالة.
• صفحة إتمام الشراء — جمع بيانات العميل (الاسم، البريد الإلكتروني، واتساب، العنوان) وإرسال الطلب.
• إيميلات الطلبات — إرسال الطلبات عبر البريد الإلكتروني إلى صاحب المتجر باستخدام Nodemailer، مع إمكانية إرسال إيميل تأكيد للعميل.
• استوديو Sanity — استوديو Sanity مدمج لإدارة المحتوى.
• الوضع الليلي — تبديل المظهر باستخدام next-themes.
• حركات وتأثيرات — تأثيرات حركية سلسة باستخدام Framer Motion.
• تحسين محركات البحث (SEO) — بيانات وصفية وسوم Open Graph وكلمات مفتاحية لكل صفحة.
• مكونات واجهة المستخدم — مكونات متاحة للجميع مبنية على Radix UI / shadcn/ui + أيقونات Lucide.

🛠️ التقنيات المستخدمة

الطبقة

التقنية

الإطار

Next.js 15 (App Router، Turbopack)

اللغة

TypeScript

الواجهة

React 19، Tailwind CSS 4، shadcn/ui، Radix UI، أيقونات Lucide

الحركات

Framer Motion

إدارة المحتوى

Sanity (next-sanity + Sanity Studio)

البريد

Nodemailer (متوفر أيضًا Resend و Formspree)

التنبيهات

react-hot-toast

النشر

Vercel

📁 هيكل المشروع

├── app/ # Next.js App Router (الصفحات، مسارات الـ API، التخطيط)
│ ├── api/send-order/ # نقطة إرسال الطلبات (Nodemailer)
│ ├── checkout/ # صفحة إتمام الشراء
│ ├── product/[slug]/ # صفحة تفاصيل المنتج
│ ├── products/ # صفحة قائمة المنتجات
│ └── components/ # الهيدر، الفوتر، واجهة السلة، إلخ
├── components/ui/ # مكونات shadcn/ui
├── lib/ # عميل Sanity، استعلامات GROQ، أدوات مساعدة
├── sanity/ # Sanity Studio (المخططات: المنتجات، الأقسام، الألوان)
├── public/ # الملفات الثابتة
└── types.ts # أنواع TypeScript المشتركة

🚀 البدء

المتطلبات المسبقة

• Node.js 18.18 أو أحدث
• مشروع Sanity (معرّف المشروع + قاعدة البيانات)
• بيانات اعتماد SMTP لإرسال إيميلات الطلبات (مثل Gmail أو Mailgun أو SendGrid)

التثبيت

# استنساخ المستودع
git clone https://github.com/rezk20/mensty-store.git
cd mensty-store

# تثبيت الاعتماديات
npm install

متغيرات البيئة

أنشئ ملف .env.local في جذر المشروع:

# الرابط الأساسي للموقع (يُستخدم في إيميلات الطلبات)
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# إعدادات SMTP لإرسال إيميلات الطلبات
EMAIL_HOST=smtp.example.com
EMAIL_PORT=587
EMAIL_SECURE=false
EMAIL_USER=your@email.com
EMAIL_PASS=your-password
EMAIL_FROM=noreply@example.com
EMAIL_TO=shop@example.com

# اضبطها على "true" لإرسال إيميل تأكيد للعميل أيضًا
SEND_CUSTOMER_CONFIRMATION=false

معرّف مشروع Sanity (oioxmpkn) وقاعدة البيانات (production) مضبوطان حاليًا في lib/sanity.ts و sanity/sanity.config.ts. يُفضّل نقلها إلى متغيرات بيئة (NEXT_PUBLIC_SANITY_PROJECT_ID، NEXT_PUBLIC_SANITY_DATASET) كأفضل ممارسة للإنتاج.

تشغيل خادم التطوير

npm run dev

افتح http://localhost:3000 لعرض المتجر.

استوديو Sanity

شغّل الاستوديو محليًا لإدارة المنتجات والأقسام والألوان:

cd sanity
npm install
npx sanity dev

ثم افتح http://localhost:3333.

بناء نسخة الإنتاج

npm run build
npm start

📜 الأوامر المتاحة

الأمر

الوصف

npm run dev

تشغيل خادم التطوير مع Turbopack

npm run build

البناء للإنتاج

npm start

تشغيل خادم الإنتاج

npm run lint

تشغيل ESLint

🧾 مسار الطلب

1. يضيف العميل المنتجات (مع المقاس واللون) إلى السلة.
2. في صفحة الشراء، يُدخل بياناته (الاسم، البريد الإلكتروني، رقم واتساب، العنوان).
3. يُرسل الطلب إلى /api/send-order.
4. يُرسل إيميل HTML منسّق بملخص الطلب إلى صاحب المتجر.
5. اختياريًا، يُرسل إيميل تأكيد للعميل، ليتم التواصل معه عبر واتساب لإتمام الطلب.

🤝 المساهمة

المساهمات مرحّب بها! لا تتردد في فتح مشكلة (issue) أو إرسال طلب دمج (pull request).

📄 الترخيص

هذا المشروع خاص.