PWA React App

یک اپلیکیشن Progressive Web App (PWA) کامل و آماده تولید با React، TypeScript، و Supabase.

🚀 ویژگی‌ها

• ✅ PWA - قابل نصب و استفاده آفلاین
• ✅ React 18 با Vite
• ✅ TypeScript برای نوع‌بندی کامل
• ✅ Tailwind CSS برای استایل‌دهی
• ✅ shadcn/ui برای کامپوننت‌های UI
• ✅ React Router برای مسیریابی
• ✅ Jotai برای مدیریت state سراسری
• ✅ Supabase برای Backend، Auth و Database
• ✅ RTL Support برای زبان فارسی
• ✅ IRANSans Font به صورت پیش‌فرض
• ✅ Dark Mode Ready

📦 نصب

# نصب وابستگی‌ها
npm install

# یا با yarn
yarn install

# یا با pnpm
pnpm install

⚙️ تنظیمات

1. تنظیمات Supabase

یک فایل .env در ریشه پروژه ایجاد کنید:

VITE_SUPABASE_URL=your-supabase-project-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

2. ساختار Database در Supabase

پس از راه‌اندازی Supabase، جداول زیر را ایجاد کنید:

جدول requests:

create table requests (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  title text not null,
  description text not null,
  status text default 'pending' check (status in ('pending', 'in_progress', 'completed')),
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable RLS
alter table requests enable row level security;

-- Policy: Users can read all requests
create policy "Anyone can view requests" on requests
  for select using (true);

-- Policy: Users can insert their own requests
create policy "Users can insert their own requests" on requests
  for insert with check (auth.uid() = user_id);

-- Policy: Users can update their own requests
create policy "Users can update their own requests" on requests
  for update using (auth.uid() = user_id);

جدول messages:

create table messages (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  content text not null,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable RLS
alter table messages enable row level security;

-- Policy: Anyone can view messages
create policy "Anyone can view messages" on messages
  for select using (true);

-- Policy: Authenticated users can insert messages
create policy "Authenticated users can insert messages" on messages
  for insert with check (auth.uid() = user_id);

فعال‌سازی Realtime:

در Supabase Dashboard:

1. به قسمت Database > Replication بروید
2. Realtime را برای جداول requests و messages فعال کنید

🏃 اجرا

# اجرای محیط توسعه
npm run dev

# ساخت نسخه production
npm run build

# پیش‌نمایش نسخه production
npm run preview

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

src/
├── assets/          # فایل‌های استاتیک
├── components/      # کامپوننت‌های React
│   └── ui/         # کامپوننت‌های shadcn/ui
├── atoms/          # Jotai atoms برای state management
├── hooks/          # Custom hooks
├── utils/          # توابع کمکی
├── services/       # سرویس‌های خارجی (Supabase)
├── pages/          # صفحات اصلی
│   ├── Main/
│   ├── Account/
│   ├── Request/
│   ├── Chat/
│   └── Auth/
│       ├── Login/
│       └── Signup/
├── styles/         # فایل‌های CSS
├── App.tsx         # کامپوننت اصلی
└── main.tsx        # نقطه ورود

🔐 احراز هویت

این اپلیکیشن از Supabase Auth پشتیبانی می‌کند:

• ورود با ایمیل/رمز عبور
• ثبت نام با ایمیل
• ورود با Google OAuth
• ورود با شماره تلفن (OTP)

🎨 کامپوننت‌های UI

از shadcn/ui استفاده شده است:

• Button
• Card
• Input
• Label
• Toast
• Avatar

📱 PWA

• Manifest برای نصب
• Service Worker برای عملکرد آفلاین
• Splash Screen
• آیکون‌های مختلف اندازه

🌐 پشتیبانی RTL

• جهت RTL به صورت پیش‌فرض
• فونت IRANSans
• زبان فارسی

📝 Scripts

• npm run dev - اجرای محیط توسعه
• npm run build - ساخت نسخه production
• npm run preview - پیش‌نمایش نسخه production
• npm run lint - بررسی کد با ESLint
• npm run format - فرمت کد با Prettier

🛠️ تکنولوژی‌ها

• React 18.2
• TypeScript 5.2
• Vite 5.0
• React Router 6.21
• Jotai 2.6
• Supabase 2.39
• Tailwind CSS 3.4
• shadcn/ui

📄 لایسنس

MIT

🤝 مشارکت

مشارکت‌ها خوش‌آمدند! لطفا ابتدا یک Issue ایجاد کنید.

---

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