فروشگاه آنلاین فارسی 🛍️

یک فروشگاه آنلاین کامل با React/Next.js که دارای قابلیت‌های زیر است:

✨ ویژگی‌ها

• 🔐 سیستم ورود و ثبت‌نام: احراز هویت کاربران
• 🛒 سبد خرید: افزودن، حذف و مدیریت محصولات
• ❤️ علاقه‌مندی‌ها: ذخیره محصولات مورد علاقه
• 📊 داشبورد کاربری: نمایش آمار و اطلاعات کاربر
• 🔍 جستجو و فیلتر: جستجوی محصولات بر اساس نام و دسته‌بندی
• 📱 طراحی ریسپانسیو: سازگار با موبایل و تبلت
• 🎨 طراحی مدرن: استفاده از Glassmorphism و انیمیشن‌ها
• 🌐 API واقعی: دریافت محصولات از FakeStore API

📁 ساختار پروژه

shop-project/
├── components/
│   ├── Cart.js           # کامپوننت سبد خرید
│   ├── Dashboard.js      # کامپوننت داشبورد
│   ├── Favorites.js      # کامپوننت علاقه‌مندی‌ها
│   ├── Header.js         # کامپوننت هدر و منوی اصلی
│   ├── Login.js          # کامپوننت ورود و ثبت‌نام
│   └── Products.js       # کامپوننت نمایش محصولات
├── contexts/
│   └── AppContext.js     # مدیریت State اپلیکیشن
├── styles/
│   └── globals.css       # استایل‌های کلی
├── App.js                # کامپوننت اصلی
├── package.json          # وابستگی‌های پروژه
└── README.md            # این فایل

🚀 نصب و راه‌اندازی

پیش‌نیازها

• Node.js (نسخه 16 یا بالاتر)
• npm یا yarn

مراحل نصب

1. نصب وابستگی‌ها

npm install
# یا
yarn install

2. اجرای پروژه در حالت توسعه

npm run dev
# یا
yarn dev

3. باز کردن مرورگر برو به آدرس: http://localhost:3000

🎯 نحوه استفاده

ورود به سیستم

• هر نام کاربری و رمز عبوری وارد کنید (احراز هویت ساختگی است)
• یا روی "ثبت نام کنید" کلیک کنید

مشاهده محصولات

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

افزودن به سبد خرید

• روی دکمه "افزودن" کلیک کنید
• تعداد محصولات در آیکون سبد خرید نمایش داده می‌شود

علاقه‌مندی‌ها

• روی آیکون قلب کلیک کنید تا محصول به لیست علاقه‌مندی‌ها اضافه شود

داشبورد

• آمار کلی خود را مشاهده کنید
• اطلاعات کاربری را ببینید

🛠️ فناوری‌های استفاده شده

• React 18: کتابخانه UI
• Next.js 14: فریمورک React
• Context API: مدیریت State
• Lucide React: آیکون‌ها
• FakeStore API: دریافت محصولات
• CSS Custom: استایل‌دهی مدرن
• Vazirmatn Font: فونت فارسی

📦 API مورد استفاده

این پروژه از FakeStore API برای دریافت محصولات استفاده می‌کند:

https://fakestoreapi.com/products

🎨 ویژگی‌های طراحی

• گرادینت بنفش زیبا: پس‌زمینه اصلی
• Glassmorphism: کارت‌های شیشه‌ای
• انیمیشن‌های روان: تجربه کاربری بهتر
• فونت فارسی Vazirmatn: خوانایی عالی
• طراحی مینیمال: ساده و کاربردی

📱 ریسپانسیو

پروژه کاملا ریسپانسیو است و در تمام سایزهای صفحه به خوبی کار می‌کند:

• موبایل (< 768px)
• تبلت (768px - 1024px)
• دسکتاپ (> 1024px)

🔧 سفارشی‌سازی

تغییر رنگ‌ها

رنگ‌ها را در فایل styles/globals.css تغییر دهید:

/* رنگ اصلی */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

تغییر API

برای استفاده از API دیگر، در contexts/AppContext.js:

fetch('YOUR_API_URL')

📝 یادداشت‌ها

• احراز هویت فعلی ساختگی است (برای توسعه)
• برای استفاده واقعی، باید یک backend API اضافه کنید
• State ها در Local Storage ذخیره نمی‌شوند (می‌توانید اضافه کنید)

🤝 مشارکت

برای مشارکت در این پروژه:

1. پروژه را Fork کنید
2. یک Branch جدید بسازید
3. تغییرات خود را Commit کنید
4. Pull Request ارسال کنید

📄 لایسنس

این پروژه تحت لایسنس MIT است.

💡 ایده‌های توسعه

• اضافه کردن پرداخت واقعی
• اتصال به Backend واقعی
• ذخیره‌سازی در Local Storage
• افزودن صفحه جزئیات محصول
• سیستم نظرات و امتیازدهی
• فیلترهای پیشرفته‌تر
• مقایسه محصولات
• کوپن تخفیف

---

ساخته شده با ❤️ توسط Claude