သင့်တွင် ဒီဇိုင်းနှင့် backend ရှိပြီး သုံးစွဲသူများ အမှန်တကယ်မြင်ရမည့် အပိုင်းကို လိုအပ်ပါသည်။ ကျွန်ုပ်သည် Figma မျက်နှာပြင်များကို TypeScript တွင် React သို့မဟုတ် Next.js front end အဖြစ် ပြောင်းလဲပေးပြီး ဖုန်းမှ desktop အထိ တုံ့ပြန်မှုရှိစေကာ loading, empty နှင့် error အခြေအနေများကို ကိုင်တွယ်၍ သင်၏ API နှင့် ချိတ်ဆက်ပေးပါမည်။
ကျွန်ုပ်သည် သင်၏ React သို့မဟုတ် Next.js front end ကို Figma ဒီဇိုင်းမှ တည်ဆောက်ပြီး သင်၏ API နှင့် ချိတ်ဆက်ပေးပါမည်။
သင်၏ Figma ဖိုင်မှ မျက်နှာပြင်တစ်ခု၊ တုံ့ပြန်မှုရှိသော၊ ရိုက်နှိပ်ထားပြီး သင်၏ API နှင့် ချိတ်ဆက်ထားသည်။
- မျက်နှာပြင်တစ်ခု
- တုံ့ပြန်မှုရှိသော ဒီဇိုင်း
- သင်၏ API နှင့် ချိတ်ဆက်ထားသည်။
- ရင်းမြစ်ကုဒ်
သင်၏ API နှင့် ချိတ်ဆက်ထားသော မျက်နှာပြင် 5 ခုအထိ၊ loading, empty နှင့် error အခြေအနေများဖြင့်။
- 5 မျက်နှာပြင်အထိ
- တုံ့ပြန်မှုရှိသော ဒီဇိုင်း
- သင်၏ API နှင့် ချိတ်ဆက်ထားသည်။
- ရင်းမြစ်ကုဒ်
မျက်နှာပြင် 12 ခုအထိ၊ သင်၏ auth နှင့် login လုပ်ခြင်း၊ မျှဝေထားသော အစိတ်အပိုင်းများနှင့် စမ်းသပ်မှုများ။
- မျက်နှာပြင် 12 ခုအထိ၊ login၊ စမ်းသပ်မှုများ
- တုံ့ပြန်မှုရှိသော ဒီဇိုင်း
- သင်၏ API နှင့် ချိတ်ဆက်ထားသည်။
- ရင်းမြစ်ကုဒ်
စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုပါ
စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုရန် ဝင်ရောက်ပါ
ဤ Zinner ထံမှ စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ရောင်းချမှုမတိုင်မီ မေးခွန်းမေးပါ
မေးခွန်းမေးရန် ဝင်ရောက်ပါ
ပလက်ဖောင်းပေါ်ရှိ spam များကို လျှော့ချရန်အတွက် ရောင်းချမှုမတိုင်မီ မက်ဆေ့ချ်များကို ဝင်ရောက်ထားသော အသုံးပြုသူများသာ ပေးပို့နိုင်ပါသည်။
ဤ Zinner ကို တိုက်ရိုက်မက်ဆေ့ချ်ပို့ရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ဝင်ရောက်ရန် လိုအပ်သည်
Zinner ကို မက်ဆေ့ချ်ပို့ရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ဝင်ရောက်ရန် လိုအပ်သည်
ကိုယ်ပိုင်ကမ်းလှမ်းချက်တစ်ခု တောင်းဆိုရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်အကျဉ်းချုပ်
သင့်ဆုံးဖြတ်ချက်ချရာတွင် အထောက်အကူဖြစ်စေရန် ဤဝန်ဆောင်မှုနှင့်ပတ်သက်သော အဓိကအချက်အလက်များ။ Zinn Hub မှ ထုတ်ပေးသည်၊ ရောင်းသူမှ မဟုတ်ပါ။
တန်ဖိုးနေရာ
နည်းပညာ Stack
တုံ့ပြန်မှုရှိပြီး ဘရောက်ဆာမျိုးစုံတွင် အလုပ်လုပ်နိုင်ခြင်း
API ပေါင်းစည်းမှု
ပံ့ပိုးမှုကာလ
သင်ရရှိမည့်အရာ
အပြည့်အစုံဖော်ပြချက်
ဒီဇိုင်းပြီးစီးပြီး API အဆင်သင့်ဖြစ်နေပြီ သို့မဟုတ် နီးပါးအဆင်သင့်ဖြစ်နေပြီ၊ သို့သော် အသုံးပြုသူများ မြင်တွေ့ရမည့် မျက်နှာပြင်များ မရှိသေးပါ။ ကျွန်ုပ်သည် front end ကိုသာ တည်ဆောက်သည်- သင်၏ backend၊ auth provider နှင့် hosting တို့သည် ရှိရင်းစွဲအတိုင်း ရှိနေမည်ဖြစ်ပြီး၊ code သည် သင်၏ repository သို့ ရောက်ရှိသွားမည်ဖြစ်သည်။ ပို့ဆောင်ပြီးနောက် 14 ရက်အတွင်း၊ ကျွန်ုပ်တို့ သဘောတူထားသည့်အတိုင်း အလုပ်မလုပ်သော မည်သည့်အရာကိုမဆို အခမဲ့ ပြင်ဆင်ပေးပါသည်။
Starter ဖြင့် သင်သည် သင်၏ Figma ဖိုင်မှ မျက်နှာပြင်တစ်ခု သို့မဟုတ် စာမျက်နှာတစ်ခုကို ရရှိမည်ဖြစ်ပြီး၊ တုံ့ပြန်မှုရှိပြီး ရိုက်နှိပ်ထားကာ ၎င်း၏ဒေတာသည် သင်၏ API မှ သို့မဟုတ် endpoint မရှိသေးမီအထိ mock မှ လာမည်ဖြစ်သည်။ Standard သည် သင်၏ API နှင့် ချိတ်ဆက်ထားသော မျက်နှာပြင်ငါးခုအထိ ပါဝင်ပြီး loading, empty နှင့် error အခြေအနေများနှင့် validation ပါသော form များ ပါဝင်သည်။ Advanced သည် မျက်နှာပြင်ဆယ့်နှစ်ခုအထိ ခွင့်ပြုပြီး သင်၏ auth provider နှင့် အလုပ်လုပ်သော login မျက်နှာပြင်များ၊ အက်ပ်တစ်လျှောက် အသုံးပြုသော မျှဝေထားသော အစိတ်အပိုင်းများနှင့် အဓိကစီးဆင်းမှုများအတွက် စမ်းသပ်မှုများကို ထည့်သွင်းပေးသည်။
ကျွန်ုပ်သည် ဒီဇိုင်းကို အနီးကပ် လိုက်နာသည်- နေရာလွတ်များ၊ type scale နှင့် အရောင်များသည် Figma ဖိုင်မှ လာသည်။ မျက်နှာပြင်တစ်ခုတွင် မိုဘိုင်းဗားရှင်းမရှိသည့်အခါ၊ ကျွန်ုပ်သည် ခန့်မှန်းခြင်းထက် မတည်ဆောက်မီ တစ်ခုကို အဆိုပြုသည်။ App Router ပါသော Next.js သည် ကျွန်ုပ်၏ မူရင်းဖြစ်သည်; server rendering မလိုအပ်သည့်အခါ Vite ပါသော plain React သည် ကောင်းမွန်သည်။ styling အတွက် ကျွန်ုပ်သည် Tailwind CSS သို့မဟုတ် CSS Modules ကို အသုံးပြုသည်၊ သင်၏ ပရောဂျက်တွင် ရှိပြီးသား မည်သည့်အရာကိုမဆို အသုံးပြုသည်။
ကျွန်ုပ်သည် ရလဒ်ကို desktop ပေါ်ရှိ Chrome, Firefox နှင့် Edge တို့တွင် စစ်ဆေးပြီး၊ စစ်မှန်သော Android ဖုန်းပေါ်ရှိ Chrome တွင် စစ်ဆေးသည်။
ကျွန်ုပ်၏ front-end လုပ်ငန်း၏ အများပြည်သူဆိုင်ရာ ဥပမာနှစ်ခုကို portfolio တွင် တွေ့နိုင်သည်- filter များ၊ cart နှင့် checkout ပါသော Next.js storefront တစ်ခုနှင့် ကျွန်ုပ်၏ ကိုယ်ပိုင် ဘာသာစကားနှစ်မျိုးသုံး site တစ်ခု။
ကျွန်ုပ်သည် အစည်းအဝေးများမရှိဘဲ စာဖြင့်သာ အလုပ်လုပ်သည်။ မျက်နှာပြင်များနှင့် ၎င်းတို့နောက်ကွယ်ရှိ endpoint များကို ကျွန်ုပ်မစတင်မီ စာရင်းပြုစုထားပြီး၊ preview link သည် လုပ်ငန်းကို ကြီးထွားလာသည်နှင့်အမျှ ပြသပြီး၊ အတိုချုပ် တိုးတက်မှုမှတ်စုတစ်ခုသည် အလုပ်လုပ်ရက်တိုင်း chat တွင် ရောက်ရှိလာသည်။
သင်၏ပရောဂျက်ကို အပြီးသတ်ရန် အဆင့်များ
1. မျက်နှာပြင်စာရင်း - ကျွန်ုပ်သည် Figma ဖိုင်နှင့် သင်၏ API စာရွက်စာတမ်းများကို ကြည့်ရှုပြီး မျက်နှာပြင်တစ်ခုစီ၊ ၎င်း၏အခြေအနေများနှင့် ၎င်းခေါ်ဆိုသည့် အဆုံးမှတ်များကို ရေးမှတ်ထားပါသည်။ ကုဒ်မရေးမီ သင်သည် စာရင်းကို အတည်ပြုပါသည်။
2. အခြေခံနှင့် မျှဝေထားသော အစိတ်အပိုင်းများ - ပရောဂျက်တည်ဆောက်မှု သို့မဟုတ် သင်၏ရှိပြီးသား repository၊ Figma မှ အရောင်များနှင့် အမျိုးအစား၊ မျက်နှာပြင်တိုင်း ပြန်လည်အသုံးပြုသည့် layout နှင့် components များ။
3. မျက်နှာပြင်များနှင့် ဒေတာ - မျက်နှာပြင်တစ်ခုစီကို ဒီဇိုင်းအတိုင်း တည်ဆောက်ထားပြီး သင်၏ API နှင့် ချိတ်ဆက်ထားကာ loading၊ empty နှင့် error states များပါဝင်သည်။ ပျောက်ဆုံးနေသော အဆုံးမှတ်တစ်ခုသည် အလွယ်တကူ လဲလှယ်နိုင်သော mock တစ်ခုကို ရရှိသည်။
4. ကြိုတင်ကြည့်ရှုလင့်ခ်ပေါ်တွင် ပြန်လည်သုံးသပ်ခြင်း - သင်သည် နှိပ်ပြီး ပြင်ဆင်မှုများကို စာရင်းတစ်ခုတည်းတွင် ပေးပို့ပါ။ ကျွန်ုပ်သည် ၎င်းတို့ကို ပြင်ဆင်ပြီး တူညီသောလင့်ခ်ကို ထပ်မံပြသပါသည်။
5. လွှဲပြောင်းခြင်း - သင်၏ repository ရှိ ကုဒ်၊ ဖွဲ့စည်းပုံနှင့် မည်သို့ run ရမည်ကို အတိုချုပ်မှတ်စု၊ နှင့် Advanced တွင် ထုတ်ပြန်မှုတစ်ခုစီမတိုင်မီ သင် run နိုင်သော စမ်းသပ်မှုများ။
Zinner အရည်အသွေး အာမခံချက်
တစ်ခုချင်းစီ Zinner သည် ပလက်ဖောင်းသို့ ပေါင်းစည်းမီ သုံးသပ်ခြင်းနှင့် အတည်ပြုခြင်းခံရသည်။
အားလုံးသော ဝန်ဆောင်မှုများသည် ကျွန်ုပ်တို့၏ အရည်အသွေး အာမခံ ကတိဖြင့် ကျောင်းဆောင်ထားသည်။
သင်၏ ငွေပေးချေမှုသည် သင် ပို့ဆောင်ထားသော အလုပ်ကို အတည်ပြုသည်အထိ ကာကွယ်ထားသည်။
ပက်ကေ့ချ်များ နှိုင်းယှဉ်ကြည့်ပါ
| လုပ်ဆောင်ချက် | စတင်သူ | စံ | အဆင့်မြင့် |
|---|---|---|---|
| ပေးပို့ချိန် | 4 ရက် | 9 ရက် | 18 ရက် |
| ပြန်လည်ပြင်ဆင်မှုများ | 1 | 2 | 3 |
| အတိုင်းအတာ | မျက်နှာပြင်တစ်ခု | 5 မျက်နှာပြင်အထိ | 12 မျက်နှာပြင်များအထိ၊ လော့ဂ်အင်၊ စမ်းသပ်မှုများ |
| တုံ့ပြန်မှုရှိသော ဒီဇိုင်း | ✓ | ✓ | ✓ |
| သင်၏ API နှင့် ချိတ်ဆက်ထားသည် | ✓ | ✓ | ✓ |
| ရင်းမြစ်ကုဒ် | ✓ | ✓ | ✓ |
နမူနာများ
ဤ Zinn နှင့်ပတ်သက်သော ရောင်းသူ၏လုပ်ငန်းနမူနာများကို ကြည့်ပါ။
အစုစု
ဤ Zinn နှင့် သက်ဆိုင်သည့် ရောင်းချသူ၏ လုပ်ငန်းဆောင်ရွက်မှု ဥပမာများ
Formline: Stripe ပါသော Next.js စတိုး
သင်နှိပ်နိုင်သော စတိုးဆိုင်တစ်ခု- 4 စုဆောင်းမှုများတွင် 16 ပိုစတာများ၊ URL တွင်ရှိနေသော စစ်ထုတ်မှုများနှင့် ရှာဖွေမှုများ၊ တွန်းလှည်းတစ်ခု၊ အလင်းနှင့် အမှောင် အပြင်အဆင်များ၊ နှင့် သရုပ်ပြမှာယူမှု သို့မဟုတ် စမ်းသပ်မုဒ်တွင် အမှန်တကယ် Stripe Checkout session ဖြင့် အဆုံးသတ်သည့် ငွေရှင်းခြင်း။ ကျွန်ုပ်သည် ၎င်းကို Next.js static export အဖြစ် TypeScript ဖြင့် Tailwind CSS ဖြင့် တည်ဆောက်ခဲ့သည်။ ကတ်ငွေပေးချေမှုများသည် ဆာဗာပေါ်ရှိ တွန်းလှည်းကို ပြန်လည်စျေးနှုန်းသတ်မှတ်ပြီး Stripe ၏ webhook လက်မှတ်ကို အတည်ပြုသည့် Cloudflare Worker မှတစ်ဆင့် သွားပါသည်။
Next.js တွင် နှစ်ဘာသာ ကိုယ်ပိုင်ဆိုက်
အင်္ဂလိပ်နှင့် ရုရှားဘာသာဖြင့် တစ်မျက်နှာတည်းရှိသော ကိုယ်ပိုင်ဆိုက်၊ ဝန်ဆောင်မှုကဏ္ဍနှင့် ကျွန်ုပ်၏ သရုပ်ပြပရောဂျက်များသို့ လင့်ခ်များပါရှိသည်။ ကျွန်ုပ်သည် ၎င်းကို Next.js၊ React နှင့် TypeScript ဖြင့် static export အဖြစ် ဒီဇိုင်းဆွဲပြီး တည်ဆောက်ခဲ့ပြီး၊ သာမန် CSS Modules ဖြင့် ပုံစံထုတ်ထားပြီး UI framework မပါဝင်ပါ။ ၎င်းတွင် အလင်းနှင့် အမှောင် အပြင်အဆင်များပါရှိပြီး ဘာသာစကားတစ်ခုစီအတွက် လူမှုရေးဆိုင်ရာ ကြိုတင်ကြည့်ရှုမှုပုံကို build time တွင် ထုတ်ပေးပါသည်။ GitHub Actions သည် ၎င်းကို Bunny CDN သို့ တည်ဆောက်ပြီး ဖြန့်ကျက်ပြီး၊ ၎င်းသည် လုံခြုံရေးခေါင်းစီးများကို ထည့်သွင်းကာ www နှင့် သာမန် HTTP ကို အဓိက HTTPS လိပ်စာသို့ ပြန်ညွှန်းပေးပါသည်။
ဝန်ဆောင်မှု အသေးစိတ်
မကြေးမုံရဲ့ မေးခွန်းများ
ဟုတ်ကဲ့။ ကျွန်ုပ်သည် မျက်နှာပြင်တစ်ခုစီအတွက် မိုဘိုင်း layout ကို မတည်ဆောက်မီ စာဖြင့် သို့မဟုတ် အမြန်ပုံကြမ်းဖြင့် အဆိုပြုထားသောကြောင့် သင်သည် အဆုံးတွင် ရှာဖွေတွေ့ရှိမည့်အစား ကြိုတင်အတည်ပြုနိုင်ပါသည်။
ဟုတ်ကဲ့။ ကျွန်ုပ်သည် ရှိပြီးသား folder structure၊ naming နှင့် styling များကို လိုက်နာသောကြောင့် ကုဒ်အသစ်သည် တူညီသော ပုံစံများကို အသုံးပြုပြီး နောက် developer သည် ပုံစံနှစ်မျိုးကို ရှာမတွေ့ပါ။
ကျွန်ုပ်သည် ဖိုင်မှ spacing၊ sizes နှင့် colours များကို ကိုက်ညီအောင် ပြုလုပ်ပါသည်။ ဒီဇိုင်းနှင့် တကယ့်ဒေတာ မကိုက်ညီသည့်နေရာများ၊ ဥပမာ mockup ထက် ပိုရှည်သော အမည်ကဲ့သို့သော နေရာများတွင် layout မပျက်စီးစေရန် ကျွန်ုပ်သည် ၎င်းကို အလံပြပြီး ပြင်ဆင်ရန် အကြံပြုပါသည်။
ဤဝန်ဆောင်မှုသည် front end သာဖြစ်သည်။ Express သို့မဟုတ် NestJS ပါသော Node.js တွင် backend အတွက် ကျွန်ုပ်၏ backend Zinn ကို ကြည့်ပါ၊ သို့မဟုတ် နှစ်ခုလုံးကို မှာယူပါက ကျွန်ုပ်သည် ၎င်းတို့ကို အတူတကွ ကိုးကားပေးပါမည်။
ဖောက်သည်များ၏ သုံးသပ်ချက်များ
ကျွန်ုပ်တို့၏ ဖောက်သည်များက Zinn အကြောင်း ဘာတွေ ပြောတွေ့ကြည့်ပါ
အမျိုးအစားများ
Zinner မူဝါဒများ
ဆက်စပ်သော Zinns
Next.js, React, Firebase & Node.js ကို အသုံးပြု၍ ပရော်ဖက်ရှင်နယ် ဝဘ်အပလီကေးရှင်းများ ဖန်တီးပါ။
Firebase & AI ပေါင်းစပ်မှုဖြင့် ပရော်ဖက်ရှင်နယ် React Frontend ဖွံ့ဖြိုးတိုးတက်မှု
joomla အလုပ်နှင့် joomla extension များကို ဘတ်ဂျက်ဖြင့် လုပ်ဆောင်ပေးပါသလား။
