سیستم احراز هویت - Decamond Auth

یک سیستم احراز هویت ساده با استفاده از Next.js، TypeScript و SCSS Modules.

🎯 ویژگی‌ها

• ✅ صفحه ورود با اعتبارسنجی شماره تلفن ایران
• ✅ ریدایرکت خودکار به داشبورد پس از ورود
• ✅ صفحه داشبورد با نمایش اطلاعات کاربر
• ✅ طراحی Responsive
• ✅ استفاده از SCSS Modules با Nesting
• ✅ TypeScript برای type safety
• ✅ اعتبارسنجی شماره تلفن ایران
• ✅ ذخیره‌سازی اطلاعات در localStorage

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

• Next.js 15 (App Router)
• TypeScript
• SCSS Modules
• React 19

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

src/
├── app/
│   ├── auth/
│   │   └── page.tsx          # صفحه ورود
│   ├── dashboard/
│   │   └── page.tsx          # صفحه داشبورد
│   ├── layout.tsx            # Layout اصلی
│   ├── page.tsx              # صفحه اصلی (ریدایرکت)
│   └── globals.css           # استایل‌های عمومی
├── components/
│   ├── Button.tsx            # کامپوننت دکمه
│   └── Input.tsx             # کامپوننت ورودی
└── styles/
    ├── Auth.module.scss      # استایل‌های صفحه ورود
    └── Dashboard.module.scss # استایل‌های صفحه داشبورد

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

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

   npm install

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

   npm run dev

3. باز کردن مرورگر:

   http://localhost:3000
   

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

صفحه ورود (/auth)

• وارد کردن شماره تلفن ایران
• اعتبارسنجی شماره تلفن
• کلیک روی دکمه "ورود"
• دریافت اطلاعات تصادفی کاربر از API
• ذخیره اطلاعات و ریدایرکت به داشبورد

صفحه داشبورد (/dashboard)

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

🔧 API استفاده شده

• Random User API: https://randomuser.me/api/?results=1&nat=us
• برای دریافت اطلاعات تصادفی کاربر

📱 Responsive Design

پروژه کاملاً responsive است و در تمام دستگاه‌ها به خوبی نمایش داده می‌شود:

• موبایل (max-width: 480px)
• تبلت
• دسکتاپ

🎨 استایل‌دهی

• استفاده از SCSS Modules
• Nesting برای کلاس‌ها
• انیمیشن‌های نرم
• رنگ‌بندی مدرن
• سایه‌های زیبا

🔒 امنیت

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

📝 نکات مهم

• پروژه از RTL (Right-to-Left) برای زبان فارسی پشتیبانی می‌کند
• تمام متن‌ها به زبان فارسی هستند
• از localStorage برای ذخیره اطلاعات کاربر استفاده می‌شود
• در صورت عدم وجود اطلاعات کاربر، به صفحه ورود هدایت می‌شود

🚀 Build و Deploy

# Build پروژه
npm run build

# اجرای production
npm start

📄 لایسنس

این پروژه برای اهداف آموزشی ساخته شده است.