210 lines
5.3 KiB
Markdown
210 lines
5.3 KiB
Markdown
# 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**
|
||
|
|
|
||
|
|
## 📦 نصب
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# نصب وابستگیها
|
||
|
|
npm install
|
||
|
|
|
||
|
|
# یا با yarn
|
||
|
|
yarn install
|
||
|
|
|
||
|
|
# یا با pnpm
|
||
|
|
pnpm install
|
||
|
|
```
|
||
|
|
|
||
|
|
## ⚙️ تنظیمات
|
||
|
|
|
||
|
|
### 1. تنظیمات Supabase
|
||
|
|
|
||
|
|
یک فایل `.env` در ریشه پروژه ایجاد کنید:
|
||
|
|
|
||
|
|
```env
|
||
|
|
VITE_SUPABASE_URL=your-supabase-project-url
|
||
|
|
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. ساختار Database در Supabase
|
||
|
|
|
||
|
|
پس از راهاندازی Supabase، جداول زیر را ایجاد کنید:
|
||
|
|
|
||
|
|
#### جدول `requests`:
|
||
|
|
```sql
|
||
|
|
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`:
|
||
|
|
```sql
|
||
|
|
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` فعال کنید
|
||
|
|
|
||
|
|
## 🏃 اجرا
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# اجرای محیط توسعه
|
||
|
|
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
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|