คุณมีดีไซน์และแบ็กเอนด์ และต้องการส่วนที่ผู้ใช้เห็นจริง ฉันจะเปลี่ยนหน้าจอ Figma ให้เป็นส่วนหน้า React หรือ Next.js ใน TypeScript ที่ตอบสนองได้ตั้งแต่โทรศัพท์มือถือไปจนถึงเดสก์ท็อป และเชื่อมต่อกับ API ของคุณพร้อมจัดการสถานะการโหลด ว่างเปล่า และข้อผิดพลาด
ฉันจะสร้างส่วนหน้า React หรือ Next.js ของคุณจากดีไซน์ Figma และเชื่อมต่อกับ API ของคุณ
หนึ่งหน้าจอจากไฟล์ Figma ของคุณ ตอบสนอง พิมพ์และเชื่อมต่อกับ API ของคุณ
- หนึ่งหน้าจอ
- การออกแบบที่ตอบสนอง
- เชื่อมต่อกับ API ของคุณ
- ซอร์สโค้ด
สูงสุด 5 หน้าจอที่เชื่อมต่อกับ API ของคุณ พร้อมสถานะการโหลด ว่างเปล่า และข้อผิดพลาด
- สูงสุด 5 หน้าจอ
- การออกแบบที่ตอบสนอง
- เชื่อมต่อกับ API ของคุณ
- ซอร์สโค้ด
สูงสุด 12 หน้าจอ, เข้าสู่ระบบเทียบกับการตรวจสอบสิทธิ์ของคุณ, ส่วนประกอบที่ใช้ร่วมกันและการทดสอบ
- สูงสุด 12 หน้าจอ, เข้าสู่ระบบ, การทดสอบ
- การออกแบบที่ตอบสนอง
- เชื่อมต่อกับ API ของคุณ
- ซอร์สโค้ด
ขอข้อเสนอที่กำหนดเอง
เข้าสู่ระบบเพื่อขอข้อเสนอที่กำหนดเอง
สร้างบัญชีฟรีหรือเข้าสู่ระบบเพื่อขอข้อเสนอส่วนบุคคลจาก Zinner นี้
เข้าสู่ระบบ / ลงทะเบียนถามคำถามก่อนการขาย
เข้าสู่ระบบเพื่อถามคำถาม
เพื่อลดสแปมบนแพลตฟอร์ม ข้อความก่อนการขายสามารถส่งได้โดยผู้ใช้ที่เข้าสู่ระบบเท่านั้น
สร้างบัญชีฟรีหรือเข้าสู่ระบบเพื่อส่งข้อความถึง Zinner นี้โดยตรง
เข้าสู่ระบบ / ลงทะเบียนโดยสรุป
รายละเอียดสำคัญเกี่ยวกับบริการนี้เพื่อช่วยคุณตัดสินใจ สร้างโดย Zinn Hub ไม่ใช่ผู้ขาย
ตำแหน่งคุณค่า
เทคโนโลยีที่ใช้
ตอบสนอง & ข้ามเบราว์เซอร์
การรวม API
ระยะเวลาการสนับสนุน
สิ่งที่คุณจะได้รับ
คำอธิบายฉบับเต็ม
การออกแบบเสร็จสิ้นและ API พร้อมใช้งานหรือเกือบพร้อมใช้งาน แต่หน้าจอที่ผู้ใช้จะเห็นยังไม่มีอยู่ ฉันสร้างส่วนหน้าเท่านั้น: แบ็กเอนด์ ผู้ให้บริการการตรวจสอบสิทธิ์ และโฮสติ้งของคุณยังคงอยู่เหมือนเดิม และโค้ดจะเข้าสู่ที่เก็บของคุณ เป็นเวลา 14 วันหลังจากส่งมอบ ฉันจะแก้ไขสิ่งที่ไม่ทำงานตามที่เราตกลงกันโดยไม่คิดค่าใช้จ่าย
ด้วย Starter คุณจะได้รับหนึ่งหน้าจอหรือหน้าจากไฟล์ Figma ของคุณ ตอบสนองและพิมพ์ โดยมีข้อมูลมาจาก API ของคุณ หรือจาก mock จนกว่าจุดสิ้นสุดจะพร้อมใช้งาน 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. การส่งมอบ - โค้ดในที่เก็บข้อมูลของคุณ บันทึกย่อสั้นๆ เกี่ยวกับโครงสร้างและวิธีการรัน และการทดสอบขั้นสูงที่คุณสามารถรันได้ก่อนการเผยแพร่แต่ละครั้ง
การรับประกันคุณภาพ Zinner
Zinner ทุกคนจะได้รับการตรวจสอบและอนุมัติก่อนเข้าร่วมแพลตฟอร์ม
บริการทั้งหมดได้รับการสนับสนุนจากความมุ่งมั่นในการประกันคุณภาพของเรา
การชำระเงินของคุณจะได้รับการคุ้มครองจนกว่าคุณจะอนุมัติงานที่ส่งมอบ
เปรียบเทียบแพ็คเกจ
| ฟังก์ชัน | เริ่มต้น | มาตรฐาน | ขั้นสูง |
|---|---|---|---|
| เวลาจัดส่ง | 4 วัน | 9 วัน | 18 วัน |
| การแก้ไข | 1 | 2 | 3 |
| ขอบเขต | หนึ่งหน้าจอ | สูงสุด 5 หน้าจอ | สูงสุด 12 หน้าจอ, การเข้าสู่ระบบ, การทดสอบ |
| การออกแบบที่ตอบสนอง | ✓ | ✓ | ✓ |
| เชื่อมต่อกับ API ของคุณ | ✓ | ✓ | ✓ |
| ซอร์สโค้ด | ✓ | ✓ | ✓ |
ตัวอย่าง
ดูตัวอย่างผลงานของผู้ขายที่เกี่ยวข้องกับ Zinn นี้
ผลงาน
ตัวอย่างผลงานของผู้ขายที่เกี่ยวข้องกับ Zinn นี้
Formline: ร้านค้า Next.js พร้อม Stripe
หน้าร้านที่คุณสามารถคลิกผ่านได้: โปสเตอร์ 16 ชิ้นในคอลเลกชัน 4 รายการ, ตัวกรองและการค้นหาที่ยังคงอยู่ใน URL, ตะกร้าสินค้า, ธีมสว่างและมืด, และการชำระเงินที่สิ้นสุดด้วยคำสั่งซื้อตัวอย่างหรือเซสชัน Stripe Checkout จริงในโหมดทดสอบ ฉันสร้างมันเป็น Next.js static export ใน TypeScript ด้วย Tailwind CSS การชำระเงินด้วยบัตรจะผ่าน Cloudflare Worker ที่ปรับราคาตะกร้าสินค้าบนเซิร์ฟเวอร์และตรวจสอบลายเซ็น webhook ของ Stripe
เว็บไซต์ส่วนตัวสองภาษาใน Next.js
เว็บไซต์ส่วนตัวหน้าเดียวในภาษาอังกฤษและรัสเซีย พร้อมส่วนบริการและลิงก์ไปยังโปรเจกต์สาธิตของฉัน ฉันออกแบบและสร้างด้วย Next.js, React และ TypeScript เป็น static export จัดรูปแบบด้วย CSS Modules ธรรมดาและไม่มี UI framework มีธีมสว่างและมืด และรูปภาพตัวอย่างโซเชียลสำหรับแต่ละภาษาจะถูกสร้างขึ้นในเวลาสร้าง GitHub Actions สร้างและปรับใช้กับ Bunny CDN ซึ่งเพิ่มส่วนหัวความปลอดภัยและเปลี่ยนเส้นทาง www และ HTTP ธรรมดาไปยังที่อยู่ HTTPS หลัก
รายละเอียดบริการ
คำถามที่พบบ่อย
ได้ ฉันจะเสนอเค้าโครงมือถือสำหรับแต่ละหน้าจอก่อนที่จะสร้างมันขึ้นมา โดยเขียนเป็นลายลักษณ์อักษรหรือเป็นภาพร่างคร่าวๆ เพื่อให้คุณอนุมัติล่วงหน้าแทนที่จะมาค้นพบในภายหลัง
ได้ ฉันจะทำตามโครงสร้างโฟลเดอร์ การตั้งชื่อ และสไตล์ที่มีอยู่แล้ว เพื่อให้โค้ดใหม่ใช้รูปแบบเดียวกัน และนักพัฒนาคนต่อไปจะไม่พบสองสไตล์
ฉันจะจับคู่ระยะห่าง ขนาด และสีจากไฟล์ หากการออกแบบและข้อมูลจริงไม่ตรงกัน เช่น ชื่อที่ยาวกว่าแบบจำลอง ฉันจะแจ้งและแนะนำวิธีแก้ไขแทนที่จะปล่อยให้เค้าโครงเสีย
บริการนี้เป็นส่วนหน้าเท่านั้น สำหรับแบ็กเอนด์ใน Node.js พร้อม Express หรือ NestJS โปรดดู Zinn แบ็กเอนด์ของฉัน หรือสั่งซื้อทั้งสองอย่างแล้วฉันจะเสนอราคารวมกัน
รีวิวจากลูกค้า
ดูว่าลูกค้าของเราพูดถึง Zinn นี้ว่าอย่างไร
