diff --git a/Project Implementation Documents/00-architecture.md b/Project Implementation Documents/00-architecture.md new file mode 100644 index 0000000..12fb5f4 --- /dev/null +++ b/Project Implementation Documents/00-architecture.md @@ -0,0 +1,432 @@ +# ๐ŸŒ™ ุชุทุจูŠู‚ "ุฃุซุฑ" โ€” ุงู„ุฎุทุฉ ุงู„ู…ุนู…ุงุฑูŠุฉ ุงู„ูƒุงู…ู„ุฉ + +> ุชุทุจูŠู‚ ู…ุญุชูˆู‰ ู‚ุตูŠุฑ ู‡ุงุฏูุŒ ู…ุณุชูˆุญู‰ ู…ู† ุชุฌุฑุจุฉ TikTok ู„ูƒู† ุจู‡ุฏู ู†ุงูุน: ู…ุญุชูˆู‰ ุฏูŠู†ูŠ ูˆุชุฐูƒูŠุฑ ูŠูˆู…ูŠ ูŠุชุฑูƒ ุฃุซุฑู‹ุง ุจุฏู„ ู…ุง ูŠุณุฑู‚ ุงู„ุนู…ุฑ. + +--- + +## ๐Ÿ“Œ ุฌุฏูˆู„ ุงู„ู…ุญุชูˆูŠุงุช +1. [ู†ุตูŠุญุฉ ุงู„ู…ู†ุตุฉ](#1-ู†ุตูŠุญุฉ-ุงู„ู…ู†ุตุฉ) +2. [ุงู„ู‡ูŠูƒู„ ุงู„ุนุงู… ู„ู„ู†ุธุงู…](#2-ุงู„ู‡ูŠูƒู„-ุงู„ุนุงู…-ู„ู„ู†ุธุงู…) +3. [ุงู„ุชู‚ู†ูŠุงุช (Tech Stack)](#3-ุงู„ุชู‚ู†ูŠุงุช-tech-stack) +4. [ู‚ุงุนุฏุฉ ุงู„ุจูŠุงู†ุงุช (Database Schema)](#4-ู‚ุงุนุฏุฉ-ุงู„ุจูŠุงู†ุงุช-database-schema) +5. [ุงู„ู€ APIs ูˆุงู„ุชูƒุงู…ู„ุงุช](#5-ุงู„ู€-apis-ูˆุงู„ุชูƒุงู…ู„ุงุช) +6. [ุดุงุดุงุช ุงู„ุชุทุจูŠู‚ (User Flow)](#6-ุดุงุดุงุช-ุงู„ุชุทุจูŠู‚-user-flow) +7. [ู†ุธุงู… ุงู„ุฅุฏุงุฑุฉ (Admin Panel)](#7-ู†ุธุงู…-ุงู„ุฅุฏุงุฑุฉ-admin-panel) +8. [ุงู„ุฌูˆุงู†ุจ ุงู„ู‚ุงู†ูˆู†ูŠุฉ ู…ุน YouTube](#8-ุงู„ุฌูˆุงู†ุจ-ุงู„ู‚ุงู†ูˆู†ูŠุฉ-ู…ุน-youtube) +9. [ุฎุทุฉ ุงู„ุชู†ููŠุฐ ุงู„ู…ุฑุญู„ูŠุฉ](#9-ุฎุทุฉ-ุงู„ุชู†ููŠุฐ-ุงู„ู…ุฑุญู„ูŠุฉ) +10. [ุงู„ุชูƒู„ูุฉ ุงู„ุชู‚ุฏูŠุฑูŠุฉ](#10-ุงู„ุชูƒู„ูุฉ-ุงู„ุชู‚ุฏูŠุฑูŠุฉ) + +--- + +## 1. ู†ุตูŠุญุฉ ุงู„ู…ู†ุตุฉ + +**ุงุจุฏุฃ ุจู€ Web App ุฃูˆู„ุงู‹ (PWA)** ุซู… ุงู†ุชู‚ู„ ู„ู„ู…ูˆุจุงูŠู„. ุงู„ุฃุณุจุงุจ: + +| ุงู„ุณุจุจ | ุงู„ุชูุตูŠู„ | +|------|---------| +| ๐Ÿš€ ุณุฑุนุฉ ุงู„ุฅุทู„ุงู‚ | ุชุจู†ูŠ ู†ุณุฎุฉ ูˆุงุญุฏุฉ ูˆุชุฌุฑุจู‡ุง ู…ุน ู…ุณุชุฎุฏู…ูŠู† ุญู‚ูŠู‚ูŠูŠู† ุฎู„ุงู„ ุฃุณุงุจูŠุน | +| ๐Ÿ’ฐ ุชูˆููŠุฑ ุงู„ุชูƒู„ูุฉ | ู…ููŠุด ุฑุณูˆู… Apple Developer ($99/ุณู†ุฉ) ูˆู„ุง Google Play ($25 ู…ุฑุฉ ูˆุงุญุฏุฉ) ููŠ ุงู„ุจุฏุงูŠุฉ | +| ๐Ÿ›ก๏ธ ุชุฌู†ุจ ุงู„ุฑูุถ | ู…ุชุงุฌุฑ ุงู„ุชุทุจูŠู‚ุงุช ุตุงุฑู…ุฉ ุฌุฏู‹ุง ู…ุน ุงู„ุชุทุจูŠู‚ุงุช ุงู„ู„ูŠ ู…ุญุชูˆุงู‡ุง ู…ู† YouTube | +| ๐Ÿ“ฑ PWA ู‚ูˆูŠ | ุงู„ู…ุณุชุฎุฏู… ูŠู‚ุฏุฑ "ูŠุซุจุช" ุงู„ู…ูˆู‚ุน ุนู„ู‰ ุดุงุดุชู‡ ุฒูŠ ุงู„ุชุทุจูŠู‚ ุงู„ุนุงุฏูŠ | +| ๐Ÿ”„ ุชุญุฏูŠุซุงุช ููˆุฑูŠุฉ | ู…ุชุญุชุงุฌุด ุชู†ุชุธุฑ ู…ูˆุงูู‚ุฉ ุงู„ู…ุชุฌุฑ ุนู„ู‰ ูƒู„ ุชุญุฏูŠุซ | + +**ุจุนุฏ ู…ุง ุชุซุจุช ุงู„ููƒุฑุฉ ูˆุชุฌู…ุน 1000+ ู…ุณุชุฎุฏู… ู†ุดุท**ุŒ ู†ุนู…ู„ ู†ุณุฎุฉ React Native ู„ู„ู…ูˆุจุงูŠู„ (ู†ูุณ ุงู„ูƒูˆุฏ ูŠุดุชุบู„ Android + iOS). + +--- + +## 2. ุงู„ู‡ูŠูƒู„ ุงู„ุนุงู… ู„ู„ู†ุธุงู… + +``` +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ ๐Ÿ‘ค ุงู„ู…ุณุชุฎุฏู… (Browser/App) โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ Frontend (Next.js) โ”‚ + โ”‚ โ€ข Feed ุนู…ูˆุฏูŠ swipe โ”‚ + โ”‚ โ€ข YouTube IFrame Playerโ”‚ + โ”‚ โ€ข ุฃุฒุฑุงุฑ ุชูุงุนู„ โ”‚ + โ”‚ โ€ข ุฃุฐูƒุงุฑ / ู…ูˆุงู‚ูŠุช ุตู„ุงุฉ โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ”‚ + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ โ”‚ โ”‚ +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ Supabase โ”‚ โ”‚ YouTube APIs โ”‚ โ”‚ External APIsโ”‚ +โ”‚ (Backend) โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ +โ”‚ โ”‚ โ”‚ โ€ข IFrame โ”‚ โ”‚ โ€ข Aladhan โ”‚ +โ”‚ โ€ข PostgreSQL โ”‚ โ”‚ โ€ข Data API v3โ”‚ โ”‚ (ู…ูˆุงู‚ูŠุช) โ”‚ +โ”‚ โ€ข Auth โ”‚ โ”‚ โ”‚ โ”‚ โ€ข ุฃุฐูƒุงุฑ JSON โ”‚ +โ”‚ โ€ข Storage โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ +โ”‚ โ€ข Realtime โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ–ฒ + โ”‚ +โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” +โ”‚ Admin Panel โ”‚ โ† ุฅู†ุช/ุงู„ู…ุดุฑููŠู† ุชุฎุชุงุฑูˆุง ุงู„ููŠุฏูŠูˆู‡ุงุช +โ”‚ (Next.js) โ”‚ +โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ +``` + +--- + +## 3. ุงู„ุชู‚ู†ูŠุงุช (Tech Stack) + +### ุงู„ูˆุงุฌู‡ุฉ ุงู„ุฃู…ุงู…ูŠุฉ (Frontend) +- **Next.js 14** (React + SSR) โ€” ูŠุฏุนู… PWA ุจุณู‡ูˆู„ุฉ +- **TailwindCSS** โ€” ุชุตู…ูŠู… ุณุฑูŠุน ูˆู…ุฑูŠุญ +- **Framer Motion** โ€” ุงู†ุชู‚ุงู„ุงุช ุณู„ุณุฉ ุจูŠู† ุงู„ููŠุฏูŠูˆู‡ุงุช (swipe up/down) +- **react-youtube** โ€” ู…ูƒุชุจุฉ ุฌุงู‡ุฒุฉ ู„ุชุถู…ูŠู† IFrame Player + +### ุงู„ุฎุงุฏู… (Backend) โ€” ูƒู„ู‡ ููŠ Supabase +- **PostgreSQL** โ€” ู‚ุงุนุฏุฉ ุจูŠุงู†ุงุช ู‚ูˆูŠุฉ +- **Supabase Auth** โ€” ุชุณุฌูŠู„ ุฏุฎูˆู„ (Google, Email, Anonymous) +- **Row Level Security (RLS)** โ€” ุฃู…ุงู† ุนู„ู‰ ู…ุณุชูˆู‰ ุงู„ุตู +- **Edge Functions** โ€” ู„ูˆ ู…ุญุชุงุฌ ู…ู†ุทู‚ ุณูŠุฑูุฑ ู…ุฎุตุต +- **Realtime** โ€” ุงู„ุชุนู„ูŠู‚ุงุช ุชุธู‡ุฑ ููˆุฑู‹ุง + +### ุฎุฏู…ุงุช ุฎุงุฑุฌูŠุฉ +- **YouTube IFrame Player API** โ€” ู„ุชุดุบูŠู„ ุงู„ููŠุฏูŠูˆู‡ุงุช (ู…ุฌุงู†ูŠุŒ ุจุฏูˆู† ุญุฏูˆุฏ) +- **YouTube Data API v3** โ€” ู„ุฌู„ุจ ุจูŠุงู†ุงุช ุงู„ููŠุฏูŠูˆ ุชู„ู‚ุงุฆูŠู‹ุง (10k ุทู„ุจ/ูŠูˆู… ู…ุฌุงู†ู‹ุง) +- **Aladhan API** โ€” ู…ูˆุงู‚ูŠุช ุงู„ุตู„ุงุฉ (ู…ุฌุงู†ูŠ) +- **Vercel** โ€” ุงุณุชุถุงูุฉ ุงู„ู€ Frontend (ู…ุฌุงู†ูŠ ู„ู„ุจุฏุงูŠุฉ) + +### ุฃุฏูˆุงุช ุฅุถุงููŠุฉ +- **OneSignal** โ€” Push notifications ู…ุฌุงู†ูŠุฉ (ู„ู„ุชุฐูƒูŠุฑ ุงู„ูŠูˆู…ูŠ) +- **PostHog / Plausible** โ€” ุชุญู„ูŠู„ุงุช ุชุญุชุฑู… ุงู„ุฎุตูˆุตูŠุฉ + +--- + +## 4. ู‚ุงุนุฏุฉ ุงู„ุจูŠุงู†ุงุช (Database Schema) + +```sql +-- ๐Ÿ‘ค ุฌุฏูˆู„ ุงู„ู…ุณุชุฎุฏู…ูŠู† (ู…ุฏุงุฑ ู…ู† Supabase Auth) +users ( + id uuid PRIMARY KEY, + email text, + display_name text, + avatar_url text, + created_at timestamp, + -- ุฅุนุฏุงุฏุงุช ุดุฎุตูŠุฉ + daily_goal_minutes int DEFAULT 10, + notification_time time, + city text -- ู„ู…ูˆุงู‚ูŠุช ุงู„ุตู„ุงุฉ +) + +-- ๐ŸŽฅ ุฌุฏูˆู„ ุงู„ููŠุฏูŠูˆู‡ุงุช (ุฅู†ุช ุชุถูŠูู‡ุง ูŠุฏูˆูŠู‹ุง ุฃูˆ ู…ู† Admin Panel) +videos ( + id uuid PRIMARY KEY, + youtube_id text UNIQUE NOT NULL, -- ู…ุซู„ุงู‹: dQw4w9WgXcQ + title text, + description text, + duration_seconds int, + channel_name text, + channel_id text, + thumbnail_url text, + category text, -- 'ู‚ุฑุขู†' / 'ุญุฏูŠุซ' / 'ุณูŠุฑุฉ' / 'ุชุฒูƒูŠุฉ' + tags text[], + scholar_name text, -- ุงุณู… ุงู„ุดูŠุฎ/ุงู„ุฏุงุนูŠุฉ + is_approved boolean DEFAULT false, -- ุงู„ู…ุดุฑู ูŠูˆุงูู‚ ู‚ุจู„ ุงู„ู†ุดุฑ + added_by uuid REFERENCES users(id), + created_at timestamp, + -- ุฅุญุตุงุฆูŠุงุช ุฏุงุฎู„ูŠุฉ (ู…ุด ู…ู† ูŠูˆุชูŠูˆุจ) + views_count int DEFAULT 0, + likes_count int DEFAULT 0, + saves_count int DEFAULT 0 +) + +-- โค๏ธ ุฅุนุฌุงุจุงุช (ู…ุญู„ูŠุฉ ููŠ ุชุทุจูŠู‚ูƒ) +likes ( + user_id uuid REFERENCES users(id), + video_id uuid REFERENCES videos(id), + created_at timestamp, + PRIMARY KEY (user_id, video_id) +) + +-- ๐Ÿ”– ู…ุญููˆุธุงุช +saves ( + user_id uuid REFERENCES users(id), + video_id uuid REFERENCES videos(id), + collection text DEFAULT 'default', -- ู…ุฌู…ูˆุนุงุช: 'ู„ู„ู…ุฑุงุฌุนุฉ' / 'ู…ูุถู„ุฉ' + created_at timestamp, + PRIMARY KEY (user_id, video_id) +) + +-- ๐Ÿ’ฌ ุชุนู„ูŠู‚ุงุช (ู…ุญู„ูŠุฉ ููŠ ุชุทุจูŠู‚ูƒ) +comments ( + id uuid PRIMARY KEY, + user_id uuid REFERENCES users(id), + video_id uuid REFERENCES videos(id), + content text, + parent_id uuid REFERENCES comments(id), -- ู„ู„ุฑุฏูˆุฏ + is_hidden boolean DEFAULT false, -- ู„ู„ุฅุดุฑุงู + created_at timestamp +) + +-- ๐Ÿ“Š ุณุฌู„ ุงู„ู…ุดุงู‡ุฏุงุช (ู„ู…ุนุฑูุฉ ุงู„ููŠุฏูŠูˆู‡ุงุช ุงู„ู„ูŠ ุดุงูู‡ุง ุงู„ู…ุณุชุฎุฏู…) +watch_history ( + user_id uuid REFERENCES users(id), + video_id uuid REFERENCES videos(id), + watched_seconds int, + completed boolean, + watched_at timestamp, + PRIMARY KEY (user_id, video_id, watched_at) +) + +-- ๐Ÿ“ฟ ุงู„ุฃุฐูƒุงุฑ ุงู„ูŠูˆู…ูŠุฉ +daily_remembrance ( + id uuid PRIMARY KEY, + category text, -- 'ุตุจุงุญ' / 'ู…ุณุงุก' / 'ู†ูˆู…' / 'ุงุณุชูŠู‚ุงุธ' + arabic text, + translit text, + meaning text, + source text, + count int DEFAULT 1 +) + +-- ๐ŸŽฏ ุงู„ุฑุญู„ุงุช ุงู„ุชุนู„ูŠู…ูŠุฉ (Playlists ู…ู†ุธู…ุฉ) +journeys ( + id uuid PRIMARY KEY, + title text, -- "ุฑุญู„ุฉ ููŠ ุงู„ุณูŠุฑุฉ ุงู„ู†ุจูˆูŠุฉ" + description text, + cover_url text, + video_ids uuid[], -- ู…ุฑุชุจุฉ ุจุงู„ุชุฑุชูŠุจ + difficulty text, -- 'ู…ุจุชุฏุฆ' / 'ู…ุชูˆุณุท' / 'ู…ุชู‚ุฏู…' + estimated_minutes int +) + +-- ๐Ÿ“ˆ ุชุชุจุน ุชู‚ุฏู… ุงู„ุฑุญู„ุงุช +journey_progress ( + user_id uuid REFERENCES users(id), + journey_id uuid REFERENCES journeys(id), + completed_video_ids uuid[], + started_at timestamp, + completed_at timestamp, + PRIMARY KEY (user_id, journey_id) +) +``` + +--- + +## 5. ุงู„ู€ APIs ูˆุงู„ุชูƒุงู…ู„ุงุช + +### ๐ŸŽฅ YouTube IFrame Player API (ุงู„ุฃู‡ู…) + +**ุฏู‡ ุงู„ู„ูŠ ุจูŠุนุฑุถ ุงู„ููŠุฏูŠูˆ ุฌูˆู‡ ุชุทุจูŠู‚ูƒ.** + +```javascript +// ู…ุซุงู„ ุจุณูŠุท: ุนุฑุถ ููŠุฏูŠูˆ ูŠูˆุชูŠูˆุจ ุจุดูƒู„ ุนู…ูˆุฏูŠ +import YouTube from 'react-youtube'; + +function VideoPlayer({ youtubeId, onEnd }) { + const opts = { + height: '100%', + width: '100%', + playerVars: { + autoplay: 1, + controls: 0, // ุฅุฎูุงุก ุฃุฒุฑุงุฑ ูŠูˆุชูŠูˆุจ + modestbranding: 1, // ุชู‚ู„ูŠู„ ุนู„ุงู…ุฉ ูŠูˆุชูŠูˆุจ + rel: 0, // ุนุฏู… ุงู‚ุชุฑุงุญ ููŠุฏูŠูˆู‡ุงุช ุฃุฎุฑู‰ + playsinline: 1, + }, + }; + + return ( + + ); +} +``` + +**ู…ู„ุงุญุธุงุช ู…ู‡ู…ุฉ:** +- โœ… ู…ุฌุงู†ูŠ ุชู…ุงู…ู‹ุงุŒ ุจุฏูˆู† ุญุฏ ุทู„ุจุงุช +- โœ… ุงู„ู…ุดุงู‡ุฏุงุช ุชุชุญุณุจ ู„ุตุงุญุจ ุงู„ููŠุฏูŠูˆ (ุนุฏู„) +- โš ๏ธ ู„ุงุฒู… ูŠุธู‡ุฑ ุฒุฑ "YouTube" ุตุบูŠุฑ (ุดุฑุท ู…ู† ุฌูˆุฌู„) +- โš ๏ธ ู…ุง ุชู‚ุฏุฑุด ุชุฎููŠ ุงู„ุฅุนู„ุงู†ุงุช ู„ูˆ ุงู„ููŠุฏูŠูˆ ููŠู‡ ุฅุนู„ุงู†ุงุช + +### ๐Ÿ“Š YouTube Data API v3 (ุงุฎุชูŠุงุฑูŠ ู„ูƒู† ู…ููŠุฏ) + +ู„ุฌู„ุจ ุจูŠุงู†ุงุช ุงู„ููŠุฏูŠูˆ ุชู„ู‚ุงุฆูŠู‹ุง (ู„ู…ุง ุชุถูŠู ููŠุฏูŠูˆ ุฌุฏูŠุฏ): +``` +GET https://www.googleapis.com/youtube/v3/videos + ?part=snippet,contentDetails,statistics + &id=VIDEO_ID + &key=YOUR_API_KEY +``` + +### ๐Ÿ•Œ Aladhan API โ€” ู…ูˆุงู‚ูŠุช ุงู„ุตู„ุงุฉ +``` +GET https://api.aladhan.com/v1/timingsByCity + ?city=Cairo&country=Egypt&method=5 +``` + +### ๐Ÿ”” OneSignal โ€” ุฅุดุนุงุฑุงุช +- ุฅุดุนุงุฑ ูŠูˆู…ูŠ: "ูˆู‚ุช ุฃุฐูƒุงุฑ ุงู„ุตุจุงุญ ๐ŸŒ…" +- ุฅุดุนุงุฑ ู‚ุจู„ ุงู„ุตู„ุงุฉ ุจู€ 10 ุฏู‚ุงุฆู‚ +- ุฅุดุนุงุฑ ู„ู„ููŠุฏูŠูˆ ุงู„ุฃุณุจูˆุนูŠ ุงู„ุฌุฏูŠุฏ + +--- + +## 6. ุดุงุดุงุช ุงู„ุชุทุจูŠู‚ (User Flow) + +``` +1. ๐Ÿšช ุดุงุดุฉ ุงู„ุชุฑุญูŠุจ + โ†“ +2. ๐Ÿ” ุชุณุฌูŠู„ ุฏุฎูˆู„ (Google / Email / Skip ูƒุถูŠู) + โ†“ +3. ๐ŸŽฏ ุงุฎุชูŠุงุฑ ุงู„ุงู‡ุชู…ุงู…ุงุช (ู‚ุฑุขู† / ุชุฒูƒูŠุฉ / ุณูŠุฑุฉ / ูู‚ู‡...) + โ†“ +4. ๐Ÿ  ุงู„ุดุงุดุฉ ุงู„ุฑุฆูŠุณูŠุฉ โ€” Vertical Feed + โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + โ”‚ โ”‚ + โ”‚ ๐ŸŽฅ ููŠุฏูŠูˆ ูŠู„ุนุจ โ”‚ + โ”‚ ุชู„ู‚ุงุฆูŠู‹ุง โ”‚ + โ”‚ โ”‚ + โ”‚ [ุงุณู… ุงู„ุดูŠุฎ] โค๏ธ 245 โ”‚ + โ”‚ [ุงู„ุนู†ูˆุงู†] ๐Ÿ’ฌ 12 โ”‚ + โ”‚ [#ุชุฒูƒูŠุฉ] ๐Ÿ”– โ”‚ + โ”‚ ๐Ÿ“ค โ”‚ + โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + โ†‘ swipe up = ุงู„ุชุงู„ูŠ + โ†“ swipe down = ุงู„ุณุงุจู‚ + โ†“ +5. ๐Ÿ“ฟ ุชุจูˆูŠุจุงุช ุณูู„ูŠุฉ: + [๐Ÿ  ุงู„ุฑุฆูŠุณูŠุฉ] [๐Ÿ›ค๏ธ ุฑุญู„ุงุช] [๐Ÿ“ฟ ุฃุฐูƒุงุฑ] [๐Ÿ”– ู…ุญููˆุธุงุชูŠ] [๐Ÿ‘ค ู…ู„ููŠ] +``` + +### ุงู„ุดุงุดุงุช ุงู„ุชูุตูŠู„ูŠุฉ: + +| ุงู„ุดุงุดุฉ | ุงู„ูˆุตู | +|--------|------| +| ๐Ÿ  **Feed ุงู„ุฑุฆูŠุณูŠ** | ููŠุฏูŠูˆู‡ุงุช ุนู…ูˆุฏูŠุฉุŒ swipe ู„ู„ุชู†ู‚ู„ุŒ autoplay | +| ๐Ÿ›ค๏ธ **ุงู„ุฑุญู„ุงุช** | ุณู„ุงุณู„ ู…ู†ุธู…ุฉ (ู…ุซุงู„: "10 ุฃูŠุงู… ููŠ ุฑูŠุงุถ ุงู„ุตุงู„ุญูŠู†") | +| ๐Ÿ“ฟ **ุงู„ุฃุฐูƒุงุฑ** | ุฃุฐูƒุงุฑ ุงู„ุตุจุงุญ/ุงู„ู…ุณุงุก ุจุดูƒู„ ุชูุงุนู„ูŠ ู…ุน ุนุฏุงุฏ | +| ๐Ÿ•Œ **ู…ูˆุงู‚ูŠุช ุงู„ุตู„ุงุฉ** | ุญุณุจ ู…ูˆู‚ุน ุงู„ู…ุณุชุฎุฏู… + ุชุฐูƒูŠุฑุงุช | +| ๐Ÿ”– **ู…ุญููˆุธุงุชูŠ** | ุงู„ููŠุฏูŠูˆู‡ุงุช ุงู„ู„ูŠ ุญูุธู‡ุง ุงู„ู…ุณุชุฎุฏู… | +| ๐Ÿ‘ค **ู…ู„ููŠ ุงู„ุดุฎุตูŠ** | ุฅุญุตุงุฆูŠุงุช ูˆู‚ุช ุงู„ู…ุดุงู‡ุฏุฉุŒ ุงู„ุฑุญู„ุงุช ุงู„ู…ูƒุชู…ู„ุฉุŒ ุฅุนุฏุงุฏุงุช | +| โš™๏ธ **ุงู„ุฅุนุฏุงุฏุงุช** | ุงู„ูˆุถุน ุงู„ู…ุฑูŠุญ ู„ู„ุนูŠู†ุŒ ุญุฏ ูŠูˆู…ูŠ ู„ู„ู…ุดุงู‡ุฏุฉุŒ ุฅุดุนุงุฑุงุช | + +### ๐ŸŒ™ ู…ูŠุฒุงุช "ุถุฏ ุงู„ุฅุฏู…ุงู†" (ู…ู‡ู…ุฉ ุฌุฏู‹ุง) +- **ุญุฏ ูŠูˆู…ูŠ**: ุงู„ู…ุณุชุฎุฏู… ูŠุญุฏุฏ 10/20/30 ุฏู‚ูŠู‚ุฉุŒ ุงู„ุชุทุจูŠู‚ ูŠู‚ูู„ ุจุนุฏู‡ุง +- **ุฑุณุงู„ุฉ ุจุนุฏ ูƒู„ 5 ููŠุฏูŠูˆู‡ุงุช**: "ุฎุฏ ู†ูุณุŒ ุงุดุฑุจ ู…ูŠุงู‡ุŒ ุตู„ูู‘ ุนู„ู‰ ุงู„ู†ุจูŠ ๏ทบ" +- **ุจุฏูˆู† ุนุฏุงุฏ ู…ุชุงุจุนูŠู†/ู„ุงูŠูƒุงุช ู…ุจุงู„ุบ ููŠู‡**: ุนู„ุดุงู† ู…ููŠุด "ุณุจุงู‚ ุดู‡ุฑุฉ" +- **ุจุฏูˆู† scroll ู„ุง ู†ู‡ุงุฆูŠ ู„ูŠู„ู‹ุง**: ุจุนุฏ ุงู„ู€ 11ู… ูŠุธู‡ุฑ ุชุฐูƒูŠุฑ ุจุงู„ู†ูˆู… + +--- + +## 7. ู†ุธุงู… ุงู„ุฅุฏุงุฑุฉ (Admin Panel) + +ู„ูˆุญุฉ ุจุณูŠุทุฉ ุนุดุงู† ุฅู†ุช (ุฃูˆ ูุฑูŠู‚ูƒ) ุชุถูŠููˆุง/ุชุฑุงุฌุนูˆุง ุงู„ู…ุญุชูˆู‰: + +### ุงู„ุตูุญุงุช: +1. **โž• ุฅุถุงูุฉ ููŠุฏูŠูˆ** โ€” ู„ุตู‚ ุฑุงุจุท ูŠูˆุชูŠูˆุจุŒ ุงู„ุจูŠุงู†ุงุช ุชุชุฌู„ุจ ุชู„ู‚ุงุฆูŠู‹ุงุŒ ุชุฎุชุงุฑ ุงู„ุชุตู†ูŠูุŒ ูˆุงูู‚ +2. **๐Ÿ“‹ ู‚ุงุฆู…ุฉ ุงู„ููŠุฏูŠูˆู‡ุงุช** โ€” ุจุญุซุŒ ูู„ุชุฑุฉุŒ ุญุฐูุŒ ุชุนุฏูŠู„ +3. **๐Ÿ›ค๏ธ ุฅุฏุงุฑุฉ ุงู„ุฑุญู„ุงุช** โ€” ุฅู†ุดุงุก ุณู„ุงุณู„ ู…ู† ููŠุฏูŠูˆู‡ุงุช ู…ูˆุฌูˆุฏุฉ +4. **๐Ÿ’ฌ ุฅุดุฑุงู ุงู„ุชุนู„ูŠู‚ุงุช** โ€” ู…ุฑุงุฌุนุฉ ูˆุฅุฎูุงุก ุงู„ุชุนู„ูŠู‚ุงุช ุบูŠุฑ ุงู„ู…ู†ุงุณุจุฉ +5. **๐Ÿ‘ฅ ุงู„ู…ุณุชุฎุฏู…ูˆู†** โ€” ุฅุญุตุงุฆูŠุงุชุŒ ุญุธุฑ ุฅุฐุง ู„ุฒู… +6. **๐Ÿ“Š ู„ูˆุญุฉ ุงู„ุชุญู„ูŠู„ุงุช** โ€” ุงู„ููŠุฏูŠูˆู‡ุงุช ุงู„ุฃูƒุซุฑ ู…ุดุงู‡ุฏุฉุŒ ุฃูˆู‚ุงุช ุงู„ุฐุฑูˆุฉุŒ ุฅู„ุฎ + +--- + +## 8. ุงู„ุฌูˆุงู†ุจ ุงู„ู‚ุงู†ูˆู†ูŠุฉ ู…ุน YouTube + +### โœ… ู…ุง ู‡ูˆ ู…ุณู…ูˆุญ (ุดุฑูˆุท ุงู„ุฎุฏู…ุฉ): +- ุงุณุชุฎุฏุงู… **IFrame Player API** ู„ุชุถู…ูŠู† ุงู„ููŠุฏูŠูˆู‡ุงุช +- ุจู†ุงุก ูˆุงุฌู‡ุฉ ู…ุฎุตุตุฉ ุญูˆู„ ุงู„ู…ูุดุบู‘ู„ +- ุฌู…ุน ุฅุนุฌุงุจุงุช/ุชุนู„ูŠู‚ุงุช ุนู„ู‰ ุชุทุจูŠู‚ูƒ (ู…ู†ูุตู„ุฉ ุนู† ูŠูˆุชูŠูˆุจ) +- ุงู‚ุชุฑุงุญ ููŠุฏูŠูˆู‡ุงุช ู„ู„ู…ุณุชุฎุฏู…ูŠู† + +### โŒ ู…ุง ู‡ูˆ ู…ู…ู†ูˆุน: +- ุชุญู…ูŠู„ ุงู„ููŠุฏูŠูˆ ูˆุฅุนุงุฏุฉ ุงุณุชุถุงูุชู‡ +- ุฅุฎูุงุก ุนู„ุงู…ุฉ ูŠูˆุชูŠูˆุจ ุชู…ุงู…ู‹ุง +- ุชุนุทูŠู„ ุงู„ุฅุนู„ุงู†ุงุช +- ุงุณุชุฎุฏุงู… ุทุฑู‚ ุบูŠุฑ ุฑุณู…ูŠุฉ (yt-dlp, scraping) + +### ๐Ÿ“‹ ุดุฑูˆุท ู„ุงุฒู… ุชู„ุชุฒู… ุจูŠู‡ุง: +1. **ุงุฑุจุท ุจู€ ToS ูˆ Privacy** ุงู„ุฎุงุตูŠู† ุจูŠูˆุชูŠูˆุจ +2. **ุฎู„ูŠ ุฒุฑ "Watch on YouTube" ุธุงู‡ุฑ** +3. **ู…ุชุบูŠุฑุด/ู…ุชุนุฏู„ุด ุงู„ููŠุฏูŠูˆ ู†ูุณู‡** +4. **ุงุญุชุฑู… ุญู‚ูˆู‚ ุงู„ู†ุงุดุฑูŠู†** (ู„ูˆ ู†ุงุดุฑ ุทู„ุจ ุฅุฒุงู„ุฉ ููŠุฏูŠูˆู‡ุŒ ุดูŠู„ู‡) + +๐Ÿ“– ุงู„ู…ุฑุฌุน ุงู„ุฑุณู…ูŠ: [YouTube API Services Terms of Service](https://developers.google.com/youtube/terms/api-services-terms-of-service) + +--- + +## 9. ุฎุทุฉ ุงู„ุชู†ููŠุฐ ุงู„ู…ุฑุญู„ูŠุฉ + +### ๐Ÿฅ‡ ุงู„ู…ุฑุญู„ุฉ 1 โ€” MVP (4-6 ุฃุณุงุจูŠุน) +- [ ] ุฅุนุฏุงุฏ Next.js + Supabase + Tailwind +- [ ] ุชุตู…ูŠู… ุดุงุดุฉ ุงู„ููŠุฏูŠูˆ ุงู„ุนู…ูˆุฏูŠ ู…ุน swipe +- [ ] ุชูƒุงู…ู„ YouTube IFrame +- [ ] ุชุณุฌูŠู„ ุฏุฎูˆู„ (Google + Anonymous) +- [ ] ุฅุนุฌุงุจ + ุญูุธ +- [ ] Admin Panel ุจุณูŠุท ู„ุฅุถุงูุฉ 30-50 ููŠุฏูŠูˆ ู…ุฎุชุงุฑ ุจุนู†ุงูŠุฉ +- [ ] ู†ุดุฑ ูƒู€ PWA ุนู„ู‰ Vercel + +### ๐Ÿฅˆ ุงู„ู…ุฑุญู„ุฉ 2 โ€” ุชูุนูŠู„ ุงู„ู…ุฌุชู…ุน (4 ุฃุณุงุจูŠุน) +- [ ] ุงู„ุชุนู„ูŠู‚ุงุช + ุงู„ุฑุฏูˆุฏ +- [ ] ุงู„ุฅุดุนุงุฑุงุช (OneSignal) +- [ ] ุฃุฐูƒุงุฑ ุงู„ุตุจุงุญ/ุงู„ู…ุณุงุก +- [ ] ู…ูˆุงู‚ูŠุช ุงู„ุตู„ุงุฉ +- [ ] ุญุฏ ูŠูˆู…ูŠ ู„ู„ู…ุดุงู‡ุฏุฉ + ุฑุณุงุฆู„ ุงู„ุชุฐูƒูŠุฑ + +### ๐Ÿฅ‰ ุงู„ู…ุฑุญู„ุฉ 3 โ€” ุงู„ุฑุญู„ุงุช ูˆุงู„ู†ู…ูˆ (6 ุฃุณุงุจูŠุน) +- [ ] ู†ุธุงู… ุงู„ุฑุญู„ุงุช (Journeys) +- [ ] ุชุชุจุน ุงู„ุชู‚ุฏู… ูˆุงู„ุดุงุฑุงุช +- [ ] ู…ุดุงุฑูƒุฉ ุงู„ููŠุฏูŠูˆู‡ุงุช ุนู„ู‰ ูˆุงุชุณุงุจ/ุชูˆูŠุชุฑ +- [ ] ุชุญุณูŠู† ุฎูˆุงุฑุฒู…ูŠุฉ ุงู„ุงู‚ุชุฑุงุญุงุช + +### ๐Ÿ† ุงู„ู…ุฑุญู„ุฉ 4 โ€” ุชุทุจูŠู‚ุงุช ุงู„ู…ูˆุจุงูŠู„ (8 ุฃุณุงุจูŠุน) +- [ ] React Native (ู†ูุณ ุงู„ู€ Backend) +- [ ] ู†ุดุฑ ุนู„ู‰ Google Play +- [ ] ู†ุดุฑ ุนู„ู‰ App Store +- [ ] Deep Linking + +--- + +## 10. ุงู„ุชูƒู„ูุฉ ุงู„ุชู‚ุฏูŠุฑูŠุฉ + +### ููŠ ุงู„ุจุฏุงูŠุฉ (ุฃูˆู„ 1000 ู…ุณุชุฎุฏู…) โ€” **ู…ุฌุงู†ูŠ ุชู‚ุฑูŠุจู‹ุง** ๐ŸŽ‰ +| ุงู„ุฎุฏู…ุฉ | ุงู„ุชูƒู„ูุฉ | +|--------|---------| +| Vercel (Hosting) | $0 | +| Supabase (Free tier) | $0 | +| YouTube APIs | $0 | +| Aladhan API | $0 | +| OneSignal | $0 | +| Domain (.com) | ~$12/ุณู†ุฉ | +| **ุงู„ุฅุฌู…ุงู„ูŠ** | **~$1/ุดู‡ุฑ** | + +### ุจุนุฏ ุงู„ู†ู…ูˆ (10,000+ ู…ุณุชุฎุฏู… ู†ุดุท) +| ุงู„ุฎุฏู…ุฉ | ุงู„ุชูƒู„ูุฉ | +|--------|---------| +| Vercel Pro | $20/ุดู‡ุฑ | +| Supabase Pro | $25/ุดู‡ุฑ | +| OneSignal Growth | $9/ุดู‡ุฑ | +| **ุงู„ุฅุฌู…ุงู„ูŠ** | **~$54/ุดู‡ุฑ** | + +### ู„ูˆ ุญุจูŠุช ุชุทุจูŠู‚ุงุช ู…ูˆุจุงูŠู„: +- Apple Developer: $99/ุณู†ุฉ +- Google Play: $25 (ู…ุฑุฉ ูˆุงุญุฏุฉ) + +--- + +## ๐ŸŒŸ ุฎู„ุงุตุฉ + +ุฅู†ุช ู…ุนุงูƒ ููƒุฑุฉ ู‚ูˆูŠุฉุŒ ูˆุงู„ุชู†ููŠุฐ ุงู„ุชู‚ู†ูŠ ููŠู‡ุง **ู…ู…ูƒู† ุฌุฏู‹ุง** ูˆู…ุด ู…ุนู‚ุฏ. ุงู„ุฃู‡ู… ู…ู† ุงู„ูƒูˆุฏ ู‡ูˆ: + +1. **ุงุฎุชูŠุงุฑ ุงู„ู…ุญุชูˆู‰ ุจุนู†ุงูŠุฉ** โ€” ุฃู†ุช ุฃูˆ ู„ุฌู†ุฉ ุดุฑุนูŠุฉ ุชุฎุชุงุฑ ู‚ู†ูˆุงุช ู…ูˆุซูˆู‚ุฉ +2. **ุงู„ุชุตู…ูŠู… ุงู„ู„ูŠ ูŠุญุชุฑู… ูˆู‚ุช ุงู„ู…ุณุชุฎุฏู…** โ€” ู…ุด ูŠุฏู…ู†ู‡ +3. **ุจู†ุงุก ู…ุฌุชู…ุน ู†ูˆุงุฉ** โ€” 100 ู…ุณุชุฎุฏู… ู…ุชูุงุนู„ ุฎูŠุฑ ู…ู† 10,000 ุฎุงู…ู„ + +--- + +## ๐Ÿš€ ุงู„ุฎุทูˆุฉ ุงู„ุชุงู„ูŠุฉ + +ุชุญุจ ู†ุจุฏุฃ ู†ุจู†ูŠ ุงู„ู€ **Prototype** ูุนู„ูŠู‹ุงุŸ ุฃู‚ุฏุฑ ุฃุนู…ู„: +- ุตูุญุฉ HTML/JS ุดุบู‘ุงู„ุฉ ุชุนุฑุถ ููŠุฏูŠูˆ ูŠูˆุชูŠูˆุจ ุจุดูƒู„ ุนู…ูˆุฏูŠ ุฒูŠ ุชูŠูƒุชูˆูƒ +- ู…ุน ุฃุฒุฑุงุฑ ุฅุนุฌุงุจ ูˆุญูุธ (ุชุดุชุบู„ ุจู€ localStorage ููŠ ุงู„ุจุฏุงูŠุฉ) +- ู‚ูˆู„ ู„ูŠ ูˆุงุจุฏุฃ.