مرکزی مواد پر جائیں
اے آئی ٹیوٹوریلز

ShrimpReel کے ساتھ AI وائرل ویڈیو SaaS بنائیں اور لانچ کریں

جانیں کہ ShrimpReel کو مقامی طور پر کیسے چلانا ہے، اسے وائرل ویڈیو ٹرینڈ کے لیے کسٹمائز کیسے کرنا ہے، ادائیگیوں اور ویڈیو جنریشن کو کیسے ترتیب دینا ہے، Cloudflare وسائل کیسے فراہم کرنے ہیں، محفوظ طریقے سے ڈیپلائے کیسے کرنا ہے، اور ہر کلیدی لفظ سے متعلق سائٹ کو اپ اسٹریم ٹیمپلیٹ کے ساتھ ہم آہنگ کیسے رکھنا ہے۔

تقریباً 31 منٹ کا مطالعہ
ShrimpReel کے ساتھ AI وائرل ویڈیو SaaS بنائیں اور لانچ کریں

ShrimpReel کیا ہے؟

ShrimpReel ایک اوپن سورس SaaS ٹیمپلیٹ ہے جو ایسی ویب سائٹس بنانے کے لیے ہے جو اپ لوڈ کی گئی ایک تصویر کو وائرل فارمیٹ کی بنیاد پر AI سے تیار کردہ ویڈیو میں تبدیل کرتی ہیں۔ مطلوبہ ورک فلو یہ ہے کہ ہر مقبول کی ورڈ کے لیے الگ repository بنائی جائے، سائٹ کی configuration اور دو لسانی مواد تبدیل کیا جائے، میڈیا بدلا جائے، اور مکمل application کو Cloudflare پر deploy کیا جائے۔

