Yakha futhi Wethule I-SaaS Yamavidiyo Asakazeka Kakhulu Esebenzisa i-AI nge-ShrimpReel

Yini i-ShrimpReel?

I-ShrimpReel iyisifanekiso se-SaaS esinomthombo ovulekile sokwakha amawebhusayithi aguqula isithombe esisodwa esilayishiwe sibe yividiyo ekhiqizwe yi-AI esekelwe kufomethi esabalala kakhulu. Indlela yokusebenza ehlosiwe iwukwakha i-repository ehlukile yegama elingukhiye ngalinye elithrendayo, uguqule ukumiswa kwesayithi nokuqukethwe ngezilimi ezimbili, ushintshe imidiya, bese uthumela uhlelo lokusebenza oluqediwe ku-Cloudflare.

Isitaki sihlanganisa i-TanStack Start ne-React 19 kanye ne-Tailwind CSS 4 ye-frontend nokunikezwa ohlangothini lweseva. I-Hono API iphatha imizila engaphansi kwe-/api/*, ukulethwa kwemidiya, iziqondiso ze-robots, i-sitemap, nokuqinisekiswa kwe-IndexNow. Indawo yokuqala yeseva yi-src/server.ts.

Uhlelo lokusebenza lwenzelwe i-Cloudflare Workers, i-D1, i-R2, i-KV, ama-Queues, ne-Cron Triggers. Amakhasi esiNgisi anikezwa kusuka ku-/, kanti amakhasi esiShayina atholakala ngaphansi kwe-/zh.

Isimo sephrojekthi: Ngokwe-README, ukuhamba komsebenzi okuphelele kudlula izivivinyo zasendaweni ze-unit neze-Playwright end-to-end, kodwa isifanekiso asikaqinisekiswa njengokuthunyelwa kokukhiqiza. Buyekeza i-ROADMAP.md ngaphambi kokuthembela ekuhlanganisweni ngakunye nezinsizakalo zangempela.

Izici ezibalulekile

Ama-akhawunti, ukukhokha, namakhredithi

• Ukungena nge-Google, okuhlanganisa i-Google One Tap, kanye nokungena kokuthuthukisa okusebenza e-localhost kuphela.
• Amaphakethe amakhredithi nokubhalisa kwanyanga zonke noma konyaka ongakukhetha.
• I-ledger yamakhredithi, amakhodi okusebenzisa, izixhumanisi zokudlulisela, umlando wokukhokha, imininingwane yama-oda ephrintekayo, ukususwa kwe-akhawunti, nokuthunyelwa kwedatha.
• I-Waffo Pancake njengomhlinzeki wokukhokha ozenzakalelayo noma i-Dodo Payments njengenye indlela.
• Ukubuyiselwa kwemali okuyingxenye noma okuphelele nokubuyiswa okuzenzakalelayo kwamakhredithi.

Ukukhiqizwa kwamavidiyo

• I-queue API ye-fal.ai njengomhlinzeki wamavidiyo ozenzakalelayo.
• Ukuqondisa ngokuzithandela nge-yir.ai.
• Umhlinzeki wokulingisa okopisha ividiyo yesifanekiso ngesikhathi sokuthuthukisa kwasendaweni nasezivivinyweni.
• I-queue yokukhiqiza, i-dead-letter queue, nokubuyiselwa okuzenzakalelayo kwamakhredithi lapho ukukhiqiza kwehluleka.
• Amakhasi okwabelana ngamavidiyo omphakathi abasebenzisi abangawavumela ividiyo ngayinye.

Ukukhula, ukuphathwa, nokusebenza

• Ukulandelela kokuthinta kokuqala nokokugcina kusetshenziswa amanani e-UTM nezihlonzi zokuchofoza ezikhangisweni.
• Ifaneli yokusuka ekuvakasheleni kuya ekukhiqizeni nemicimbi ye-GA4 elawulwa yimvume.
• Izindawo zokuphatha abasebenzisi, ama-oda, ukukhiqizwa, imicimbi yokukhokha, ukususwa, imibiko, ama-imeyili, amarekhodi okuhlola, ukudluliselwa, izilungiselelo zesikhathi sokusebenza, nokuhlolwa kokuxhumana.
• Imibiko yezindleko zabahlinzeki kanye nemajini yenzuzo ephelele.
• Imodi yokulungisa, izimemezelo, imikhawulo yokukhiqiza yansuku zonke, izexwayiso zempilo yesistimu, ukubikwa kwamaphutha esiphequluli, nezaziso zokukhokha.
• Amakhophi ayisipele e-D1 ansuku zonke aya ku-R2.

Ukuphepha, ukugcinwa, ne-SEO

• Ukulinganiswa kokulayishwayo kanye nelebula ekhiqizwe yi-AI kumavidiyo.
• Ukususwa okuzenzakalelayo kwezithombe ngemva kwezinsuku eziyisikhombisa namavidiyo ngemva kwezinsuku ezingu-30.
• I-queue yokususa ethatha amahora angu-48 esusa amavidiyo enziwe ngesithombe somthombo esifanayo futhi ivimbe leso sithombe.
• Ukusekelwa kwe-Turnstile kumafomu okuxhumana nawokubika.
• Ama-URL e-canonical, imethadatha ye-hreflang, i-JSON-LD, i-sitemap, amakhasi asemthethweni, imihlahlandlela, izindatshana ezihlobene, nokuqukethwe okwenziwe nge-code-split ngokolimi.
• I-SEO linter yesayithi lonke etholakala nge-npm run seo:check.

Okudingekayo ngaphambi kokuqala

Faka i-Node.js ne-npm 11.19 noma entsha. Izinguqulo ezindala ze-npm zingabhala kabusha i-package-lock.json ngendlela engabangela ukuthi i-npm ci yehluleke kamuva ekuhlanganisweni okuqhubekayo.

Ukuze uthumele ekukhiqizeni, uzodinga futhi i-akhawunti ye-Cloudflare, i-akhawunti yomhlinzeki wokukhokha, ukhiye we-API womhlinzeki wamavidiyo, kanye nemininingwane ye-Google OAuth. I-FFmpeg idingeka kuphela lapho ukhiqiza kabusha imidiya eyisibonelo usebenzisa iskripthi esihlanganisiwe.

Faka futhi usebenzise i-ShrimpReel endaweni yangakini

1. Faka okuncikile bese udala okuguquguqukayo kwasendaweni

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

Vula i-.dev.vars bese usetha okungenani i-SESSION_SECRET. Ukukhiqiza ne-staging kudinga inani eliqinile elinobude obungenani bezinhlamvu ezingu-32. I-README incoma ukulenza nge:

openssl rand -hex 32

2. Lungisa isizindalwazi sendawo nokugcinwa kwemidiya

npm run seed:local

Lo myalo usebenzisa ama-migration e-D1 futhi ulayisha amafayela asuka ku-seed/templates/*.mp4 aye endaweni yokugcina ye-R2 elingisiwe endaweni yangakini.

3. Qalisa iseva yokuthuthukisa

npm run dev -- --host 127.0.0.1

Vula i-http://127.0.0.1:3000. Ku-Windows, ukusebenzisa i-127.0.0.1 ngokuqondile kugwema nezimo lapho amathuluzi okuhlola ehumusha i-localhost njenge-IPv6.

Ungayiqalisi iseva yokuthuthukisa ku-0.0.0.0 noma uyiveze ngokuqondile ku-inthanethi. Ukungena kokuthuthukisa, izinkokhelo zokulingisa, kanye ne-/api/dev/* kuhloselwe izicelo eziqondile ze-localhost kuphela.

Zama ukuhamba komsebenzi okuyisisekelo

Ukumiswa kwasendaweni okuzenzakalelayo kusebenzisa i-PAYMENT_PROVIDER=mock, i-VIDEO_PROVIDER=mock, kanye ne-MODERATION_PROVIDER=mock. Lokhu kukuvumela ukuthi uhlole umkhiqizo ngaphandle kokukhokhisa ikhadi noma ukuthumela umsebenzi kusevisi yevidiyo yangaphandle.

1. Vula ikhasi lokungena bese usebenzisa ukungena kokuthuthukisa okuboniswa ngaphandle kokukhiqiza.
2. Khetha iphakethe lamakhredithi. Ukukhokha kokulingisa kulingisa inkokhelo ngaphandle kokukhokhisa lutho.
3. Layisha isithombe bese uqala ukukhiqiza.
4. Umhlinzeki wamavidiyo wokulingisa ukopisha ividiyo yesifanekiso egcinwe ngaphambilini esikhundleni sokubiza imodeli ye-AI.
5. Vula ideshibhodi ukuze uhlole ividiyo ekhiqiziwe, i-ledger yamakhredithi, amarekhodi okukhokha, nezilungiselelo zokwabelana.

Ukuze ulingise ukwenqatshwa kokulayisha, thumela ifomu lokulayisha nge-mockOutcome=reject. Shiya i-TURNSTILE_SITE_KEY ingenalutho uma ufuna i-Turnstile ikhutshazwe endaweni yangakini.

Ungaphinda uhlole ukuhlanzwa kokugcinwa kwemidiya yomsebenzisi ongene ngemvume njengamanje:

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

{"days": 8}

Ukulethwa kwe-imeyili kwasendaweni kuyalingiswa. Hlola ibhokisi lokuphumayo usebenzisa:

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

Dala isayithi lethrendi entsha

1. Klona indawo yokugcina ugcine umlando we-upstream

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

Ungasebenzisi inkinobho ye-template ye-GitHub uma ufuna ukuhlanganisa izibuyekezo ze-template zesikhathi esizayo. Indawo yokugcina eyakhiwe ngaleyo ndlela ayihlanganyeli umlando nendawo yokugcina yomthombo. I-clone evamile ene-remote ye-upstream igcina isisekelo sokuhlanganisa.

2. Qalisa i-scaffolder yesayithi

Qala nge-dry run, hlola izinguquko eziphakanyisiwe, bese wengeza i---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

I-scaffolder ibuyekeza i-site.ts, amagama ezinsiza ze-Cloudflare ku-wrangler.jsonc, kanye negama lephakheji. Isetha kabusha izihlonzi eziqondene ne-deployment futhi isuse ukucushwa kwe-staging kwe-template. Bese iphrinta uhlu lokuhlola lomsebenzi wezandla osele.

3. Lungiselela amanani nokukhiqiza

Hlela i-src/config/site.ts. Buyekeza amaphakheji amakhredithi aku-packages, iswishi ye-subscriptionsEnabled, ama-plans okubhalisa, ama-durations atholakalayo, kanye ne-video.falModel.

Setha i-subscriptionsEnabled ibe ngu-false uma isayithi kufanele lithengise amaphakheji esikhathi esisodwa kuphela. Iphakheji ingasebenzisa i-anchorPriceCents ukuze ibonise inani lokuqhathanisa eliklaywe umugqa, kodwa i-README ixwayisa ngokuthi kufanele limele inani lapho lelo phakheji lathengiswa khona ngempela. Amasayithi amasha ngokuvamile ayishiya ingasethiwe.

4. Bhala kabusha okuqukethwe okuhunyushiwe

Faka esikhundleni umbhalo oqondene nethrendi ku-src/content/en.ts naku-src/content/zh.ts. Okungenani, bhala kabusha isigaba se-hero, incazelo, imibono, i-FAQ, kanye nezindatshana zombili ezifakiwe. Amabhulokhi enk പ്രശ്lemu nawokuqhathanisa angakhethwa nawo kufanele abhalwe kabusha noma asethelwe ku-null.

Gwema ukushintsha igama elingukhiye kuphela kuwo wonke umbhalo okhona. I-template ixwayisa ngokusobala ukuthi amasayithi aphindwe ngomshini angathathwa yizinjini zokusesha njengokusebenzisa kabi okuqukethwe ngezinga elikhulu.

Ukuze wengeze indatshana, dala okufakiwe kwemethadatha yayo esigabeni se-articles ku-site.ts, bese wengeza ukhiye wokuqukethwe ohambisanayo kuzo zonke izilimi. Izindatshana zifakwa ngokuzenzakalelayo ku-guides hub, sitemap, nakuzixhumanisi ezilungiselelwe zezindatshana ezihlobene. Gcina okufakiwe okukhona kwe-trend ne-howTo ngoba ikhasi lasekhaya lixhuma kukho.

5. Faka esikhundleni yonke imidiya eyizibambi-ndawo

• Faka iziqeshana zokukhiqiza zomthombo ku-seed/templates/ usebenzisa iphethini ethi <template.id>-<seconds>s.mp4.
• Faka esikhundleni amavidiyo namaphosta ekhasi lasekhaya ku-public/demo/.
• Faka esikhundleni i-public/og.png ne-public/favicon.svg.
• Sebenzisa kuphela imidiya yedemo eyangempela noma enelayisensi, bese uqopha ukubongwa kwayo ku-site.examples.*.credit.

Uma i-FFmpeg ikhona, khiqiza kabusha izimpahla zokuqala eziyizibambi-ndawo zephrojekthi usebenzisa:

node scripts/generate-placeholder-media.mjs

Ngemva kokushintsha i-template.id, susa amafayela e-template angasasetshenziswa ku-seed/templates/.

Lungiselela abahlinzeki bangempela

Okuguquguqukayo kwesikhathi sokusebenza

Setha okuguquguqukayo kokukhiqiza okungezona izimfihlo ku-wrangler.jsonc. Amanani abalulekile afaka i-SITE_URL, APP_ENV=production, PAYMENT_PROVIDER, VIDEO_PROVIDER, MODERATION_PROVIDER, TURNSTILE_SITE_KEY, ADMIN_EMAILS, EMAIL_FROM, amamephu emikhiqizo, kanye ne-GOOGLE_CLIENT_ID.

Amanani emikhiqizo omhlinzeki wokukhokha yiwona asemthethweni. Amanani aboniswa yisayithi kufanele ahlale evumelaniswa nedeshibhodi yomhlinzeki. Amamephu emikhiqizo ahlobanisa iphakheji noma uhlelo ngalunye olulungiselelwe ne-ID yomkhiqizo womhlinzeki walo.

Izimfihlo

Kuye ngokuhlanganiswa okukhethiwe, izimfihlo zingafaka i-SESSION_SECRET, GOOGLE_CLIENT_SECRET, iziqinisekiso ze-Waffo, iziqinisekiso ze-Dodo, FAL_KEY, i-YIR_API_KEY yokuzikhethela, i-OPENAI_API_KEY yokuzikhethela yokulinganisa, kanye ne-TURNSTILE_SECRET_KEY.

Setha imfihlo eyodwa usebenzisa:

npx wrangler secret put <NAME>

Ngenye indlela, kopisha bese uqedela ifayela lokuguquguquka lokukhiqiza, hlola uhlelo, bese usebenzisa izimfihlo ezingekho:

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

Isikripthi sokuvumelanisa asiphrinti amanani ezimfihlo. Izimfihlo ezikude ezikhona ziyagcinwa ngaphandle uma kunikezwe i---overwrite.

Hlinzeka ngezinsiza ze-Cloudflare

Dala isethi yezinsiza ehlukile kusayithi ngalinye lamagama angukhiye. Amagama kufanele ahambisane nama-binding aku-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

Kopisha i-ID yedathabheyisi ye-D1 kanye ne-ID ye-KV namespace ekhiqiziwe uyifake ku-wrangler.jsonc. I-namespace_id yomkhawulo wezinga yesayithi ngalinye nayo kufanele ihluke ngaphakathi kwe-akhawunti ye-Cloudflare.

Hlela imithetho ye-R2 lifecycle echazwe yiphrojekthi ukuze izithombe ezilayishiwe namavidiyo akhiqiziwe zilandele izikhathi zokugcinwa zezinsuku eziyisikhombisa nezingama-30. Isizinda sokuthumela kufanele futhi sibhaliswe ku-Cloudflare Email Service ngaphambi kokuba i-imeyili yokwenziwe ngokuthile isebenze.

Qinisekisa futhi ukhiphe

Qalisa ukuhlolwa kwekhwalithi kwasendaweni

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

Ngaphambi kokukhipha, qalisa udokotela wokucushwa:

npm run doctor

Udokotela uhlola imvelo, isizinda, abahlinzeki abakhethiwe, amamephu emikhiqizo, ukubophezela kwezinsiza ze-Cloudflare, imigqa, ukucushwa kwe-Cron, amagama ayimfihlo adingekayo, ama-migration angakasetshenziswa, kanye nezimpawu ze-TODO(site) ezingakaxazululwa. Sebenzisa i---offline lapho ukuhlolwa okukude kungatholakali ngamabomu.

Khipha bese wenza ukuhlolwa okuyisisekelo

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

I-npm run deploy iqala ngokwenza ukuhlolwa kwangaphambi kokukhipha. Ngemva kokukhipha, xhuma isizinda sangokwezifiso ku-Cloudflare futhi uqinisekise ukuthi i-SITE_URL ifana ncamashi ne-site.domain. Ama-URL e-canonical, i-sitemap, kanye nokuhlolwa kwe-CSRF kwemvelaphi efanayo kuncike kulokho kufana.

Lapho isizinda sangokwezifiso sesisebenza, setha i-workers_dev ne-preview_urls zibe yi-false. Ngaphandle kwalokho, i-Worker yokukhiqiza izohlala ifinyeleleka ngama-URL omphakathi okuthuthukisa nawenguqulo e-Cloudflare isebenzisa izinsiza ezifanayo ze-D1 ne-R2.

Qedela imisebenzi yokuqalisa ye-SEO

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

Qalisa umyalo we-IndexNow kuphela ngemva kokucushwa kwe-site.seo.indexNowKey. Qinisekisa isizinda ku-Google Search Console naku-Bing Webmaster Tools, bese uthumela i-https://<domain>/sitemap.xml.

Amathiphu athuthukile

Gcina ukukhiqiza kungenawo ama-mock

Ukukhiqiza ne-staging kwenqaba i-checkout, ukukhiqiza, nokulayisha ngempendulo engu-503 uma abahlinzeki abakhethiwe besalokhu bemiselwe ku-mock. Ukungena kokuthuthukisa, imizila ye-mock checkout, kanye nama-endpoint e-API okuthuthukisa kubuyisa u-404 kulezo zindawo. Kuthathe lokhu njengendlela yokuphepha, hhayi esikhundleni sokuqalisa i-npm run doctor.

Hlanganisa izibuyekezo zethempulethi esikhundleni sokukopisha ama-patch

Gcina umsebenzi oqondene nesayithi ku-src/config/site.ts, src/content/*, public/*, seed/, wrangler.jsonc, kanye negama lephakheji. Ukulungiswa okwabelwana ngakho kufanele kwenziwe ethempulethini bese kuhlanganiswa kusayithi ngalinye.

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

Sebenzisa ama-merge commit esikhundleni sama-squash merge, ama-rebase, noma ama-cherry-pick. Uhlelo lokuvumelanisa luthembele ku-git merge-base HEAD upstream/main. Lapho uqopha i-merge, qeda umlayezo we-commit ngo-Template-sync: <template commit sha>.

Gcina ukuhambisana kwangemuva ngesikhathi sokukhipha

Uma ukukhipha kwehluleka ngemva kokusebenza kwama-migration, inguqulo entsha ye-Worker ingabuyiselwa emuva, kodwa ama-migration e-D1 awabuyiselwa emuva ngokuzenzakalelayo. Gcina ama-migration ehambisana nenguqulo yangaphambilini yohlelo lokusebenza ukuze ukubuyisela emuva kuqhubeke kungenzeka.

Sebenzisa ama-workflow e-Claude Code afakiwe lapho kufanele

Indawo yokugcina iqukethe ikhono le-new-hot-site lokwakha isayithi eligxile kuthrendi, ikhono le-sync-upstream lokuhlanganisa izinguquko zethempulethi, kanye nekhono le-launch-audit lokufunda kuphela lokuhlola ngaphambi kokuqalisa nangemuva kokuqalisa. Lawa mathuluzi awathathi indawo yokubuyekeza ngesandla: umbhalo okhiqiziwe, imidiya enamalayisensi, izizinda, imikhiqizo yabahlinzeki, izilungiselelo ze-OAuth, ukubhaliswa kwe-imeyili, nezinqubomgomo ze-lifecycle kusadinga ukuqinisekiswa.

Buyekeza imibhalo yephrojekthi ngaphambi kokushintsha umqondo oyinhloko

Bheka ku-AGENTS.md ngaphambi kokushintsha amakhredithi, ukugcwaliswa kwezinkokhelo, okuqukethwe ngezilimi ezimbili, ama-migration, noma ukuhlolwa kokuphela-kuya-ekupheleni. Imininingwane eyengeziwe iyatholakala ku-docs/env.md, docs/payments.md, docs/subscriptions.md, docs/SEO_AUDIT.md, kanye ne-docs/SAAS_VIDEO_FEATURES.md. I-README iphawula ukuthi le mibhalo okwamanje ibhalwe ngesiShayina.

Isiphetho

I-ShrimpReel inikeza isiqalo esibanzi se-AI video SaaS egxile kumagama angukhiye, okuhlanganisa imigqa yokukhiqiza, ukukhokhisa, amakhredithi, ukuphatha, ukugcinwa, ama-workflow okuthobela imithetho, izibalo, i-SEO, kanye nokusebenza kwe-Cloudflare. Qala nge-workflow ephephile ye-mock, yenza ngendlela oyifisayo zonke izingqimba eziqondene nesayithi, shintsha okuqukethwe okuyizikhala ngezimpahla ezinamalayisensi, qinisekisa zonke izilungiselelo zabahlinzeki neze-Cloudflare, futhi ukhiphe kuphela ngemva kokuba lonke uchungechunge lokuhlolwa, udokotela, i-SEO, nokuhlolwa okuyisisekelo seluphumelele.