ඔබට නිර්මාණයක් සහ බැක්එන්ඩ් එකක් ඇත, සහ පරිශීලකයින්ට සැබවින්ම පෙනෙන කොටස අවශ්ය වේ. මම Figma තිර React හෝ Next.js ෆ්රන්ට් එන්ඩ් එකක් බවට TypeScript වලින් පරිවර්තනය කරමි, එය දුරකථනයේ සිට ඩෙස්ක්ටොප් දක්වා ප්රතිචාරාත්මක වන අතර, එය ඔබේ API වෙත loading, empty සහ error තත්වයන් හැසිරවීම සමඟ සම්බන්ධ කරමි.
මම ඔබේ React හෝ Next.js ෆ්රන්ට් එන්ඩ් එක Figma නිර්මාණයකින් ගොඩනඟා එය ඔබේ API වෙත සම්බන්ධ කරමි
ඔබේ Figma ගොනුවෙන් එක් තිරයක්, ප්රතිචාරාත්මක, ටයිප් කර ඔබේ API වෙත සම්බන්ධ කර ඇත.
- එක් තිරයක්
- ප්රතිචාරාත්මක නිර්මාණය
- ඔබේ API වෙත සම්බන්ධ කර ඇත
- මූලාශ්ර කේතය
ඔබේ API වෙත සම්බන්ධ කර ඇති තිර 5ක් දක්වා, loading, empty සහ error states සමඟින්.
- 5 තිර දක්වා
- ප්රතිචාරාත්මක නිර්මාණය
- ඔබේ API වෙත සම්බන්ධ කර ඇත
- මූලාශ්ර කේතය
තිර 12ක් දක්වා, ඔබේ auth, shared components සහ tests වලට එරෙහිව login.
- තිර 12ක් දක්වා, login, tests
- ප්රතිචාරාත්මක නිර්මාණය
- ඔබේ API වෙත සම්බන්ධ කර ඇත
- මූලාශ්ර කේතය
අභිරුචි දීමනාවක් ඉල්ලන්න
අභිරුචි දීමනාවක් ඉල්ලීමට පිවිසෙන්න
මෙම Zinner වෙතින් පුද්ගලීකරණය කළ දීමනාවක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපෙර-විකුණුම් ප්රශ්නයක් අසන්න
ප්රශ්නයක් ඇසීමට පිවිසෙන්න
වේදිකා ස්පෑම් අඩු කිරීම සඳහා, පෙර-විකුණුම් පණිවිඩ යැවිය හැක්කේ පිවිසී සිටින පරිශීලකයින්ට පමණි.
මෙම Zinner වෙත සෘජුවම පණිවිඩ යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
මෙම Zinner වෙත පණිවිඩයක් යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
පුද්ගලීකරණය කළ පිරිනැමීමක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නඑක් බැල්මකින්
ඔබට තීරණය කිරීමට උපකාර වන මෙම සේවාව පිළිබඳ ප්රධාන විස්තර. Zinn Hub විසින් ජනනය කරන ලදී, විකුණුම්කරු විසින් නොවේ.
අගය පිහිටීම
තාක්ෂණික තොගය
ප්රතිචාරාත්මක සහ හරස් බ්රවුසර
API ඒකාබද්ධ කිරීම
සහාය කාලය
ඔබට ලැබෙන දේ
සම්පූර්ණ විස්තරය
නිර්මාණය අවසන් කර ඇති අතර API සූදානම් හෝ පාහේ සූදානම්, නමුත් පරිශීලකයින්ට පෙනෙන තිර තවමත් නොපවතී. මම front end එක පමණක් ගොඩනඟමි: ඔබේ backend, auth provider සහ hosting එලෙසම පවතී, සහ කේතය ඔබේ repository වෙත යයි. බෙදාහැරීමෙන් දින 14ක් සඳහා, අපි එකඟ වූ පරිදි ක්රියා නොකරන ඕනෑම දෙයක් මම නොමිලේ නිවැරදි කරමි.
Starter සමඟින් ඔබට ඔබේ Figma ගොනුවෙන් එක් තිරයක් හෝ පිටුවක් ලැබේ, ප්රතිචාරාත්මක සහ ටයිප් කර ඇත, එහි දත්ත ඔබේ API වෙතින් හෝ endpoint එක පවතින තෙක් mock එකකින් පැමිණේ. Standard මඟින් ඔබේ API වෙත සම්බන්ධ කර ඇති තිර පහක් දක්වා ආවරණය කරයි, loading, empty සහ error states සහ validation සහිත forms සමඟින්. Advanced මඟින් තිර දොළහක් දක්වා ඉඩ ලබා දෙන අතර ඔබේ auth provider සමඟ ක්රියා කරන login තිර, යෙදුම පුරා භාවිතා කරන shared components සහ ප්රධාන flows සඳහා tests එකතු කරයි.
මම නිර්මාණය සමීපව අනුගමනය කරමි: spacing, type scale සහ colours Figma ගොනුවෙන් පැමිණේ. තිරයකට ජංගම අනුවාදයක් නොමැති විට, මම එය ගොඩනැගීමට පෙර අනුමාන කරනවාට වඩා එකක් යෝජනා කරමි. App Router සමඟින් Next.js මගේ පෙරනිමියයි; ඔබට server rendering අවශ්ය නොවන විට Vite සමඟින් සරල React හොඳයි. styling සඳහා මම Tailwind CSS හෝ CSS Modules භාවිතා කරමි, ඔබේ ව්යාපෘතියට දැනටමත් ඇති ඕනෑම එකක්.
මම ඩෙස්ක්ටොප් එකේ Chrome, Firefox සහ Edge වලදී සහ සැබෑ Android දුරකථනයක Chrome වලදී ප්රතිඵලය පරීක්ෂා කරමි.
මගේ front-end වැඩ වල පොදු උදාහරණ දෙකක් portfolio එකේ ඇත: filters, cart සහ checkout සහිත Next.js storefront එකක්, සහ මගේම ද්විභාෂා වෙබ් අඩවිය.
මම රැස්වීම් නොමැතිව ලිඛිතව පමණක් වැඩ කරමි. තිර සහ ඒවා පිටුපස ඇති endpoints මම ආරම්භ කිරීමට පෙර ලැයිස්තුගත කර ඇත, පෙරදසුන් සබැඳියක් වැඩ වර්ධනය වන ආකාරය පෙන්වයි, සහ කෙටි ප්රගති සටහනක් සෑම වැඩ කරන දිනකම chat එකට පැමිණේ.
ඔබේ ව්යාපෘතිය සම්පූර්ණ කිරීම සඳහා පියවර
1. තිර ලැයිස්තුව - මම Figma ගොනුව සහ ඔබේ API ලේඛන හරහා ගොස් එක් එක් තිරය, එහි තත්වයන් සහ එය අමතන අවසන් ලක්ෂ්ය ලියා තබමි. කිසිදු කේතයකට පෙර ඔබ ලැයිස්තුව තහවුරු කරයි.
2. මූලික සහ බෙදාගත් කොටස් - ව්යාපෘති සැකසුම හෝ ඔබේ පවතින ගබඩාව, Figma වෙතින් වර්ණ සහ වර්ගය, සහ සෑම තිරයක්ම නැවත භාවිතා කරන පිරිසැලසුම සහ සංරචක.
3. තිර සහ දත්ත - එක් එක් තිරය සැලසුමට අනුව ගොඩනගා ඇති අතර ඔබේ API වෙත සම්බන්ධ කර ඇත, පැටවීම, හිස් සහ දෝෂ තත්වයන් සමඟ. නැතිවූ අවසන් ලක්ෂ්යයකට පහසුවෙන් මාරු කළ හැකි අනුරුවක් ලැබේ.
4. පෙරදසුන් සබැඳිය මත සමාලෝචන වටය - ඔබ ක්ලික් කර එක් ලැයිස්තුවකින් නිවැරදි කිරීම් යවන්න. මම ඒවා නිවැරදි කර නැවත එම සබැඳියම පෙන්වමි.
5. භාරදීම - ඔබේ ගබඩාවේ ඇති කේතය, ව්යුහය සහ එය ක්රියාත්මක කරන ආකාරය පිළිබඳ කෙටි සටහනක්, සහ උසස් මත, එක් එක් නිකුතුවට පෙර ඔබට ධාවනය කළ හැකි පරීක්ෂණ.
Zinner තත්ත්ව සහතිකය
සෑම Zinner කෙනෙකුම වේදිකාවට සම්බන්ධ වීමට පෙර සමාලෝචනය කර අනුමත කරනු ලැබේ.
සියලුම සේවාවන් අපගේ තත්ත්ව සහතික කිරීමේ කැපවීම මගින් සහාය වේ.
ඔබ භාර දුන් කාර්යය අනුමත කරන තෙක් ඔබේ ගෙවීම ආරක්ෂා කර ඇත.
පැකේජ සසඳන්න
| කාර්යය | ආරම්භක | සම්මත | උසස් |
|---|---|---|---|
| භාරදීමේ වේලාව | 4 දින | 9 දින | 18 දින |
| සංශෝධන | 1 | 2 | 3 |
| විෂය පථය | එක් තිරයක් | තිර 5 දක්වා | 12 තිර දක්වා, පිවිසුම, පරීක්ෂණ |
| ප්රතිචාරාත්මක නිර්මාණය | ✓ | ✓ | ✓ |
| ඔබේ API වෙත සම්බන්ධ කර ඇත | ✓ | ✓ | ✓ |
| මූලාශ්ර කේතය | ✓ | ✓ | ✓ |
සාම්පල
මෙම Zinn හා සම්බන්ධ විකුණුම්කරුගේ වැඩ උදාහරණ බලන්න.
පෝට්ෆෝලියෝ
මෙම Zinn ට අදාළ විකුණුම්කරුගේ වැඩ පිළිබඳ උදාහරණ.
ෆෝම්ලයින්: Stripe සමඟ Next.js වෙළඳසැල
ඔබට ක්ලික් කළ හැකි වෙළඳසැලක්: 16 එකතු කිරීම් වල 4 පෝස්ටර්, URL එකේ රැඳී සිටින පෙරහන් සහ සෙවීම්, කරත්තයක්, සැහැල්ලු සහ අඳුරු තේමා, සහ demo ඇණවුමකින් හෝ පරීක්ෂණ මාදිලියේ සැබෑ Stripe Checkout සැසියකින් අවසන් වන පිටවීමක්. මම එය Next.js ස්ථිතික අපනයනයක් ලෙස TypeScript සමඟ Tailwind CSS භාවිතයෙන් ගොඩනඟා ඇත. කාඩ්පත් ගෙවීම් Cloudflare Worker හරහා සිදු වන අතර එය සේවාදායකයේ කරත්තය නැවත මිල කර Stripe හි webhook අත්සන තහවුරු කරයි.
Next.js හි ද්විභාෂා පුද්ගලික වෙබ් අඩවිය
ඉංග්රීසි සහ රුසියානු භාෂාවලින් එක් පිටුවක පුද්ගලික වෙබ් අඩවියක්, සේවා අංශයක් සහ මගේ demo ව්යාපෘති වෙත සබැඳි සමඟින්. මම එය Next.js, React සහ TypeScript සමඟ ස්ථිතික අපනයනයක් ලෙස නිර්මාණය කර ගොඩනඟා ඇත, සරල CSS මොඩියුල සහ UI රාමුවක් නොමැතිව. එයට සැහැල්ලු සහ අඳුරු තේමා ඇති අතර, එක් එක් භාෂාව සඳහා සමාජ පෙරදසුන් රූපයක් ගොඩනැගීමේදී ජනනය වේ. GitHub Actions එය Bunny CDN වෙත ගොඩනඟා යොදවයි, එය ආරක්ෂක ශීර්ෂයන් එක් කරන අතර www සහ සරල HTTP ප්රධාන HTTPS ලිපිනයට හරවා යවයි.
සේවා විස්තර
නිතර අසන ප්රශ්න
ඔව්. මම එක් එක් තිරය සඳහා ජංගම පිරිසැලසුම ගොඩනැගීමට පෙර, ලිඛිතව හෝ ඉක්මන් සටහනක් ලෙස යෝජනා කරමි, එවිට ඔබ එය අවසානයේ සොයා ගැනීම වෙනුවට කල්තියා අනුමත කරයි.
ඔව්. මම දැනටමත් එහි ඇති ෆෝල්ඩර ව්යුහය, නම් කිරීම සහ මෝස්තර අනුගමනය කරමි, එබැවින් නව කේතය එකම රටා භාවිතා කරන අතර ඊළඟ සංවර්ධකයාට මෝස්තර දෙකක් සොයාගත නොහැක.
මම ගොනුවෙන් ඉඩකඩ, ප්රමාණයන් සහ වර්ණ ගලපමි. සැලසුම සහ සැබෑ දත්ත නොගැලපෙන තැන, උදාහරණයක් ලෙස මෝක්අප් එකට වඩා දිගු නමක්, මම එය සලකුණු කර පිරිසැලසුම බිඳ දැමීමට ඉඩ දෙනවාට වඩා නිවැරදි කිරීමක් යෝජනා කරමි.
මෙම සේවාව ඉදිරිපස අන්තය පමණි. Express හෝ NestJS සමඟ Node.js හි බැක්එන්ඩ් එකක් සඳහා, මගේ බැක්එන්ඩ් Zinn බලන්න, නැතහොත් දෙකම ඇණවුම් කරන්න, එවිට මම ඒවා එකට උපුටා දක්වන්නෙමි.
පාරිභෝගික සමාලෝචන
මෙම Zinn ගැන අපගේ පාරිභෝගිකයින් පවසන දේ බලන්න
ප්රවර්ග
Zinner ප්රතිපත්ති
අදාළ Zinns
