Imate dizajn i pozadinu, a potreban vam je dio koji korisnici zapravo vide. Pretvaram Figma zaslone u React ili Next.js sučelje u TypeScriptu, prilagodljivo od telefona do stolnog računala, i povezujem ga s vašim API-jem s obrađenim stanjima učitavanja, praznim stanjima i stanjima pogreške.
Izradit ću vaše React ili Next.js sučelje iz Figma dizajna i povezati ga s vašim API-jem
Jedan zaslon iz vaše Figma datoteke, responzivan, tipiziran i povezan s vašim API-jem.
- Jedan zaslon
- Responzivni dizajn
- Povezano s vašim API-jem
- Izvorni kod
Do 5 zaslona povezanih s vašim API-jem, sa stanjima učitavanja, praznim i pogrešnim stanjima.
- Do 5 zaslona
- Responzivni dizajn
- Povezano s vašim API-jem
- Izvorni kod
Do 12 zaslona, prijava putem vaše autentifikacije, zajedničke komponente i testovi.
- Do 12 zaslona, prijava, testovi
- Responzivni dizajn
- Povezano s vašim API-jem
- Izvorni kod
Zatražite prilagođenu ponudu
Prijavite se za zahtjev za prilagođenu ponudu
Izradite besplatan račun ili se prijavite kako biste zatražili personaliziranu ponudu od ovog Zinnera.
Prijava / RegistracijaPostavite pitanje prije prodaje
Prijavite se za postavljanje pitanja
Kako bi se smanjio spam na platformi, poruke prije prodaje mogu slati samo prijavljeni korisnici.
Izradite besplatan račun ili se prijavite kako biste izravno poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Izradite besplatan račun ili se prijavite za slanje poruke ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Izradite besplatan račun ili se prijavite za traženje personalizirane ponude.
Prijava / RegistracijaUkratko
Ključni detalji o ovoj usluzi koji će vam pomoći pri odluci. Generirano od strane Zinn Huba, a ne prodavatelja.
Vrijednost pozicije
Tehnološki skup
Responzivno i kompatibilno s više preglednika
API integracija
Razdoblje podrške
Što ćete dobiti
Potpuni opis
Dizajn je gotov, a API je spreman ili gotovo spreman, ali zasloni koje će korisnici vidjeti još ne postoje. Izrađujem samo front end: vaš backend, pružatelj autentifikacije i hosting ostaju kakvi jesu, a kod ide u vaš repozitorij. Tijekom 14 dana nakon isporuke, besplatno popravljam sve što ne radi kako smo se dogovorili.
Uz Starter dobivate jedan zaslon ili stranicu iz vaše Figma datoteke, responzivnu i tipiziranu, s podacima koji dolaze iz vašeg API-ja, ili iz mocka dok krajnja točka ne postoji. Standard pokriva do pet zaslona povezanih s vašim API-jem, sa stanjima učitavanja, praznim i pogrešnim stanjima te obrascima s validacijom. Advanced omogućuje do dvanaest zaslona i dodaje zaslone za prijavu koji rade s vašim pružateljem autentifikacije, zajedničke komponente koje se koriste u cijeloj aplikaciji i testove za glavne tokove.
Pažljivo pratim dizajn: razmak, veličina fonta i boje dolaze iz Figma datoteke. Tamo gdje zaslon nema mobilnu verziju, predlažem je prije izrade, umjesto da nagađam. Next.js s App Routerom je moj zadani; običan React s Viteom je u redu kada vam ne treba poslužiteljsko renderiranje. Za stiliziranje koristim Tailwind CSS ili CSS Module, ovisno o tome što vaš projekt već ima.
Provjeravam rezultat u Chromeu, Firefoxu i Edgeu na stolnom računalu, te u Chromeu na stvarnom Android telefonu.
Dva javna primjera mog front-end rada nalaze se u portfelju: Next.js trgovina s filterima, košaricom i naplatom, te moja vlastita dvojezična stranica.
Radim isključivo pismeno, bez sastanaka. Zasloni i krajnje točke iza njih navedeni su prije nego što počnem, poveznica za pregled prikazuje rad kako napreduje, a kratka bilješka o napretku dolazi u chatu svaki radni dan.
Koraci za dovršetak vašeg projekta
1. Popis zaslona - Prolazim kroz Figma datoteku i vašu API dokumentaciju te zapisujem svaki zaslon, njegova stanja i krajnje točke koje poziva. Potvrđujete popis prije bilo kakvog koda.
2. Osnovni i zajednički dijelovi - Postavljanje projekta ili vaš postojeći repozitorij, boje i tip iz Figme, te izgled i komponente koje svaki zaslon ponovno koristi.
3. Zasloni i podaci - Svaki zaslon je izgrađen prema dizajnu i povezan s vašim API-jem, sa stanjima učitavanja, praznim i pogrešnim stanjima. Nedostajuća krajnja točka dobiva mock koji se lako zamjenjuje.
4. Krug pregleda na poveznici za pregled - Kliknete i šaljete ispravke u jednom popisu. Ja ih popravljam i ponovno prikazujem istu poveznicu.
5. Primopredaja - Kod u vašem repozitoriju, kratka bilješka o strukturi i kako ga pokrenuti, te na Advanced, testovi koje možete pokrenuti prije svakog izdanja.
Zinner jamstvo kvalitete
Svaki Zinner se pregledava i odobrava prije pridruživanja platformi.
Sve usluge podržane su našom predanošću osiguranju kvalitete.
Vaše plaćanje je zaštićeno dok ne odobrite isporučeni rad.
Usporedite pakete
| Funkcija | Početni | Standardno | Napredno |
|---|---|---|---|
| Vrijeme isporuke | 4 dana | 9 dana | 18 dana |
| Revizije | 1 | 2 | 3 |
| Opseg | Jedan zaslon | Do 5 zaslona | Do 12 zaslona, prijava, testovi |
| Responzivni dizajn | ✓ | ✓ | ✓ |
| Povezano s vašim API-jem | ✓ | ✓ | ✓ |
| Izvorni kod | ✓ | ✓ | ✓ |
Uzorci
Pogledajte primjere rada prodavatelja vezane uz ovaj Zinn.
Portfolio
Primjeri rada prodavatelja vezani uz ovaj Zinn.
Formline: Next.js trgovina sa Stripeom
Izlog kroz koji možete kliknuti: 16 plakata u 4 kolekcija, filteri i pretraživanje koji ostaju u URL-u, košarica, svijetle i tamne teme, te naplata koja završava demo narudžbom ili stvarnom Stripe Checkout sesijom u testnom načinu. Izgradio sam ga kao Next.js statički izvoz u TypeScriptu s Tailwind CSS-om. Plaćanja karticama prolaze kroz Cloudflare Worker koji ponovno određuje cijenu košarice na poslužitelju i provjerava Stripeov potpis web-kuke.
Dvojezična osobna stranica u Next.js
Osobna stranica na jednoj stranici na engleskom i ruskom jeziku, s odjeljkom usluga i poveznicama na moje demo projekte. Dizajnirao sam je i izgradio s Next.js, Reactom i TypeScriptom kao statički izvoz, stiliziranu s običnim CSS modulima i bez UI okvira. Ima svijetle i tamne teme, a slika društvenog pregleda za svaki jezik generira se u vrijeme izgradnje. GitHub Actions je gradi i implementira na Bunny CDN, koji dodaje sigurnosne zaglavlja i preusmjerava www i obični HTTP na glavnu HTTPS adresu.
Detalji usluge
Često postavljana pitanja
Da. Predlažem mobilni izgled za svaki zaslon prije nego što ga izradim, pismeno ili kao brzu skicu, tako da ga unaprijed odobrite umjesto da ga otkrijete na kraju.
Da. Pratim već postojeću strukturu mapa, imenovanje i stiliziranje, tako da novi kod koristi iste obrasce i sljedeći programer ne pronalazi dva stila.
Usklađujem razmak, veličine i boje iz datoteke. Tamo gdje se dizajn i stvarni podaci ne slažu, poput imena dužeg od makete, označim to i predložim rješenje umjesto da dopustim da se izgled pokvari.
Ova usluga je samo za front end. Za backend u Node.js s Expressom ili NestJS-om, pogledajte moj backend Zinn, ili naručite oboje i ja ću ih zajedno procijeniti.
Recenzije kupaca
Pogledajte što naši kupci kažu o ovom Zinnu
Kategorije
Zinner pravila
Povezani Zinns