اس stack میں frontend اور server-side rendering کے لیے TanStack Start، React 19 اور Tailwind CSS 4 شامل ہیں۔ Hono API /api/* کے تحت routes، media delivery، robots directives، sitemap اور IndexNow verification سنبھالتی ہے۔ Server entry point src/server.ts ہے۔

یہ application Cloudflare Workers، D1، R2، KV، Queues، Rate Limiting اور Cron Triggers کے لیے بنائی گئی ہے۔ انگریزی صفحات / سے فراہم کیے جاتے ہیں، جبکہ چینی صفحات /zh کے تحت دستیاب ہیں۔

Project status: README کے مطابق مکمل workflow مقامی unit اور Playwright end-to-end tests میں کامیاب ہے، لیکن template کی production deployment کے طور پر ابھی تصدیق نہیں ہوئی۔ حقیقی services کے ساتھ انفرادی integrations پر انحصار کرنے سے پہلے ROADMAP.md کا جائزہ لیں۔

اہم خصوصیات

اکاؤنٹس، billing اور credits

  • Google sign-in، جس میں Google One Tap بھی شامل ہے، اور صرف localhost کے لیے development login۔
  • Credit packs اور اختیاری ماہانہ یا سالانہ subscriptions۔
  • Credit ledger، redeem codes، referral links، billing history، قابلِ طباعت order details، account deletion اور data export۔
  • بطور default payment provider Waffo Pancake، یا متبادل کے طور پر Dodo Payments۔
  • جزوی اور مکمل refunds کے ساتھ credits کی خودکار واپسی۔

ویڈیو generation

  • بطور default video provider fal.ai کی queue API۔
  • yir.ai کے ذریعے اختیاری routing۔
  • ایک mock provider جو مقامی development اور tests کے دوران template video copy کرتا ہے۔
  • Generation queue، dead-letter queue اور generation ناکام ہونے پر credits کی خودکار واپسی۔
  • عوامی video sharing pages جنہیں صارف ہر video کے لیے فعال کر سکتے ہیں۔

Growth، administration اور operations

  • UTM values اور advertising click identifiers کے ذریعے first-touch اور last-touch attribution۔
  • Visit-to-generation funnel اور consent-controlled GA4 events۔
  • Users، orders، generations، payment events، takedowns، reports، emails، audit records، referrals، runtime settings اور connection tests کے لیے admin interfaces۔
  • Provider cost اور gross-margin reporting۔
  • Maintenance mode، announcements، daily generation limits، health alerts، browser error reporting اور payment notifications۔
  • R2 میں روزانہ D1 backups۔

حفاظت، retention اور SEO

  • Upload moderation اور videos پر AI-generated label۔
  • سات دن بعد photos اور 30 دن بعد videos کی خودکار deletion۔
  • 48 گھنٹوں کی takedown queue جو اسی source photo سے بنائی گئی videos کو ہٹا دیتی ہے اور اس photo کو block کرتی ہے۔
  • Contact اور report forms پر Turnstile support۔
  • Canonical URLs، hreflang metadata، JSON-LD، sitemap، legal pages، guides، related articles اور code-split localized copy۔
  • Site-wide SEO linter، جو npm run seo:check کے ذریعے دستیاب ہے۔

ضروریات

Node.js اور npm 11.19 یا اس سے نیا ورژن install کریں۔ پرانے npm versions package-lock.json کو ایسی شکل میں rewrite کر سکتے ہیں جس کے باعث بعد میں continuous integration میں npm ci ناکام ہو جاتا ہے۔

Production deployment کے لیے Cloudflare account، payment-provider account، video-provider API key اور Google OAuth credentials بھی درکار ہوں گے۔ FFmpeg صرف bundled script کے ذریعے placeholder media دوبارہ بنانے کے وقت ضروری ہے۔

ShrimpReel کو مقامی طور پر install اور run کریں

1. Dependencies install کریں اور local variables بنائیں

npm install
cp .dev.vars.example .dev.vars

.dev.vars کھولیں اور کم از کم SESSION_SECRET مقرر کریں۔ Production اور staging کے لیے کم از کم 32 characters کی مضبوط value درکار ہے۔ README اسے generate کرنے کے لیے یہ command تجویز کرتا ہے:

openssl rand -hex 32

2. Local database اور media storage تیار کریں

npm run seed:local

یہ command D1 migrations نافذ کرتی ہے اور seed/templates/*.mp4 سے files کو locally emulated R2 storage میں upload کرتی ہے۔

3. Development server شروع کریں

npm run dev -- --host 127.0.0.1

http://127.0.0.1:3000 کھولیں۔ Windows پر 127.0.0.1 واضح طور پر استعمال کرنے سے وہ صورتیں بھی ختم ہو جاتی ہیں جن میں test tools localhost کو IPv6 پر resolve کرتے ہیں۔

Development server کو 0.0.0.0 پر نہ چلائیں اور نہ ہی اسے براہِ راست internet پر expose کریں۔ Development login، mock payments اور /api/dev/* صرف براہِ راست localhost requests کے لیے ہیں۔

بنیادی workflow آزمائیں

Default local configuration میں PAYMENT_PROVIDER=mock، VIDEO_PROVIDER=mock اور MODERATION_PROVIDER=mock استعمال ہوتے ہیں۔ اس سے آپ card سے رقم وصول کیے بغیر یا کسی external video service کو job بھیجے بغیر product کو آزما سکتے ہیں۔

  1. Sign-in page کھولیں اور production کے علاوہ دکھایا جانے والا development login استعمال کریں۔
  2. Credit pack منتخب کریں۔ Mock checkout کسی رقم کی وصولی کے بغیر payment simulate کرتا ہے۔
  3. Photo upload کریں اور generation شروع کریں۔
  4. Mock video provider AI model کو call کرنے کے بجائے seeded template video copy کرتا ہے۔
  5. Generated video، credit ledger، billing records اور sharing settings دیکھنے کے لیے dashboard کھولیں۔

Upload rejection simulate کرنے کے لیے upload form کو mockOutcome=reject کے ساتھ submit کریں۔ اگر آپ Turnstile کو مقامی طور پر disabled رکھنا چاہتے ہیں تو TURNSTILE_SITE_KEY خالی چھوڑ دیں۔

آپ موجودہ signed-in user کی media کے لیے retention cleanup بھی test کر سکتے ہیں:

POST /api/dev/sweep
Content-Type: application/json

{"days": 8}

مقامی ای میل کی ترسیل کی نقلی صورت میں کی جاتی ہے۔ آؤٹ باکس دیکھنے کے لیے یہ کمانڈ استعمال کریں:

GET /api/dev/emails?to=user@example.com&ref=<order-or-takedown-id>

نئے رجحان کے لیے سائٹ بنائیں

1. اپ اسٹریم ہسٹری برقرار رکھتے ہوئے ریپوزٹری کلون کریں

git clone https://github.com/qianshuixia/shrimpreel.git moonhop
cd moonhop
git remote rename origin upstream
git remote add origin git@github.com:<owner>/moonhop.git

اگر آپ مستقبل میں ٹیمپلیٹ کی اپ ڈیٹس ضم کرنا چاہتے ہیں تو GitHub کا ٹیمپلیٹ بٹن استعمال نہ کریں۔ اس طریقے سے بنائی گئی ریپوزٹری کا سورس ریپوزٹری کے ساتھ مشترکہ ہسٹری نہیں ہوتی۔ عام کلون میں upstream ریموٹ شامل کرنے سے مرج بیس برقرار رہتا ہے۔

2. سائٹ اسکیفولڈر چلائیں

ڈرائی رن سے آغاز کریں، مجوزہ تبدیلیوں کا جائزہ لیں، پھر --write شامل کریں:

node scripts/new-site.mjs --keyword "Moon Hop" --domain moonhop.ai --keywords "AI dance video,Moon Hop filter"
node scripts/new-site.mjs --keyword "Moon Hop" --domain moonhop.ai --keywords "AI dance video,Moon Hop filter" --write

اسکیفولڈر site.ts، wrangler.jsonc میں Cloudflare وسائل کے نام، اور پیکیج کا نام اپ ڈیٹ کرتا ہے۔ یہ تعیناتی سے متعلق شناخت کنندگان کو ری سیٹ کرتا اور ٹیمپلیٹ کی اسٹیجنگ کنفیگریشن ہٹا دیتا ہے۔ اس کے بعد باقی دستی کاموں کی چیک لسٹ دکھاتا ہے۔

3. قیمتوں اور جنریشن کو کنفیگر کریں

src/config/site.ts میں ترمیم کریں۔ packages میں کریڈٹ پیکس، subscriptionsEnabled سوئچ، سبسکرپشن plans، دستیاب durations، اور video.falModel کا جائزہ لیں۔

اگر سائٹ کو صرف یک وقتی پیکس فروخت کرنے ہیں تو subscriptionsEnabled کو false پر سیٹ کریں۔ کوئی پیک تقابلی قیمت دکھانے کے لیے anchorPriceCents استعمال کر سکتا ہے، لیکن README میں تنبیہ کی گئی ہے کہ یہ وہ قیمت ہونی چاہیے جس پر پیک واقعی فروخت ہوا ہو۔ نئی سائٹس عام طور پر اسے خالی چھوڑتی ہیں۔

4. مقامی مواد دوبارہ لکھیں

src/content/en.ts اور src/content/zh.ts میں رجحان سے متعلق متن تبدیل کریں۔ کم از کم ہیرو سیکشن، وضاحت، آئیڈیاز، عمومی سوالات، اور دونوں شامل مضامین دوبارہ لکھیں۔ اختیاری مسئلہ اور تقابلی بلاکس بھی دوبارہ لکھے جائیں یا انہیں null پر سیٹ کیا جائے۔

موجودہ متن میں صرف ہر جگہ کلیدی لفظ تبدیل کرنے سے گریز کریں۔ ٹیمپلیٹ واضح طور پر خبردار کرتا ہے کہ مشینی انداز میں نقل کی گئی سائٹس کو سرچ انجنز اسکیل شدہ مواد کے غلط استعمال کے طور پر دیکھ سکتے ہیں۔

مضمون شامل کرنے کے لیے پہلے site.ts کے articles سیکشن میں اس کا میٹا ڈیٹا اندراج بنائیں، پھر ہر لوکیل میں متعلقہ مواد کی کلید شامل کریں۔ مضامین خودکار طور پر گائیڈز ہب، سائٹ میپ، اور کنفیگر شدہ متعلقہ مضمون کے لنکس میں شامل ہو جاتے ہیں۔ موجودہ trend اور howTo اندراجات برقرار رکھیں کیونکہ ہوم پیج ان سے لنک کرتا ہے۔

5. تمام پلیس ہولڈر میڈیا تبدیل کریں

  • سورس جنریشن کلپس seed/templates/ میں <template.id>-<seconds>s.mp4 پیٹرن کے مطابق رکھیں۔
  • ہوم پیج کی ویڈیوز اور پوسٹرز public/demo/ میں تبدیل کریں۔
  • public/og.png اور public/favicon.svg تبدیل کریں۔
  • صرف اصل یا لائسنس یافتہ ڈیمو میڈیا استعمال کریں اور اس کا انتساب site.examples.*.credit میں درج کریں۔

اگر FFmpeg دستیاب ہو تو پروجیکٹ کے اصل پلیس ہولڈر اثاثے دوبارہ بنانے کے لیے یہ کمانڈ چلائیں:

node scripts/generate-placeholder-media.mjs

template.id تبدیل کرنے کے بعد seed/templates/ سے غیر ضروری ٹیمپلیٹ فائلیں ہٹا دیں۔

حقیقی فراہم کنندگان کو کنفیگر کریں

رن ٹائم متغیرات

غیر خفیہ پروڈکشن متغیرات wrangler.jsonc میں سیٹ کریں۔ اہم قدروں میں SITE_URL، APP_ENV=production، PAYMENT_PROVIDER، VIDEO_PROVIDER، MODERATION_PROVIDER، TURNSTILE_SITE_KEY، ADMIN_EMAILS، EMAIL_FROM، پروڈکٹ میپنگز، اور GOOGLE_CLIENT_ID شامل ہیں۔

ادائیگی فراہم کنندہ کی پروڈکٹ قیمتیں حتمی ماخذ ہوتی ہیں۔ سائٹ پر دکھائی جانے والی قیمتیں فراہم کنندہ کے ڈیش بورڈ کے ساتھ ہم آہنگ رہنی چاہییں۔ پروڈکٹ میپنگز ہر کنفیگر شدہ پیک یا پلان کو اس کی فراہم کنندہ پروڈکٹ آئی ڈی سے منسلک کرتی ہیں۔

راز

منتخب کردہ انضمامات کے لحاظ سے رازوں میں SESSION_SECRET، GOOGLE_CLIENT_SECRET، Waffo کی اسناد، Dodo کی اسناد، FAL_KEY، اختیاری YIR_API_KEY، ماڈریشن کے لیے اختیاری OPENAI_API_KEY، اور TURNSTILE_SECRET_KEY شامل ہو سکتے ہیں۔

انفرادی راز سیٹ کرنے کے لیے یہ کمانڈ چلائیں:

npx wrangler secret put <NAME>

متبادل طور پر، پروڈکشن متغیرات کی فائل کی نقل بنا کر اسے مکمل کریں، پلان کا جائزہ لیں، پھر غائب راز لاگو کریں:

cp .dev.vars.example .dev.vars.production
node scripts/sync-secrets.mjs
node scripts/sync-secrets.mjs --apply

ہم وقت سازی کی اسکرپٹ رازوں کی قدریں پرنٹ نہیں کرتی۔ موجودہ ریموٹ راز برقرار رہتے ہیں، جب تک --overwrite فراہم نہ کیا جائے۔

Cloudflare وسائل فراہم کریں

ہر کلیدی لفظ والی سائٹ کے لیے وسائل کا الگ سیٹ بنائیں۔ نام wrangler.jsonc میں موجود بائنڈنگز سے مماثل ہونے چاہییں۔

npx wrangler d1 create <name>
npx wrangler r2 bucket create <name>-media
npx wrangler kv namespace create <name>-kv
npx wrangler queues create <name>-jobs
npx wrangler queues create <name>-jobs-dlq
npm run db:migrate:remote
npx wrangler r2 object put <name>-media/templates/<file>.mp4 --file seed/templates/<file>.mp4 --content-type video/mp4 --remote

تیار کردہ D1 ڈیٹابیس آئی ڈی اور KV نیم اسپیس آئی ڈی کو wrangler.jsonc میں کاپی کریں۔ ہر سائٹ کا ریٹ لمٹ namespace_id بھی Cloudflare اکاؤنٹ کے اندر منفرد ہونا چاہیے۔

پروجیکٹ میں بیان کردہ R2 لائف سائیکل قواعد ترتیب دیں تاکہ اپ لوڈ کی گئی تصاویر اور تیار کردہ ویڈیوز بالترتیب سات دن اور 30 دن کی برقرار رکھنے کی مدت پر عمل کریں۔ ٹرانزیکشنل ای میل کے کام کرنے سے پہلے بھیجنے والے ڈومین کو Cloudflare Email Service کے ساتھ آن بورڈ کرنا ضروری ہے۔

تصدیق اور تعیناتی

مقامی معیار کی جانچ چلائیں

npm run typecheck
npm test
npm run test:e2e
npm run seo:check

تعیناتی سے پہلے کنفیگریشن ڈاکٹر چلائیں:

npm run doctor

ڈاکٹر ماحول، ڈومین، منتخب فراہم کنندگان، پروڈکٹ میپنگز، Cloudflare وسائل کی بائنڈنگز، قطاروں، Cron کنفیگریشن، مطلوبہ سیکرٹ ناموں، لاگو نہ کی گئی مائیگریشنز، اور حل نہ کیے گئے TODO(site) مارکرز کی جانچ کرتا ہے۔ جب ریموٹ جانچ جان بوجھ کر دستیاب نہ ہو تو --offline استعمال کریں۔

تعینات کریں اور اسموک ٹیسٹ چلائیں

npm run deploy
SMOKE_BASE_URL=https://<domain> npm run test:smoke

npm run deploy پہلے تعیناتی سے قبل کی جانچیں چلاتا ہے۔ تعیناتی کے بعد Cloudflare میں کسٹم ڈومین منسلک کریں اور یقینی بنائیں کہ SITE_URL بالکل site.domain سے مطابقت رکھتا ہو۔ کینونیکل URLs، سائٹ میپ، اور same-origin CSRF جانچ اسی مطابقت پر منحصر ہیں۔

کسٹم ڈومین کے فعال ہونے کے بعد workers_dev اور preview_urls کو false پر سیٹ کریں۔ بصورت دیگر، پروڈکشن Worker عوامی Cloudflare ڈیولپمنٹ اور ورژن URLs کے ذریعے انہی D1 اور R2 وسائل کے ساتھ قابل رسائی رہے گا۔

SEO لانچ کے کام مکمل کریں

npm run seo:check -- --base https://<domain> --production
npm run seo:indexnow -- --submit

IndexNow کمانڈ صرف site.seo.indexNowKey ترتیب دینے کے بعد چلائیں۔ ڈومین کی Google Search Console اور Bing Webmaster Tools میں تصدیق کریں، پھر https://<domain>/sitemap.xml جمع کرائیں۔

اعلیٰ درجے کی تجاویز

پروڈکشن کو mocks سے پاک رکھیں

اگر منتخب فراہم کنندگان mock پر برقرار رہیں تو پروڈکشن اور staging چیک آؤٹ، جنریشن، اور اپ لوڈز کو 503 جواب کے ساتھ مسترد کرتے ہیں۔ ان ماحول میں ڈیولپمنٹ لاگ اِن، mock چیک آؤٹ routes، اور ڈیولپمنٹ API endpoints 404 واپس کرتے ہیں۔ اسے حفاظتی طریقہ کار سمجھیں، npm run doctor چلانے کا متبادل نہیں۔

پیچز نقل کرنے کے بجائے ٹیمپلیٹ اپ ڈیٹس ضم کریں

سائٹ کے مخصوص کام کو src/config/site.ts، src/content/*، public/*، seed/، wrangler.jsonc، اور پیکیج نام میں رکھیں۔ مشترکہ اصلاحات ٹیمپلیٹ میں کریں اور ہر سائٹ میں ضم کریں۔

git fetch upstream
git show upstream/main:scripts/sync-plan.mjs > .tmp/sync-plan.mjs
node .tmp/sync-plan.mjs
git merge --no-ff upstream/main
npm install
npm run typecheck
npm test
npm run test:e2e
npm run db:migrate:remote

squash merges، rebases، یا cherry-picks کے بجائے merge commits استعمال کریں۔ sync plan git merge-base HEAD upstream/main پر انحصار کرتا ہے۔ merge ریکارڈ کرتے وقت commit message کا اختتام Template-sync: <template commit sha> پر کریں۔

تعیناتیوں کے دوران پسماندہ مطابقت برقرار رکھیں

اگر مائیگریشنز چلنے کے بعد تعیناتی ناکام ہو جائے تو نیا Worker ورژن واپس لیا جا سکتا ہے، لیکن D1 مائیگریشنز خودکار طور پر واپس نہیں ہوتیں۔ مائیگریشنز کو پچھلے ایپلیکیشن ورژن کے ساتھ مطابقت پذیر رکھیں تاکہ rollback ممکن رہے۔

موزوں مواقع پر شامل Claude Code workflows استعمال کریں

ریپوزٹری میں trend-specific سائٹ کی scaffolding کے لیے new-hot-site skill، ٹیمپلیٹ کی تبدیلیاں ضم کرنے کے لیے sync-upstream skill، اور لانچ سے پہلے اور لائیو جانچوں کے لیے صرف پڑھنے والی launch-audit skill شامل ہے۔ یہ ٹولز دستی جائزے کی جگہ نہیں لیتے: تیار کردہ copy، لائسنس یافتہ media، ڈومینز، فراہم کنندہ پروڈکٹس، OAuth settings، ای میل onboarding، اور لائف سائیکل پالیسیاں اب بھی تصدیق کی متقاضی ہیں۔

بنیادی منطق تبدیل کرنے سے پہلے پروجیکٹ کی دستاویزات کا جائزہ لیں

credits، payment fulfillment، دو لسانی مواد، مائیگریشنز، یا end-to-end tests میں ترمیم کرنے سے پہلے AGENTS.md دیکھیں۔ اضافی تفصیلات docs/env.md، docs/payments.md، docs/subscriptions.md، docs/SEO_AUDIT.md، اور docs/SAAS_VIDEO_FEATURES.md میں دستیاب ہیں۔ README میں درج ہے کہ یہ دستاویزات فی الحال چینی زبان میں لکھی گئی ہیں۔

نتیجہ

ShrimpReel keyword-focused AI video SaaS کے لیے ایک مضبوط ابتدائی بنیاد فراہم کرتا ہے، جس میں generation queues، billing، credits، administration، retention، compliance workflows، analytics، SEO، اور Cloudflare operations شامل ہیں۔ محفوظ mock workflow سے آغاز کریں، سائٹ کی ہر مخصوص پرت کو حسب ضرورت بنائیں، placeholder content کو لائسنس یافتہ assets سے تبدیل کریں، تمام provider اور Cloudflare settings کی تصدیق کریں، اور مکمل test، doctor، SEO، اور smoke-test sequence کے کامیاب ہونے کے بعد ہی تعیناتی کریں۔