Jenga na Zindua SaaS ya Video za AI Zinazosambaa kwa ShrimpReel

ShrimpReel ni nini?

ShrimpReel ni kiolezo cha SaaS chenye msimbo huria cha kujenga tovuti zinazobadilisha picha moja iliyopakiwa kuwa video iliyotengenezwa na AI kulingana na muundo unaosambaa kwa kasi. Mtiririko unaokusudiwa ni kuunda hazina tofauti kwa kila neno muhimu linalovuma, kubadilisha usanidi wa tovuti na maudhui ya lugha mbili, kubadilisha midia, na kupeleka programu iliyokamilika kwenye Cloudflare.

Teknolojia hiyo inachanganya TanStack Start na React 19 pamoja na Tailwind CSS 4 kwa upande wa mbele na uonyeshaji wa upande wa seva. API ya Hono hushughulikia njia zilizo chini ya /api/*, uwasilishaji wa midia, maelekezo ya robots, ramani ya tovuti, na uthibitishaji wa IndexNow. Sehemu ya kuingilia seva ni src/server.ts.

Programu imeundwa kwa kuzingatia Cloudflare Workers, D1, R2, KV, Queues, Rate Limiting, na Cron Triggers. Kurasa za Kiingereza hutolewa kutoka /, huku kurasa za Kichina zikipatikana chini ya /zh.

Hali ya mradi: Kulingana na README, mtiririko kamili hupita majaribio ya ndani ya unit na Playwright ya mwisho hadi mwisho, lakini kiolezo bado hakijathibitishwa kama uwekaji wa uzalishaji. Kagua ROADMAP.md kabla ya kutegemea miunganisho binafsi na huduma halisi.

Vipengele muhimu

Hesabu, malipo na salio

• Ingia kwa Google, ikijumuisha Google One Tap, pamoja na kuingia kwa maendeleo kunakopatikana localhost pekee.
• Vifurushi vya salio na usajili wa hiari wa kila mwezi au kila mwaka.
• Daftari la salio, misimbo ya kukomboa, viungo vya rufaa, historia ya malipo, maelezo ya oda yanayoweza kuchapishwa, ufutaji wa akaunti, na uhamishaji wa data.
• Waffo Pancake kama mtoa huduma chaguomsingi wa malipo au Dodo Payments kama mbadala.
• Urejeshaji wa sehemu au wa kiasi kamili pamoja na kunyang'anywa kiotomatiki kwa salio.

Uzalishaji wa video

• API ya foleni ya fal.ai kama mtoa huduma chaguomsingi wa video.
• Uelekezaji wa hiari kupitia yir.ai.
• Mtoa huduma wa kuiga unaonakili video ya kiolezo wakati wa maendeleo ya ndani na majaribio.
• Foleni ya uzalishaji, foleni ya barua zilizokufa, na urejeshaji wa salio kiotomatiki wakati uzalishaji unaposhindwa.
• Kurasa za umma za kushiriki video ambazo watumiaji wanaweza kuwasha kwa kila video.

Ukuaji, usimamizi na uendeshaji

• Uhusishaji wa mguso wa kwanza na wa mwisho kwa kutumia thamani za UTM na vitambulishi vya mibofyo ya matangazo.
• Faneli ya ziara hadi uzalishaji na matukio ya GA4 yanayodhibitiwa na ridhaa.
• Kiolesura cha msimamizi cha watumiaji, oda, uzalishaji, matukio ya malipo, uondoaji, ripoti, barua pepe, rekodi za ukaguzi, rufaa, mipangilio ya wakati wa utekelezaji, na majaribio ya miunganisho.
• Ripoti za gharama za mtoa huduma na faida ghafi.
• Hali ya matengenezo, matangazo, vikomo vya kila siku vya uzalishaji, arifa za afya, utoaji wa ripoti za hitilafu za kivinjari, na arifa za malipo.
• Hifadhi rudufu za kila siku za D1 kwenda R2.

Usalama, uhifadhi na SEO

• Udhibiti wa upakiaji na lebo ya video iliyotengenezwa na AI.
• Ufutaji wa picha kiotomatiki baada ya siku saba na ufutaji wa video baada ya siku 30.
• Foleni ya saa 48 ya uondoaji inayofuta video zilizotengenezwa kutoka kwenye picha ileile ya chanzo na kuzuia picha hiyo.
• Usaidizi wa Turnstile kwenye fomu za mawasiliano na ripoti.
• URL za kikanoni, metadata ya hreflang, JSON-LD, ramani ya tovuti, kurasa za kisheria, miongozo, makala zinazohusiana, na maudhui ya lugha yaliyogawanywa kwa msimbo.
• Kikagua SEO cha tovuti nzima kinachopatikana kupitia npm run seo:check.

Mahitaji ya awali

Sakinisha Node.js na npm 11.19 au toleo jipya zaidi. Toleo za zamani za npm zinaweza kuandika upya package-lock.json kwa muundo unaosababisha baadaye npm ci kushindwa katika ujumuishaji endelevu.

Kwa uwekaji wa uzalishaji, utahitaji pia akaunti ya Cloudflare, akaunti ya mtoa huduma wa malipo, ufunguo wa API wa mtoa huduma wa video, na vitambulisho vya Google OAuth. FFmpeg inahitajika tu wakati wa kuzalisha upya midia ya kishikilia nafasi kwa kutumia hati iliyojumuishwa.

Sakinisha na uendeshe ShrimpReel ndani ya kompyuta

1. Sakinisha vitegemezi na uunde vigezo vya ndani

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

Fungua .dev.vars na uweke angalau SESSION_SECRET. Uzalishaji na hatua ya maandalizi vinahitaji thamani thabiti yenye angalau vibambo 32. README inapendekeza kuunda moja kwa:

openssl rand -hex 32

2. Andaa hifadhidata ya ndani na hifadhi ya midia

npm run seed:local

Amri hii hutumia uhamishaji wa D1 na kupakia faili kutoka seed/templates/*.mp4 hadi kwenye hifadhi ya R2 inayoigwa ndani ya kompyuta.

3. Anzisha seva ya maendeleo

npm run dev -- --host 127.0.0.1

Fungua http://127.0.0.1:3000. Kwenye Windows, kutumia 127.0.0.1 moja kwa moja pia huepuka hali ambapo zana za majaribio hutafsiri localhost kuwa IPv6.

Usiendeshe seva ya maendeleo kwenye 0.0.0.0 au kuiweka wazi moja kwa moja kwenye intaneti. Kuingia kwa maendeleo, malipo ya kuiga, na /api/dev/* vimekusudiwa maombi ya moja kwa moja ya localhost pekee.

Jaribu mtiririko wa msingi

Usanidi chaguomsingi wa ndani hutumia PAYMENT_PROVIDER=mock, VIDEO_PROVIDER=mock, na MODERATION_PROVIDER=mock. Hii hukuwezesha kutumia bidhaa bila kutoza kadi au kutuma kazi kwa huduma ya nje ya video.

1. Fungua ukurasa wa kuingia na utumie kuingia kwa maendeleo kunakoonyeshwa nje ya uzalishaji.
2. Chagua kifurushi cha salio. Malipo ya kuiga huiga malipo bila kutoza chochote.
3. Pakia picha na uanze uzalishaji.
4. Mtoa huduma wa video wa kuiga hunakili video ya kiolezo iliyowekwa awali badala ya kuita modeli ya AI.
5. Fungua dashibodi ili kukagua video iliyotengenezwa, daftari la salio, rekodi za malipo, na mipangilio ya kushiriki.

Ili kuiga kukataliwa kwa upakiaji, tuma fomu ya upakiaji ikiwa na mockOutcome=reject. Acha TURNSTILE_SITE_KEY ikiwa tupu ikiwa unataka Turnstile izimwe ndani ya kompyuta.

Pia unaweza kujaribu usafishaji wa uhifadhi wa midia ya mtumiaji aliyeingia kwa sasa:

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

{"days": 8}

Uwasilishaji wa barua pepe wa ndani unaigwa. Kagua kisanduku cha barua pepe zinazotoka kwa:

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

Unda tovuti kwa mtindo mpya

1. Nakili hazina huku ukihifadhi historia ya chanzo cha juu

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

Usitumie kitufe cha kiolezo cha GitHub ikiwa unataka kuunganisha masasisho ya baadaye ya kiolezo. Hazina iliyoundwa kwa njia hiyo haishiriki historia na hazina ya chanzo. Nakala ya kawaida yenye remote ya upstream huhifadhi msingi wa kuunganisha.

2. Endesha kiunda tovuti

Anza kwa dry run, kagua mabadiliko yanayopendekezwa, kisha ongeza --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

Kiunda tovuti husasisha site.ts, majina ya rasilimali za Cloudflare katika wrangler.jsonc, na jina la kifurushi. Huweka upya vitambulishi maalum vya deployment na kuondoa usanidi wa staging wa kiolezo. Kisha huchapisha orodha ya ukaguzi kwa kazi za mwongozo zilizosalia.

3. Sanidi bei na utengenezaji

Hariri src/config/site.ts. Kagua vifurushi vya salio katika packages, swichi ya subscriptionsEnabled, plans za usajili, durations zinazopatikana, na video.falModel.

Weka subscriptionsEnabled kuwa false ikiwa tovuti inapaswa kuuza vifurushi vya mara moja pekee. Kifurushi kinaweza kutumia anchorPriceCents kuonyesha bei ya kulinganisha iliyokatwa mstari, lakini README inaonya kwamba inapaswa kuwakilisha bei ambayo kifurushi kiliuzwa kwa kweli. Tovuti mpya kwa kawaida huiacha bila kuwekwa.

4. Andika upya maudhui yaliyotafsiriwa

Badilisha maandishi yanayohusiana na mtindo katika src/content/en.ts na src/content/zh.ts. Kwa kiwango cha chini, andika upya sehemu ya mwanzo, maelezo, mawazo, Maswali Yanayoulizwa Mara kwa Mara, na makala zote mbili zilizojumuishwa. Vitalu vya hiari vya tatizo na ulinganisho pia vinapaswa kuandikwa upya au kuwekwa kuwa null.

Epuka kubadilisha tu neno kuu katika maandishi yaliyopo. Kiolezo kinaonya wazi kwamba tovuti zilizonakiliwa kimakanika zinaweza kuchukuliwa na injini za utafutaji kuwa matumizi mabaya ya maudhui kwa kiwango kikubwa.

Ili kuongeza makala, unda ingizo lake la metadata katika sehemu ya articles ya site.ts, kisha ongeza ufunguo wa maudhui unaolingana katika kila lugha. Makala hujumuishwa kiotomatiki katika kitovu cha miongozo, sitemap, na viungo vya makala zinazohusiana vilivyosaniwa. Hifadhi maingizo yaliyopo ya trend na howTo kwa sababu ukurasa wa mwanzo huyaunganisha.

5. Badilisha media zote za kishikilia nafasi

• Weka klipu za chanzo cha utengenezaji katika seed/templates/ ukitumia muundo <template.id>-<seconds>s.mp4.
• Badilisha video na picha za poster za ukurasa wa mwanzo katika public/demo/.
• Badilisha public/og.png na public/favicon.svg.
• Tumia media za maonyesho zilizo za asili au zilizo na leseni pekee, na uweke maelezo ya chanzo katika site.examples.*.credit.

Ikiwa FFmpeg inapatikana, tengeneza upya rasilimali za awali za kishikilia nafasi za mradi kwa:

node scripts/generate-placeholder-media.mjs

Baada ya kubadilisha template.id, ondoa faili za violezo zilizopitwa na wakati kutoka seed/templates/.

Sanidi watoa huduma halisi

Vigezo vya wakati wa utekelezaji

Weka vigezo vya uzalishaji visivyo vya siri katika wrangler.jsonc. Thamani muhimu zinajumuisha SITE_URL, APP_ENV=production, PAYMENT_PROVIDER, VIDEO_PROVIDER, MODERATION_PROVIDER, TURNSTILE_SITE_KEY, ADMIN_EMAILS, EMAIL_FROM, miunganisho ya bidhaa, na GOOGLE_CLIENT_ID.

Bei za bidhaa za mtoa huduma wa malipo ndizo zenye mamlaka. Bei zinazoonyeshwa na tovuti lazima zisawazishwe na dashibodi ya mtoa huduma. Miunganisho ya bidhaa huhusisha kila kifurushi au mpango uliosanidiwa na kitambulisho cha bidhaa cha mtoa huduma.

Siri

Kulingana na miunganisho iliyochaguliwa, siri zinaweza kujumuisha SESSION_SECRET, GOOGLE_CLIENT_SECRET, vitambulisho vya Waffo, vitambulisho vya Dodo, FAL_KEY, YIR_API_KEY ya hiari, OPENAI_API_KEY ya hiari kwa ajili ya udhibiti, na TURNSTILE_SECRET_KEY.

Weka siri moja kwa moja kwa:

npx wrangler secret put <NAME>

Vinginevyo, nakili na ukamilishe faili la vigezo vya uzalishaji, kagua mpango, kisha tumia siri zinazokosekana:

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

Hati ya usawazishaji haichapishi thamani za siri. Siri za mbali zilizopo huhifadhiwa isipokuwa --overwrite itolewe.

Toa rasilimali za Cloudflare

Unda seti tofauti ya rasilimali kwa kila tovuti ya neno kuu. Majina lazima yalingane na binding zilizo katika 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

Nakili kitambulisho cha hifadhidata cha D1 na kitambulisho cha namespace ya KV kilichozalishwa, kisha viweke katika wrangler.jsonc. namespace_id ya kikomo cha kasi ya kila tovuti lazima pia iwe ya kipekee ndani ya akaunti ya Cloudflare.

Sanidi sheria za mzunguko wa maisha za R2 zilizoelezwa na mradi ili picha zilizopakiwa na video zinazozalishwa zifuate vipindi vya kuhifadhi vya siku saba na siku 30. Kikoa cha kutuma lazima pia kisajiliwe katika Cloudflare Email Service kabla barua pepe za miamala kufanya kazi.

Thibitisha na upeleke

Endesha ukaguzi wa ubora wa ndani

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

Kabla ya kupeleka, endesha mkaguzi wa usanidi:

npm run doctor

Mkaguzi huchunguza mazingira, kikoa, watoa huduma waliochaguliwa, upangaji wa bidhaa, miunganisho ya rasilimali za Cloudflare, foleni, usanidi wa Cron, majina yanayohitajika ya siri, uhamishaji ambao haujatekelezwa, na alama za TODO(site) ambazo hazijatatuliwa. Tumia --offline wakati ukaguzi wa mbali haupatikani kwa makusudi.

Peleka na endesha jaribio la msingi

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

npm run deploy huendesha ukaguzi wa kabla ya kupeleka kwanza. Baada ya kupeleka, ambatisha kikoa maalum katika Cloudflare na uhakikishe kuwa SITE_URL inalingana kabisa na site.domain. URL za kanoni, ramani ya tovuti, na ukaguzi wa CSRF wa chanzo kilekile hutegemea ulinganifu huo.

Kikoa maalum kinapofanya kazi, weka workers_dev na preview_urls kuwa false. Vinginevyo, Worker ya uzalishaji itaendelea kufikiwa kupitia URL za umma za Cloudflare za maendeleo na matoleo, ikitumia rasilimali zilezile za D1 na R2.

Kamilisha kazi za uzinduzi wa SEO

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

Endesha amri ya IndexNow baada tu ya kusanidi site.seo.indexNowKey. Thibitisha kikoa katika Google Search Console na Bing Webmaster Tools, kisha wasilisha https://<domain>/sitemap.xml.

Vidokezo vya kina

Weka uzalishaji bila mock

Uzalishaji na staging hukataa checkout, uzalishaji, na upakiaji kwa jibu la 503 ikiwa watoa huduma waliochaguliwa bado wamewekwa kuwa mock. Kuingia kwa maendeleo, njia za mock za checkout, na ncha za API za maendeleo hurudisha 404 katika mazingira hayo. Chukulia hili kama utaratibu wa usalama, si mbadala wa kuendesha npm run doctor.

Unganisha masasisho ya templeti badala ya kunakili viraka

Weka kazi mahususi za tovuti katika src/config/site.ts, src/content/*, public/*, seed/, wrangler.jsonc, na jina la kifurushi. Marekebisho yaliyoshirikiwa yafanywe katika templeti na yaunganishwe kwenye kila tovuti.

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

Tumia commit za merge badala ya merge za squash, rebases, au cherry-picks. Mpango wa usawazishaji hutegemea git merge-base HEAD upstream/main. Unaporekodi merge, malizia ujumbe wa commit kwa Template-sync: <template commit sha>.

Dumisha uoanifu wa nyuma wakati wa kupeleka

Ikiwa deployment itashindwa baada ya migrations kutekelezwa, toleo jipya la Worker linaweza kurudishwa, lakini migrations za D1 hazirudishwi kiotomatiki. Weka migrations zioane na toleo la awali la programu ili rollback ibaki inawezekana.

Tumia workflows zilizojumuishwa za Claude Code inapofaa

Hazina hii inajumuisha skill ya new-hot-site kwa kuunda tovuti inayolenga mtindo unaovuma, skill ya sync-upstream kwa kuunganisha mabadiliko ya templeti, na skill ya kusoma pekee ya launch-audit kwa ukaguzi wa kabla ya uzinduzi na wa moja kwa moja. Zana hizi hazibadilishi ukaguzi wa mikono: maudhui yanayozalishwa, midia yenye leseni, vikoa, bidhaa za watoa huduma, mipangilio ya OAuth, usajili wa barua pepe, na sera za mzunguko wa maisha bado vinahitaji kuthibitishwa.

Kagua nyaraka za mradi kabla ya kubadilisha mantiki ya msingi

Angalia AGENTS.md kabla ya kurekebisha credits, utimizaji wa malipo, maudhui ya lugha mbili, migrations, au majaribio ya mwisho hadi mwisho. Maelezo ya ziada yanapatikana katika docs/env.md, docs/payments.md, docs/subscriptions.md, docs/SEO_AUDIT.md, na docs/SAAS_VIDEO_FEATURES.md. README inaeleza kuwa nyaraka hizi kwa sasa zimeandikwa kwa Kichina.

Hitimisho

ShrimpReel hutoa mwanzo mpana wa SaaS ya video ya AI inayolenga maneno muhimu, ikijumuisha foleni za uzalishaji, malipo, credits, usimamizi, uhifadhi, workflows za utii, uchanganuzi, SEO, na uendeshaji wa Cloudflare. Anza na workflow salama ya mock, badilisha kila safu mahususi ya tovuti, badilisha maudhui ya kishikilia nafasi kwa vipengee vyenye leseni, thibitisha mipangilio yote ya watoa huduma na Cloudflare, na peleka tu baada ya mlolongo kamili wa majaribio, doctor, SEO, na jaribio la msingi kupita.