Imate dizajn i backend, a potreban vam je deo koji korisnici zapravo vide. Pretvaram Figma ekrane u React ili Next.js front end u TypeScript-u, prilagodljiv od telefona do desktopa, i povezujem ga sa vašim API-jem sa obrađenim stanjima učitavanja, praznim i greškama.
Izgradiću vaš React ili Next.js front end na osnovu Figma dizajna i povezati ga sa vašim API-jem
Jedan ekran iz vašeg Figma fajla, responsivan, tipiziran i povezan sa vašim API-jem.
- Jedan ekran
- Responzivni dizajn
- Povezano sa vašim API-jem
- Izvorni kod
Do 5 ekrana povezanih sa vašim API-jem, sa stanjima učitavanja, praznim i greškama.
- Do 5 ekrana
- Responzivni dizajn
- Povezano sa vašim API-jem
- Izvorni kod
Do 12 ekrana, prijava na vašu autentifikaciju, deljene komponente i testovi.
- Do 12 ekrana, prijava, testovi
- Responzivni dizajn
- Povezano sa vašim API-jem
- Izvorni kod
Zatražite prilagođenu ponudu
Prijavite se da biste zatražili prilagođenu ponudu
Kreirajte besplatan nalog ili se prijavite da biste zatražili personalizovanu ponudu od ovog Zinnera.
Prijava / RegistracijaPostavite pitanje pre kupovine
Prijavite se da biste postavili pitanje
Da bi se smanjio spam na platformi, poruke pre kupovine mogu slati samo prijavljeni korisnici.
Kreirajte besplatan nalog ili se prijavite da biste direktno poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Kreirajte besplatan nalog ili se prijavite da biste poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Kreirajte besplatan nalog ili se prijavite da biste zatražili personalizovanu ponudu.
Prijava / RegistracijaUkratko
Ključni detalji o ovoj usluzi koji će vam pomoći da se odlučite. Generisano od strane Zinn Hub-a, a ne prodavca.
Vrednosna pozicija
Tehnološki stek
Responzivno i kompatibilno sa više pretraživača
API integracija
Period podrške
Šta ćete dobiti
Pun opis
Dizajn je završen i API je spreman ili skoro spreman, ali ekrani koje će korisnici videti još ne postoje. Ja gradim samo front end: vaš backend, provajder autentifikacije i hosting ostaju kakvi jesu, a kod ide u vaš repozitorijum. Tokom 14 dana nakon isporuke, besplatno popravljam sve što ne radi kako smo se dogovorili.
Sa Starter paketom dobijate jedan ekran ili stranicu iz vašeg Figma fajla, responsivnu i tipiziranu, sa podacima koji dolaze iz vašeg API-ja, ili iz mock-a dok endpoint ne postoji. Standard pokriva do pet ekrana povezanih sa vašim API-jem, sa stanjima učitavanja, praznim i greškama i formama sa validacijom. Advanced omogućava do dvanaest ekrana i dodaje ekrane za prijavu koji rade sa vašim provajderom autentifikacije, deljene komponente koje se koriste u celoj aplikaciji i testove za glavne tokove.
Pažljivo pratim dizajn: razmak, veličina fonta i boje dolaze iz Figma fajla. Tamo gde ekran nema mobilnu verziju, predlažem je pre nego što je napravim, umesto da nagađam. Next.js sa App Router-om je moj podrazumevani izbor; običan React sa Vite-om je u redu kada vam nije potrebno renderovanje na serveru. Za stilizovanje koristim Tailwind CSS ili CSS Module, šta god vaš projekat već ima.
Proveravam rezultat u Chrome-u, Firefox-u i Edge-u na desktopu, i u Chrome-u na pravom Android telefonu.
Dva javna primera mog front-end rada nalaze se u portfoliju: Next.js prodavnica sa filterima, korpom i naplatom, i moj dvojezični sajt.
Radim samo pismeno, bez sastanaka. Ekrani i endpointi iza njih su navedeni pre nego što počnem, link za pregled prikazuje rad kako napreduje, a kratka napomena o napretku stiže u ćaskanje svakog radnog dana.
Koraci za završetak vašeg projekta
1. Lista ekrana - Prolazim kroz Figma fajl i vašu API dokumentaciju i zapisujem svaki ekran, njegova stanja i endpointe koje poziva. Potvrđujete listu pre bilo kakvog koda.
2. Osnovni i deljeni delovi - Podešavanje projekta ili vaš postojeći repozitorijum, boje i tip iz Figme, i raspored i komponente koje svaki ekran ponovo koristi.
3. Ekrani i podaci - Svaki ekran je izgrađen prema dizajnu i povezan sa vašim API-jem, sa stanjima učitavanja, praznim i greškama. Nedostajući endpoint dobija mock koji se lako može zameniti.
4. Krug pregleda na linku za pregled - Kliknete i šaljete ispravke u jednoj listi. Ja ih popravljam i ponovo prikazujem isti link.
5. Primopredaja - Kod u vašem repozitorijumu, kratka napomena o strukturi i kako ga pokrenuti, i na Advanced, testovi koje možete pokrenuti pre svakog izdanja.
Garancija kvaliteta Zinner-a
Svaki Zinner je pregledan i odobren pre pridruživanja platformi.
Sve usluge su podržane našom posvećenošću osiguranju kvaliteta.
Vaša uplata je zaštićena dok ne odobrite isporučeni rad.
Uporedite pakete
| Funkcija | Početni | Standardno | Napredno |
|---|---|---|---|
| Vreme isporuke | 4 dana | 9 dana | 18 dana |
| Revizije | 1 | 2 | 3 |
| Opseg | Jedan ekran | Do 5 ekrana | Do 12 ekrana, prijava, testovi |
| Responzivni dizajn | ✓ | ✓ | ✓ |
| Povezano sa vašim API-jem | ✓ | ✓ | ✓ |
| Izvorni kod | ✓ | ✓ | ✓ |
Uzorci
Pogledajte primere rada prodavca u vezi sa ovim Zinn-om.
Portfolio
Primeri rada prodavca u vezi sa ovim Zinnom.
Formline: Next.js prodavnica sa Stripe-om
Izlog kroz koji možete kliknuti: 16 postera u 4 kolekcija, filteri i pretraga koji ostaju u URL-u, korpa, svetle i tamne teme, i naplata koja se završava demo narudžbinom ili stvarnom Stripe Checkout sesijom u testnom režimu. Izgradio sam ga kao Next.js statički izvoz u TypeScript-u sa Tailwind CSS-om. Plaćanja karticama idu preko Cloudflare Worker-a koji ponovo određuje cenu korpe na serveru i verifikuje Stripe-ov potpis veb-kuke.
Dvojezični lični sajt u Next.js
Lični sajt na jednoj stranici na engleskom i ruskom jeziku, sa odeljkom za usluge i linkovima ka mojim demo projektima. Dizajnirao sam ga i izgradio sa Next.js, React i TypeScript-om kao statički izvoz, stilizovan običnim CSS modulima i bez UI okvira. Ima svetle i tamne teme, a slika za društveni pregled za svaki jezik se generiše u vreme izgradnje. GitHub Actions ga gradi i postavlja na Bunny CDN, koji dodaje sigurnosne zaglavlja i preusmerava www i običan HTTP na glavnu HTTPS adresu.
Detalji usluge
Često postavljana pitanja
Da. Predlažem mobilni raspored za svaki ekran pre nego što ga napravim, pismeno ili kao brzu skicu, tako da ga odobrite unapred umesto da ga otkrijete na kraju.
Da. Pratim već postojeću strukturu foldera, imenovanje i stilizovanje, tako da novi kod koristi iste obrasce i sledeći programer ne nalazi dva stila.
Usklađujem razmak, veličine i boje iz fajla. Tamo gde se dizajn i stvarni podaci ne slažu, kao što je ime duže od makete, označavam to i predlažem rešenje umesto da dozvolim da se raspored pokvari.
Ova usluga je samo za front end. Za backend u Node.js sa Express-om ili NestJS-om, pogledajte moj backend Zinn, ili naručite oba i ja ću ih zajedno proceniti.
Recenzije kupaca
Pogledajte šta naši kupci kažu o ovom Zinn-u
