നിങ്ങൾക്ക് ഒരു ഡിസൈനും ബാക്കെൻഡും ഉണ്ട്, ഉപയോക്താക്കൾക്ക് യഥാർത്ഥത്തിൽ കാണാൻ കഴിയുന്ന ഭാഗം ആവശ്യമാണ്. ഞാൻ Figma സ്ക്രീനുകളെ ഒരു React അല്ലെങ്കിൽ Next.js ഫ്രണ്ട് എൻഡാക്കി മാറ്റുന്നു, ഫോൺ മുതൽ ഡെസ്ക്ടോപ്പ് വരെ പ്രതികരിക്കുന്ന ടൈപ്പ്സ്ക്രിപ്റ്റിൽ, ലോഡിംഗ്, ശൂന്യമായ, പിശക് അവസ്ഥകൾ കൈകാര്യം ചെയ്തുകൊണ്ട് നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിക്കുന്നു.
നിങ്ങളുടെ Figma ഡിസൈനിൽ നിന്ന് ഞാൻ നിങ്ങളുടെ React അല്ലെങ്കിൽ Next.js ഫ്രണ്ട് എൻഡ് നിർമ്മിക്കുകയും നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിക്കുകയും ചെയ്യും
നിങ്ങളുടെ ഫിഗ്മ ഫയലിൽ നിന്നുള്ള ഒരു സ്ക്രീൻ, റെസ്പോൺസീവ്, ടൈപ്പ് ചെയ്തതും നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ചതും.
- ഒരു സ്ക്രീൻ
- പ്രതികരിക്കുന്ന ഡിസൈൻ
- നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ചു
- സോഴ്സ് കോഡ്
നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ച 5 സ്ക്രീനുകൾ വരെ, ലോഡിംഗ്, ശൂന്യമായ, പിശക് അവസ്ഥകളോടെ.
- 5 സ്ക്രീനുകൾ വരെ
- പ്രതികരിക്കുന്ന ഡിസൈൻ
- നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ചു
- സോഴ്സ് കോഡ്
12 സ്ക്രീനുകൾ വരെ, നിങ്ങളുടെ പ്രാമാണീകരണത്തിനെതിരെ ലോഗിൻ ചെയ്യുക, പങ്കിട്ട ഘടകങ്ങളും ടെസ്റ്റുകളും.
- 12 സ്ക്രീനുകൾ വരെ, ലോഗിൻ, ടെസ്റ്റുകൾ
- പ്രതികരിക്കുന്ന ഡിസൈൻ
- നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ചു
- സോഴ്സ് കോഡ്
ഒരു കസ്റ്റം ഓഫർ അഭ്യർത്ഥിക്കുക
ഈ സിന്നറിൽ നിന്ന് വ്യക്തിഗതമാക്കിയ ഓഫർ അഭ്യർത്ഥിക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രീ-സെയിൽ ചോദ്യം ചോദിക്കുക
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകഒരു ചോദ്യം ചോദിക്കാൻ ലോഗിൻ ചെയ്യുക
പ്ലാറ്റ്ഫോം സ്പാം കുറയ്ക്കുന്നതിന്, പ്രീ-സെയിൽ സന്ദേശങ്ങൾ ലോഗിൻ ചെയ്ത ഉപയോക്താക്കൾക്ക് മാത്രമേ അയയ്ക്കാൻ കഴിയൂ.
ഈ സിന്നറിന് നേരിട്ട് സന്ദേശം അയയ്ക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
ലോഗിൻ ആവശ്യമാണ്
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകലോഗിൻ ആവശ്യമാണ്
ഈ Zinner-ന് സന്ദേശം അയയ്ക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകലോഗിൻ ആവശ്യമാണ്
വ്യക്തിഗതമാക്കിയ ഓഫറിനായി അഭ്യർത്ഥിക്കാൻ ഒരു സൗജന്യ അക്കൗണ്ട് ഉണ്ടാക്കുക അല്ലെങ്കിൽ ലോഗിൻ ചെയ്യുക.
പ്രവേശിക്കുക / രജിസ്റ്റർ ചെയ്യുകഒറ്റനോട്ടത്തിൽ
നിങ്ങൾക്ക് തീരുമാനമെടുക്കാൻ സഹായിക്കുന്ന ഈ സേവനത്തെക്കുറിച്ചുള്ള പ്രധാന വിവരങ്ങൾ. Zinn Hub ആണ് ഇത് ഉണ്ടാക്കിയത്, വിൽപ്പനക്കാരനല്ല.
മൂല്യ സ്ഥാനം
സാങ്കേതിക സ്റ്റാക്ക്
പ്രതികരിക്കുന്നതും ക്രോസ്-ബ്രൗസറും
API സംയോജനം
പിന്തുണ കാലയളവ്
നിങ്ങൾക്ക് എന്ത് ലഭിക്കും
പൂർണ്ണ വിവരണം
ഡിസൈൻ പൂർത്തിയായി, API തയ്യാറാണ് അല്ലെങ്കിൽ ഏകദേശം തയ്യാറാണ്, പക്ഷേ ഉപയോക്താക്കൾ കാണുന്ന സ്ക്രീനുകൾ ഇതുവരെ നിലവിലില്ല. ഞാൻ ഫ്രണ്ട് എൻഡ് മാത്രമേ നിർമ്മിക്കുന്നുള്ളൂ: നിങ്ങളുടെ ബാക്കെൻഡ്, ഓത്ത് പ്രൊവൈഡർ, ഹോസ്റ്റിംഗ് എന്നിവ അതുപോലെ നിലനിൽക്കും, കോഡ് നിങ്ങളുടെ റിപ്പോസിറ്ററിയിലേക്ക് പോകുന്നു. ഡെലിവറി കഴിഞ്ഞ് 14 ദിവസത്തേക്ക്, ഞങ്ങൾ സമ്മതിച്ചതുപോലെ പ്രവർത്തിക്കാത്ത എന്തും ഞാൻ സൗജന്യമായി പരിഹരിക്കുന്നു.
സ്റ്റാർട്ടർ ഉപയോഗിച്ച് നിങ്ങളുടെ ഫിഗ്മ ഫയലിൽ നിന്ന് ഒരു സ്ക്രീൻ അല്ലെങ്കിൽ പേജ് ലഭിക്കുന്നു, റെസ്പോൺസീവ്, ടൈപ്പ് ചെയ്തത്, അതിന്റെ ഡാറ്റ നിങ്ങളുടെ API-യിൽ നിന്നോ അല്ലെങ്കിൽ എൻഡ്പോയിന്റ് നിലവിലില്ലാത്തതുവരെ ഒരു മോക്കിൽ നിന്നോ വരുന്നു. സ്റ്റാൻഡേർഡ് നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ച അഞ്ച് സ്ക്രീനുകൾ വരെ ഉൾക്കൊള്ളുന്നു, ലോഡിംഗ്, ശൂന്യമായ, പിശക് അവസ്ഥകളും വാലിഡേഷനോടുകൂടിയ ഫോമുകളും. അഡ്വാൻസ്ഡ് പന്ത്രണ്ട് സ്ക്രീനുകൾ വരെ അനുവദിക്കുന്നു, കൂടാതെ നിങ്ങളുടെ ഓത്ത് പ്രൊവൈഡറുമായി പ്രവർത്തിക്കുന്ന ലോഗിൻ സ്ക്രീനുകൾ, ആപ്പ് ഉടനീളം ഉപയോഗിക്കുന്ന പങ്കിട്ട ഘടകങ്ങൾ, പ്രധാന ഫ്ലോകൾക്കുള്ള ടെസ്റ്റുകൾ എന്നിവയും ചേർക്കുന്നു.
ഞാൻ ഡിസൈൻ സൂക്ഷ്മമായി പിന്തുടരുന്നു: സ്പേസിംഗ്, ടൈപ്പ് സ്കെയിൽ, നിറങ്ങൾ എന്നിവ ഫിഗ്മ ഫയലിൽ നിന്നാണ് വരുന്നത്. ഒരു സ്ക്രീനിന് മൊബൈൽ പതിപ്പ് ഇല്ലാത്തപ്പോൾ, ഞാൻ ഊഹിക്കുന്നതിന് പകരം അത് നിർമ്മിക്കുന്നതിന് മുമ്പ് ഒന്ന് നിർദ്ദേശിക്കുന്നു. ആപ്പ് റൂട്ടർ ഉള്ള നെക്സ്റ്റ്.ജെഎസ് എന്റെ ഡിഫോൾട്ടാണ്; നിങ്ങൾക്ക് സെർവർ റെൻഡറിംഗ് ആവശ്യമില്ലാത്തപ്പോൾ വൈറ്റ് ഉപയോഗിച്ച് പ്ലെയിൻ റിയാക്ട് നല്ലതാണ്. സ്റ്റൈലിംഗിനായി ഞാൻ Tailwind CSS അല്ലെങ്കിൽ CSS മൊഡ്യൂളുകൾ ഉപയോഗിക്കുന്നു, നിങ്ങളുടെ പ്രോജക്റ്റിന് ഇതിനകം ഉള്ളത് ഏതാണോ അത്.
ഡെസ്ക്ടോപ്പിൽ Chrome, Firefox, Edge എന്നിവയിലും ഒരു യഥാർത്ഥ Android ഫോണിൽ Chrome-ലും ഞാൻ ഫലം പരിശോധിക്കുന്നു.
എന്റെ ഫ്രണ്ട്-എൻഡ് ജോലിയുടെ രണ്ട് പൊതു ഉദാഹരണങ്ങൾ പോർട്ട്ഫോളിയോയിലുണ്ട്: ഫിൽട്ടറുകൾ, ഒരു കാർട്ട്, ഒരു ചെക്ക്ഔട്ട് എന്നിവയുള്ള ഒരു നെക്സ്റ്റ്.ജെഎസ് സ്റ്റോർഫ്രണ്ട്, എന്റെ സ്വന്തം ദ്വിഭാഷാ സൈറ്റ്.
ഞാൻ മീറ്റിംഗുകളില്ലാതെ രേഖാമൂലം മാത്രമേ പ്രവർത്തിക്കൂ. സ്ക്രീനുകളും അവയ്ക്ക് പിന്നിലുള്ള എൻഡ്പോയിന്റുകളും ഞാൻ ആരംഭിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് ചെയ്യുന്നു, ഒരു പ്രിവ്യൂ ലിങ്ക് ജോലി വളരുന്നതിനനുസരിച്ച് കാണിക്കുന്നു, കൂടാതെ ഓരോ പ്രവൃത്തി ദിവസവും ചാറ്റിൽ ഒരു ചെറിയ പുരോഗതി കുറിപ്പ് വരുന്നു.
നിങ്ങളുടെ പ്രോജക്റ്റ് പൂർത്തിയാക്കുന്നതിനുള്ള ഘട്ടങ്ങൾ
1. സ്ക്രീൻ ലിസ്റ്റ് - ഞാൻ Figma ഫയലും നിങ്ങളുടെ API ഡോക്യുമെന്റുകളും പരിശോധിച്ച് ഓരോ സ്ക്രീനും അതിൻ്റെ അവസ്ഥകളും അത് വിളിക്കുന്ന എൻഡ്പോയിൻ്റുകളും എഴുതിയെടുക്കുന്നു. ഏതെങ്കിലും കോഡിന് മുമ്പ് നിങ്ങൾ ലിസ്റ്റ് സ്ഥിരീകരിക്കുന്നു.
2. അടിസ്ഥാനവും പങ്കിട്ട ഭാഗങ്ങളും - പ്രോജക്റ്റ് സജ്ജീകരണം അല്ലെങ്കിൽ നിങ്ങളുടെ നിലവിലുള്ള റിപ്പോസിറ്ററി, Figma-യിൽ നിന്നുള്ള നിറങ്ങളും തരങ്ങളും, ഓരോ സ്ക്രീനും വീണ്ടും ഉപയോഗിക്കുന്ന ലേഔട്ടും ഘടകങ്ങളും.
3. സ്ക്രീനുകളും ഡാറ്റയും - ഓരോ സ്ക്രീനും ഡിസൈൻ അനുസരിച്ച് നിർമ്മിക്കുകയും നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിക്കുകയും ചെയ്യുന്നു, ലോഡിംഗ്, ശൂന്യമായ, പിശക് അവസ്ഥകളോടെ. ഒരു എൻഡ്പോയിൻ്റ് നഷ്ടപ്പെട്ടാൽ എളുപ്പത്തിൽ മാറ്റാൻ കഴിയുന്ന ഒരു മോക്ക് ലഭിക്കും.
4. പ്രിവ്യൂ ലിങ്കിലെ അവലോകന റൗണ്ട് - നിങ്ങൾ ക്ലിക്ക് ചെയ്ത് ഒരു ലിസ്റ്റിൽ തിരുത്തലുകൾ അയയ്ക്കുന്നു. ഞാൻ അവ ശരിയാക്കുകയും അതേ ലിങ്ക് വീണ്ടും കാണിക്കുകയും ചെയ്യുന്നു.
5. കൈമാറ്റം - നിങ്ങളുടെ റിപ്പോസിറ്ററിയിലെ കോഡ്, ഘടനയെക്കുറിച്ചും അത് എങ്ങനെ പ്രവർത്തിപ്പിക്കാമെന്നും ഒരു ചെറിയ കുറിപ്പ്, കൂടാതെ അഡ്വാൻസ്ഡിൽ, ഓരോ റിലീസിനും മുമ്പ് നിങ്ങൾക്ക് പ്രവർത്തിപ്പിക്കാൻ കഴിയുന്ന ടെസ്റ്റുകൾ.
Zinner ഗുണമേന്മ ഉറപ്പ്
ഓരോ Zinner-നെയും പ്ലാറ്റ്ഫോമിൽ ചേരുന്നതിന് മുമ്പ് അവലോകനം ചെയ്യുകയും അംഗീകരിക്കുകയും ചെയ്യുന്നു.
എല്ലാ സേവനങ്ങൾക്കും ഞങ്ങളുടെ ഗുണമേന്മ ഉറപ്പ് പ്രതിബദ്ധതയുടെ പിന്തുണയുണ്ട്.
ഡെലിവർ ചെയ്ത ജോലി നിങ്ങൾ അംഗീകരിക്കുന്നത് വരെ നിങ്ങളുടെ പേയ്മെന്റ് പരിരക്ഷിക്കപ്പെടും.
പാക്കേജുകൾ താരതമ്യം ചെയ്യുക
| ഫംഗ്ഷൻ | തുടക്കക്കാരൻ | സ്റ്റാൻഡേർഡ് | വിപുലമായത് |
|---|---|---|---|
| ഡെലിവറി സമയം | 4 ദിവസങ്ങൾ | 9 ദിവസങ്ങൾ | 18 ദിവസങ്ങൾ |
| പുനരവലോകനങ്ങൾ | 1 | 2 | 3 |
| വ്യാപ്തി | ഒരു സ്ക്രീൻ | 5 സ്ക്രീനുകൾ വരെ | 12 സ്ക്രീനുകൾ വരെ, ലോഗിൻ, ടെസ്റ്റുകൾ |
| പ്രതികരിക്കുന്ന ഡിസൈൻ | ✓ | ✓ | ✓ |
| നിങ്ങളുടെ API-യുമായി ബന്ധിപ്പിച്ചു | ✓ | ✓ | ✓ |
| സോഴ്സ് കോഡ് | ✓ | ✓ | ✓ |
സാമ്പിളുകൾ
ഈ Zinn-മായി ബന്ധപ്പെട്ട വിൽപ്പനക്കാരന്റെ ജോലിയുടെ ഉദാഹരണങ്ങൾ കാണുക.
പോർട്ട്ഫോളിയോ
ഈ Zinn-മായി ബന്ധപ്പെട്ട വിൽപ്പനക്കാരന്റെ ജോലിയുടെ ഉദാഹരണങ്ങൾ.
ഫോംലൈൻ: സ്ട്രൈപ്പ് ഉള്ള Next.js സ്റ്റോർ
നിങ്ങൾക്ക് ക്ലിക്ക് ചെയ്യാൻ കഴിയുന്ന ഒരു സ്റ്റോർഫ്രണ്ട്: 16 പോസ്റ്ററുകൾ 4 ശേഖരങ്ങളിൽ, URL-ൽ തുടരുന്ന ഫിൽട്ടറുകളും തിരയലും, ഒരു കാർട്ട്, ലൈറ്റ്, ഡാർക്ക് തീമുകൾ, ഒരു ഡെമോ ഓർഡറിലോ ടെസ്റ്റ് മോഡിൽ ഒരു യഥാർത്ഥ സ്ട്രൈപ്പ് ചെക്ക്ഔട്ട് സെഷനിലോ അവസാനിക്കുന്ന ഒരു ചെക്ക്ഔട്ട്. ഞാൻ ഇത് Next.js സ്റ്റാറ്റിക് എക്സ്പോർട്ടായി ടൈപ്പ്സ്ക്രിപ്റ്റിൽ ടെയിൽവിൻഡ് CSS ഉപയോഗിച്ച് നിർമ്മിച്ചു. കാർഡ് പേയ്മെന്റുകൾ ഒരു ക്ലൗഡ്ഫ്ലെയർ വർക്കറിലൂടെയാണ് നടക്കുന്നത്, അത് സെർവറിൽ കാർട്ടിന്റെ വില പുനർനിർണ്ണയിക്കുകയും സ്ട്രൈപ്പിന്റെ വെബ്ഹുക്ക് സിഗ്നേച്ചർ പരിശോധിക്കുകയും ചെയ്യുന്നു.
Next.js-ലെ ദ്വിഭാഷാ വ്യക്തിഗത സൈറ്റ്
ഇംഗ്ലീഷിലും റഷ്യനിലും ഒരു പേജുള്ള ഒരു വ്യക്തിഗത സൈറ്റ്, ഒരു സേവന വിഭാഗവും എന്റെ ഡെമോ പ്രോജക്റ്റുകളിലേക്കുള്ള ലിങ്കുകളും സഹിതം. ഞാൻ ഇത് Next.js, React, TypeScript എന്നിവ ഉപയോഗിച്ച് ഒരു സ്റ്റാറ്റിക് എക്സ്പോർട്ടായി രൂപകൽപ്പന ചെയ്യുകയും നിർമ്മിക്കുകയും ചെയ്തു, പ്ലെയിൻ CSS മൊഡ്യൂളുകൾ ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്തു, UI ഫ്രെയിംവർക്ക് ഇല്ല. ഇതിന് ലൈറ്റ്, ഡാർക്ക് തീമുകൾ ഉണ്ട്, ഓരോ ഭാഷയ്ക്കും ഒരു സോഷ്യൽ പ്രിവ്യൂ ചിത്രം ബിൽഡ് സമയത്ത് ജനറേറ്റ് ചെയ്യുന്നു. GitHub Actions ഇത് നിർമ്മിച്ച് Bunny CDN-ലേക്ക് വിന്യസിക്കുന്നു, ഇത് സുരക്ഷാ ഹെഡറുകൾ ചേർക്കുകയും www, പ്ലെയിൻ HTTP എന്നിവ പ്രധാന HTTPS വിലാസത്തിലേക്ക് റീഡയറക്ട് ചെയ്യുകയും ചെയ്യുന്നു.
സേവന വിശദാംശങ്ങൾ
പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ
അതെ. ഓരോ സ്ക്രീനിനും വേണ്ടിയുള്ള മൊബൈൽ ലേഔട്ട് നിർമ്മിക്കുന്നതിന് മുമ്പ് ഞാൻ രേഖാമൂലമോ ഒരു ലഘുചിത്രമായോ നിർദ്ദേശിക്കുന്നു, അതിനാൽ നിങ്ങൾ അവസാനം കണ്ടെത്താതെ മുൻകൂട്ടി അംഗീകരിക്കുന്നു.
അതെ. ഞാൻ നിലവിലുള്ള ഫോൾഡർ ഘടനയും പേരും സ്റ്റൈലിംഗും പിന്തുടരുന്നു, അതിനാൽ പുതിയ കോഡ് അതേ പാറ്റേണുകൾ ഉപയോഗിക്കുകയും അടുത്ത ഡെവലപ്പർക്ക് രണ്ട് സ്റ്റൈലുകൾ കണ്ടെത്തേണ്ടി വരികയുമില്ല.
ഫയലിൽ നിന്നുള്ള സ്പേസിംഗ്, വലുപ്പങ്ങൾ, നിറങ്ങൾ എന്നിവ ഞാൻ പൊരുത്തപ്പെടുത്തുന്നു. ഡിസൈനും യഥാർത്ഥ ഡാറ്റയും തമ്മിൽ വിയോജിപ്പുള്ളിടത്ത്, മോക്കപ്പിനേക്കാൾ നീളമുള്ള ഒരു പേര് പോലെ, ലേഔട്ട് തകരാൻ അനുവദിക്കുന്നതിന് പകരം ഞാൻ അത് അടയാളപ്പെടുത്തുകയും ഒരു പരിഹാരം നിർദ്ദേശിക്കുകയും ചെയ്യുന്നു.
ഈ സേവനം ഫ്രണ്ട് എൻഡ് മാത്രമാണ്. എക്സ്പ്രസ് അല്ലെങ്കിൽ നെസ്റ്റ്ജെഎസ് ഉള്ള Node.js-ലെ ഒരു ബാക്കെൻഡിനായി, എൻ്റെ ബാക്കെൻഡ് Zinn കാണുക, അല്ലെങ്കിൽ രണ്ടും ഓർഡർ ചെയ്യുക, ഞാൻ അവ ഒരുമിച്ച് ഉദ്ധരിക്കും.
ഉപഭോക്തൃ അവലോകനങ്ങൾ
ഈ Zinn-നെക്കുറിച്ച് ഞങ്ങളുടെ ഉപഭോക്താക്കൾ എന്താണ് പറയുന്നതെന്ന് കാണുക
വിഭാഗങ്ങൾ
Zinner നയങ്ങൾ
ബന്ധപ്പെട്ട Zinns
റിയാക്റ്റ് ജെഎസ്, നെക്സ്റ്റ് ജെഎസ്, ഫയർബേസ്, MERN സ്റ്റാക്ക് ഡെവലപ്പർ സേവനങ്ങൾ
Next.js, React.js, Node.js, Firebase എന്നിവയിൽ നിങ്ങളുടെ ഡെവലപ്പർ ആകുക
NextJS ReactJS MongoDB Firebase TypeScript ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷൻ വികസിപ്പിക്കുക
