Sizda dizayn va backend bor, va foydalanuvchilar haqiqatda ko'radigan qism kerak. Men Figma ekranlarini TypeScript-da React yoki Next.js front-endiga aylantiraman, telefondan tortib ish stoligacha moslashuvchan qilib, va uni yuklash, bo'sh va xato holatlari bilan API-ingizga ulayman.
Men sizning React yoki Next.js front-endingizni Figma dizaynidan yarataman va uni API-ingizga ulayman
Figma faylingizdan bitta ekran, moslashuvchan, terilgan va API-ingizga ulangan.
- Bitta ekran
- Moslashuvchan dizayn
- API-ingizga ulangan
- Manba kodi
API-ingizga ulangan 5 tagacha ekran, yuklanish, boʻsh va xato holatlari bilan.
- 5 ekranlargacha
- Moslashuvchan dizayn
- API-ingizga ulangan
- Manba kodi
12 tagacha ekran, avtorizatsiyangizga kirish, umumiy komponentlar va testlar.
- 12 tagacha ekran, kirish, testlar
- Moslashuvchan dizayn
- API-ingizga ulangan
- Manba kodi
Maxsus taklif so'rash
Maxsus taklif so'rash uchun tizimga kiring
Ushbu Zinnerdan shaxsiylashtirilgan taklif so'rash uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishSotishdan oldingi savol bering
Savol berish uchun tizimga kiring
Platforma spamini kamaytirish uchun sotishdan oldingi xabarlar faqat tizimga kirgan foydalanuvchilar tomonidan yuborilishi mumkin.
Ushbu Zinnerga to'g'ridan-to'g'ri xabar yuborish uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Ushbu Zinnerga xabar yuborish uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Shaxsiylashtirilgan taklifni so'rash uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishBir qarashda
Qaror qabul qilishingizga yordam beradigan ushbu xizmat haqida asosiy ma'lumotlar. Zinn Hub tomonidan yaratilgan, sotuvchi tomonidan emas.
Qiymat pozitsiyasi
Texnologiya toʻplami
Moslashuvchan va brauzerlararo
API integratsiyasi
Qo'llab-quvvatlash muddati
Siz nima olasiz
To'liq tavsif
Dizayn tugallangan va API tayyor yoki deyarli tayyor, ammo foydalanuvchilar koʻradigan ekranlar hali mavjud emas. Men faqat front-endni quraman: sizning backend, avtorizatsiya provayderingiz va hostingingiz oʻzgarishsiz qoladi va kod sizning omboringizga tushadi. Yetkazib berishdan keyin 14 kun davomida biz kelishganimizdek ishlamaydigan har qanday narsani bepul tuzataman.
Starter bilan siz Figma faylingizdan bitta ekran yoki sahifani olasiz, moslashuvchan va terilgan, uning maʼlumotlari API-ingizdan yoki tugatish nuqtasi mavjud boʻlmaguncha mockdan keladi. Standard API-ingizga ulangan beshtagacha ekranni, yuklanish, boʻsh va xato holatlari va validatsiyali shakllarni qamrab oladi. Advanced oʻn ikkitagacha ekranga ruxsat beradi va avtorizatsiya provayderingiz bilan ishlaydigan kirish ekranlarini, ilova boʻylab ishlatiladigan umumiy komponentlarni va asosiy oqimlar uchun testlarni qoʻshadi.
Men dizaynni diqqat bilan kuzataman: boʻshliqlar, shrift oʻlchami va ranglar Figma faylidan olinadi. Agar ekranda mobil versiya boʻlmasa, men uni qurishdan oldin taxmin qilish oʻrniga taklif qilaman. App Router bilan Next.js mening standartim; server renderlash kerak boʻlmaganda Vite bilan oddiy React yaxshi. Stil berish uchun men Tailwind CSS yoki CSS Modullardan foydalanaman, loyihangizda qaysi biri mavjud boʻlsa.
Natijani ish stolida Chrome, Firefox va Edge-da, shuningdek, haqiqiy Android telefonida Chrome-da tekshiraman.
Mening front-end ishimning ikkita ochiq misoli portfelda: filtrlar, savat va toʻlov bilan Next.js doʻkoni va mening ikki tilli saytim.
Men faqat yozma ravishda ishlayman, uchrashuvlarsiz. Ekranlar va ularning ortidagi tugatish nuqtalari men boshlashdan oldin roʻyxatga olinadi, oldindan koʻrish havolasi ishni oʻsib borishi bilan koʻrsatadi va har ish kunida chatda qisqa progress eslatmasi keladi.
Loyihangizni yakunlash bosqichlari
1. Ekranlar roʻyxati - Men Figma faylini va API hujjatlaringizni koʻrib chiqaman va har bir ekranni, uning holatlarini va u chaqiradigan tugatish nuqtalarini yozib olaman. Har qanday koddan oldin siz roʻyxatni tasdiqlaysiz.
2. Asosiy va umumiy qismlar - Loyiha sozlamalari yoki mavjud omboringiz, Figmadan ranglar va shriftlar, shuningdek, har bir ekran qayta ishlatadigan maket va komponentlar.
3. Ekranlar va maʼlumotlar - Har bir ekran dizaynga muvofiq quriladi va API-ingizga ulanadi, yuklanish, boʻsh va xato holatlari bilan. Yetishmayotgan tugatish nuqtasi almashtirish oson boʻlgan mockni oladi.
4. Oldindan koʻrish havolasida koʻrib chiqish bosqichi - Siz bosib oʻtasiz va tuzatishlarni bitta roʻyxatda yuborasiz. Men ularni tuzataman va xuddi shu havolani yana koʻrsataman.
5. Topshirish - Sizning omboringizdagi kod, tuzilishi va uni qanday ishga tushirish haqida qisqa eslatma, shuningdek, Advanced-da, har bir relizdan oldin ishga tushirishingiz mumkin boʻlgan testlar.
Zinner Sifat Kafolati
Har bir Zinner platformaga qo'shilishdan oldin ko'rib chiqiladi va tasdiqlanadi.
Barcha xizmatlar sifatni ta'minlash bo'yicha majburiyatimiz bilan qo'llab-quvvatlanadi.
Siz yetkazib berilgan ishni tasdiqlamaguningizcha toʻlovingiz himoyalangan.
Paketlarni solishtirish
| Funksiya | Boshlang'ich | Standart | Kengaytirilgan |
|---|---|---|---|
| Yetkazib berish muddati | 4 kun | 9 kun | 18 kun |
| Tuzatishlar | 1 | 2 | 3 |
| Doira | Bitta ekran | 5 tagacha ekranlar | 12 tagacha ekran, kirish, testlar |
| Moslashuvchan dizayn | ✓ | ✓ | ✓ |
| API-ingizga ulangan | ✓ | ✓ | ✓ |
| Manba kodi | ✓ | ✓ | ✓ |
Namunalar
Sotuvchining ushbu Zinn bilan bog'liq ish namunalarini ko'rish.
Portfolio
Sotuvchining ushbu Zinn bilan bog'liq ishlariga misollar.
Formline: Stripe bilan Next.js do'koni
Siz bosib o'tishingiz mumkin bo'lgan do'kon: 16 plakatlar 4 to'plamda, URLda qoladigan filtrlar va qidiruv, savat, yorug' va qorong'u mavzular va demo buyurtma yoki test rejimida haqiqiy Stripe Checkout sessiyasi bilan yakunlanadigan to'lov. Men uni TypeScriptda Tailwind CSS bilan Next.js statik eksporti sifatida qurdum. Karta to'lovlari Cloudflare Worker orqali o'tadi, u serverda savat narxini qayta hisoblaydi va Stripe veb-hook imzosini tekshiradi.
Next.jsda ikki tilli shaxsiy sayt
Ingliz va rus tillarida bir sahifali shaxsiy sayt, xizmatlar bo'limi va mening demo loyihalarimga havolalar bilan. Men uni Next.js, React va TypeScript bilan statik eksport sifatida loyihalashtirdim va qurdum, oddiy CSS modullari bilan va UI freymvorkisiz uslubladim. U yorug' va qorong'u mavzularga ega va har bir til uchun ijtimoiy oldindan ko'rish tasviri qurish vaqtida yaratiladi. GitHub Actions uni Bunny CDNga quradi va joylashtiradi, bu esa xavfsizlik sarlavhalarini qo'shadi va www va oddiy HTTPni asosiy HTTPS manziliga yo'naltiradi.
Xizmat tafsilotlari
Tez-tez so'raladigan savollar
Ha. Men har bir ekran uchun mobil maketni qurishdan oldin yozma ravishda yoki tez eskiz sifatida taklif qilaman, shunda siz uni oxirida kashf qilish oʻrniga oldindan tasdiqlaysiz.
Ha. Men mavjud papka tuzilishi, nomlash va stilni kuzataman, shuning uchun yangi kod bir xil naqshlardan foydalanadi va keyingi dasturchi ikkita stilni topmaydi.
Men fayldagi boʻshliqlar, oʻlchamlar va ranglarga mos kelaman. Dizayn va haqiqiy maʼlumotlar mos kelmagan joylarda, masalan, maketdan uzunroq ism, men uni belgilayman va maket buzilishiga yoʻl qoʻymasdan tuzatishni taklif qilaman.
Bu xizmat faqat front-end. Node.js-da Express yoki NestJS bilan backend uchun mening backend Zinn-ni koʻring yoki ikkalasini ham buyurtma qiling va men ularni birga narxlayman.
Mijozlar sharhlari
Mijozlarimiz ushbu Zinn haqida nima deganini ko'ring
Kategoriyalar
Zinner Siyosatlari
Tegishli Zinns
VueJS NuxtJS Pinia Supabase Firebase Laravel Fullstack Dasturchi
Figma-dan React Web ilovasini ishlab chiqish - Next.js, Node.js, Firebase va Supabase
Men sizning ADHD mahsuldorlik MVP'ingizni Bubble yoki WeWeb'da yarataman
