თქვენ გაქვთ დიზაინი და ბექენდი, და გჭირდებათ ნაწილი, რომელსაც მომხმარებლები რეალურად ხედავენ. მე ვაქცევ Figma-ს ეკრანებს React-ის ან Next.js-ის ფრონტ-ენდად TypeScript-ში, რომელიც ადაპტირებულია ტელეფონიდან დესკტოპამდე, და ვაკავშირებ მას თქვენს API-სთან ჩატვირთვის, ცარიელი და შეცდომის სტატუსების დამუშავებით.
მე ავაშენებ თქვენს React-ის ან Next.js-ის ფრონტ-ენდს Figma-ს დიზაინის მიხედვით და დავაკავშირებ მას თქვენს API-სთან
ერთი ეკრანი თქვენი Figma ფაილიდან, ადაპტირებული, აკრეფილი და დაკავშირებული თქვენს API-სთან.
- ერთი ეკრანი
- ადაპტური დიზაინი
- დაკავშირებულია თქვენს API-სთან
- წყაროს კოდი
5 ეკრანამდე, დაკავშირებული თქვენს API-სთან, ჩატვირთვის, ცარიელი და შეცდომის სტატუსებით.
- 5 ეკრანამდე
- ადაპტური დიზაინი
- დაკავშირებულია თქვენს API-სთან
- წყაროს კოდი
12 ეკრანამდე, შესვლა თქვენი ავტორიზაციის საშუალებით, გაზიარებული კომპონენტები და ტესტები.
- 12 ეკრანამდე, შესვლა, ტესტები
- ადაპტური დიზაინი
- დაკავშირებულია თქვენს API-სთან
- წყაროს კოდი
მოითხოვეთ მორგებული შეთავაზება
შედით სისტემაში მორგებული შეთავაზების მოთხოვნისთვის
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა მოითხოვოთ პერსონალიზებული შეთავაზება ამ Zinner-ისგან.
შესვლა / რეგისტრაციადასვით შეკითხვა გაყიდვამდე
შედით სისტემაში შეკითხვის დასასმელად
პლატფორმის სპამის შესამცირებლად, გაყიდვამდე შეტყობინებების გაგზავნა მხოლოდ სისტემაში შესულ მომხმარებლებს შეუძლიათ.
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა პირდაპირ მიწეროთ ამ Zinner-ს.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში ამ Zinner-ისთვის შეტყობინების გასაგზავნად.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში პერსონალიზებული შეთავაზების მოთხოვნისთვის.
შესვლა / რეგისტრაციაერთი შეხედვით
ძირითადი დეტალები ამ სერვისის შესახებ, რათა დაგეხმაროთ გადაწყვეტილების მიღებაში. გენერირებულია Zinn Hub-ის მიერ და არა გამყიდველის მიერ.
ღირებულების პოზიცია
ტექნოლოგიური სტეკი
ადაპტური და ბრაუზერებს შორის თავსებადი
API ინტეგრაცია
მხარდაჭერის პერიოდი
რას მიიღებთ
სრული აღწერა
დიზაინი დასრულებულია და API მზად არის ან თითქმის მზად არის, მაგრამ ეკრანები, რომლებსაც მომხმარებლები ნახავენ, ჯერ არ არსებობს. მე ვაშენებ მხოლოდ ფრონტ-ენდს: თქვენი ბექენდი, ავტორიზაციის პროვაიდერი და ჰოსტინგი რჩება ისე, როგორც არის, და კოდი გადადის თქვენს საცავში. მიწოდებიდან 14 დღის განმავლობაში, მე ვასწორებ ყველაფერს, რაც არ მუშაობს ისე, როგორც შევთანხმდით, უფასოდ.
Starter-ით თქვენ მიიღებთ ერთ ეკრანს ან გვერდს თქვენი Figma ფაილიდან, ადაპტირებულს და აკრეფილს, რომლის მონაცემები მოდის თქვენი API-დან, ან მოკიდან, სანამ ენდპოინტი არ იარსებებს. Standard მოიცავს ხუთ ეკრანამდე, დაკავშირებულს თქვენს API-სთან, ჩატვირთვის, ცარიელი და შეცდომის სტატუსებით და ფორმებით ვალიდაციით. Advanced საშუალებას აძლევს თორმეტ ეკრანამდე და ამატებს შესვლის ეკრანებს, რომლებიც მუშაობენ თქვენს ავტორიზაციის პროვაიდერთან, აპლიკაციის მასშტაბით გამოყენებულ გაზიარებულ კომპონენტებს და ტესტებს ძირითადი ნაკადებისთვის.
მე ზუსტად მივყვები დიზაინს: ინტერვალი, ტიპის მასშტაბი და ფერები მოდის Figma ფაილიდან. იქ, სადაც ეკრანს არ აქვს მობილური ვერსია, მე ვთავაზობ მას მშენებლობამდე, ვიდრე გამოვიცნობ. Next.js App Router-ით არის ჩემი ნაგულისხმევი; ჩვეულებრივი React Vite-ით კარგია, როდესაც არ გჭირდებათ სერვერის რენდერინგი. სტილისთვის ვიყენებ Tailwind CSS-ს ან CSS Modules-ს, რომელიმე მათგანს, რომელიც უკვე აქვს თქვენს პროექტს.
შედეგს ვამოწმებ Chrome-ში, Firefox-ში და Edge-ში დესკტოპზე, და Chrome-ში რეალურ Android ტელეფონზე.
ჩემი ფრონტ-ენდ სამუშაოს ორი საჯარო მაგალითი მოცემულია პორტფოლიოში: Next.js მაღაზია ფილტრებით, კალათით და გადახდით, და ჩემი საკუთარი ორენოვანი საიტი.
მე ვმუშაობ მხოლოდ წერილობით, შეხვედრების გარეშე. ეკრანები და მათ უკან არსებული ენდპოინტები ჩამოთვლილია დაწყებამდე, გადახედვის ბმული აჩვენებს სამუშაოს ზრდას, და მოკლე პროგრესის შენიშვნა მოდის ჩატში ყოველ სამუშაო დღეს.
თქვენი პროექტის დასრულების ნაბიჯები
1. ეკრანების სია - მე ვათვალიერებ Figma ფაილს და თქვენს API დოკუმენტაციას და ვწერ თითოეულ ეკრანს, მის სტატუსებს და ენდპოინტებს, რომლებსაც ის იძახებს. თქვენ ადასტურებთ სიას ნებისმიერ კოდირებამდე.
2. ბაზა და გაზიარებული ნაწილები - პროექტის დაყენება ან თქვენი არსებული საცავი, ფერები და ტიპი Figma-დან, და განლაგება და კომპონენტები, რომლებსაც ყველა ეკრანი ხელახლა იყენებს.
3. ეკრანები და მონაცემები - თითოეული ეკრანი აგებულია დიზაინის მიხედვით და დაკავშირებულია თქვენს API-სთან, ჩატვირთვის, ცარიელი და შეცდომის სტატუსებით. დაკარგული ენდპოინტი იღებს მოკს, რომლის შეცვლაც ადვილია.
4. გადახედვის რაუნდი გადახედვის ბმულზე - თქვენ აწკაპუნებთ და აგზავნით შესწორებებს ერთ სიაში. მე ვასწორებ მათ და კვლავ ვაჩვენებ იმავე ბმულს.
5. გადაცემა - კოდი თქვენს საცავში, მოკლე შენიშვნა სტრუქტურისა და მისი გაშვების შესახებ, და Advanced-ზე, ტესტები, რომელთა გაშვებაც შეგიძლიათ ყოველი გამოშვების წინ.
Zinner ხარისხის გარანტია
ყველა Zinner განიხილება და მტკიცდება პლატფორმაზე გაწევრიანებამდე.
ყველა სერვისი მხარდაჭერილია ჩვენი ხარისხის უზრუნველყოფის ვალდებულებით.
თქვენი გადახდა დაცულია მანამ, სანამ არ დაამტკიცებთ შესრულებულ სამუშაოს.
პაკეტების შედარება
| ფუნქცია | დამწყები | სტანდარტული | მოწინავე |
|---|---|---|---|
| მიწოდების დრო | 4 დღეები | 9 დღეები | 18 დღეები |
| რევიზიები | 1 | 2 | 3 |
| ფარგლები | ერთი ეკრანი | 5 ეკრანამდე | 12 ეკრანამდე, შესვლა, ტესტები |
| ადაპტური დიზაინი | ✓ | ✓ | ✓ |
| დაკავშირებულია თქვენს API-სთან | ✓ | ✓ | ✓ |
| წყაროს კოდი | ✓ | ✓ | ✓ |
ნიმუშები
იხილეთ გამყიდველის ნამუშევრების მაგალითები, რომლებიც დაკავშირებულია ამ Zinn-თან.
პორტფოლიო
გამყიდველის ნამუშევრების მაგალითები ამ Zinn-თან დაკავშირებით.
Formline: Next.js მაღაზია Stripe-ით
მაღაზია, რომელშიც შეგიძლიათ დაათვალიეროთ: 16 პოსტერი 4 კოლექციაში, ფილტრები და ძებნა, რომლებიც რჩება URL-ში, კალათა, ღია და მუქი თემები, და გადახდა, რომელიც მთავრდება დემო შეკვეთით ან რეალური Stripe Checkout სესიით ტესტის რეჟიმში. მე ავაშენე ის, როგორც Next.js სტატიკური ექსპორტი TypeScript-ში Tailwind CSS-ით. ბარათით გადახდები ხორციელდება Cloudflare Worker-ის მეშვეობით, რომელიც ხელახლა აფასებს კალათას სერვერზე და ამოწმებს Stripe-ის webhook ხელმოწერას.
ორენოვანი პირადი საიტი Next.js-ში
ერთგვერდიანი პირადი საიტი ინგლისურ და რუსულ ენებზე, სერვისების განყოფილებით და ბმულებით ჩემს დემო პროექტებზე. მე შევქმენი და ავაშენე ის Next.js-ით, React-ით და TypeScript-ით, როგორც სტატიკური ექსპორტი, სტილიზებული უბრალო CSS Modules-ით და UI ფრეიმვორკის გარეშე. მას აქვს ღია და მუქი თემები, და თითოეული ენისთვის სოციალური გადახედვის სურათი გენერირდება აგების დროს. GitHub Actions აშენებს და აქვეყნებს მას Bunny CDN-ზე, რომელიც ამატებს უსაფრთხოების სათაურებს და გადამისამართებს www-ს და უბრალო HTTP-ს მთავარ HTTPS მისამართზე.
სერვისის დეტალები
ხშირად დასმული კითხვები
დიახ. მე ვთავაზობ მობილურ განლაგებას თითოეული ეკრანისთვის მის აშენებამდე, წერილობით ან სწრაფი ესკიზის სახით, ასე რომ თქვენ წინასწარ დაამტკიცებთ მას, ნაცვლად იმისა, რომ ბოლოს აღმოაჩინოთ.
დიახ. მე მივყვები საქაღალდის სტრუქტურას, დასახელებას და სტილს, რომელიც უკვე არსებობს, ასე რომ ახალი კოდი იყენებს იმავე შაბლონებს და შემდეგი დეველოპერი ვერ იპოვის ორ სტილს.
მე ვამთხვევ ინტერვალს, ზომებს და ფერებს ფაილიდან. იქ, სადაც დიზაინი და რეალური მონაცემები არ ემთხვევა, მაგალითად, სახელი უფრო გრძელია, ვიდრე მოკაპი, მე აღვნიშნავ მას და ვთავაზობ გამოსწორებას, ნაცვლად იმისა, რომ განლაგება დაირღვეს.
ეს სერვისი არის მხოლოდ ფრონტ-ენდი. Node.js-ში Express-ით ან NestJS-ით ბექენდისთვის იხილეთ ჩემი ბექენდი Zinn, ან შეუკვეთეთ ორივე და მე ერთად შევაფასებ მათ.
მომხმარებელთა შეფასებები
ნახეთ, რას ამბობენ ჩვენი მომხმარებლები ამ Zinn-ის შესახებ
კატეგორიები
Zinner-ის პოლიტიკა
მსგავსი Zinns
შეცდომების გამოსწორება Next.js, Supabase, GraphQL, MongoDB, Firebase-ში
გააკეთეთ php, css, javascript, html, prestashop, mailchimp, rest, json, xml, joomla
