Θα δημιουργήσω το React ή Next.js front end σας από ένα σχέδιο Figma και θα το συνδέσω με το API σας

Ο σχεδιασμός έχει ολοκληρωθεί και το API είναι έτοιμο ή σχεδόν έτοιμο, αλλά οι οθόνες που θα βλέπουν οι χρήστες δεν υπάρχουν ακόμα. Κατασκευάζω μόνο το front end: το backend, ο πάροχος αυθεντικοποίησης και η φιλοξενία σας παραμένουν ως έχουν, και ο κώδικας πηγαίνει στο αποθετήριό σας. Για 14 ημέρες μετά την παράδοση, διορθώνω οτιδήποτε δεν λειτουργεί όπως συμφωνήσαμε, δωρεάν.

Με το Starter αποκτάτε μία οθόνη ή σελίδα από το αρχείο Figma σας, responsive και με τύπους, με τα δεδομένα της να προέρχονται από το API σας, ή από ένα mock μέχρι να υπάρξει το τελικό σημείο. Το Standard καλύπτει έως πέντε οθόνες συνδεδεμένες με το API σας, με καταστάσεις φόρτωσης, κενού και σφάλματος και φόρμες με επικύρωση. Το Advanced επιτρέπει έως δώδεκα οθόνες και προσθέτει οθόνες σύνδεσης που λειτουργούν με τον πάροχο αυθεντικοποίησης σας, κοινά στοιχεία που χρησιμοποιούνται σε όλη την εφαρμογή και δοκιμές για τις κύριες ροές.

Ακολουθώ πιστά το σχέδιο: η απόσταση, η κλίμακα γραμματοσειράς και τα χρώματα προέρχονται από το αρχείο Figma. Όπου μια οθόνη δεν έχει έκδοση για κινητά, προτείνω μία πριν την κατασκευάσω αντί να μαντέψω. Το Next.js με το App Router είναι η προεπιλογή μου. Το απλό React με Vite είναι μια χαρά όταν δεν χρειάζεστε server rendering. Για το styling χρησιμοποιώ Tailwind CSS ή CSS Modules, όποιο κι αν έχει ήδη το έργο σας.

Ελέγχω το αποτέλεσμα σε Chrome, Firefox και Edge σε επιτραπέζιο υπολογιστή, και σε Chrome σε ένα πραγματικό τηλέφωνο Android.

Δύο δημόσια παραδείγματα της δουλειάς μου στο front-end βρίσκονται στο χαρτοφυλάκιο: ένα Next.js κατάστημα με φίλτρα, καλάθι και checkout, και η δική μου δίγλωσση ιστοσελίδα.

Εργάζομαι μόνο γραπτώς, χωρίς συναντήσεις. Οι οθόνες και τα τελικά σημεία πίσω από αυτές καταγράφονται πριν ξεκινήσω, ένας σύνδεσμος προεπισκόπησης δείχνει την εργασία καθώς εξελίσσεται, και μια σύντομη σημείωση προόδου έρχεται στη συνομιλία κάθε εργάσιμη ημέρα.

Βήματα για την ολοκλήρωση του έργου σας
1. Λίστα οθονών - Εξετάζω το αρχείο Figma και τα έγγραφα του API σας και καταγράφω κάθε οθόνη, τις καταστάσεις της και τα τελικά σημεία που καλεί. Επιβεβαιώνετε τη λίστα πριν από οποιονδήποτε κώδικα.
2. Βασικά και κοινά μέρη - Ρύθμιση έργου ή το υπάρχον αποθετήριό σας, χρώματα και τύπος από το Figma, και η διάταξη και τα στοιχεία που επαναχρησιμοποιεί κάθε οθόνη.
3. Οθόνες και δεδομένα - Κάθε οθόνη κατασκευάζεται σύμφωνα με το σχέδιο και συνδέεται με το API σας, με καταστάσεις φόρτωσης, κενού και σφάλματος. Ένα ελλείπον τελικό σημείο λαμβάνει ένα mock που είναι εύκολο να αντικατασταθεί.
4. Γύρος αναθεώρησης στον σύνδεσμο προεπισκόπησης - Κάνετε κλικ και στέλνετε διορθώσεις σε μία λίστα. Τις διορθώνω και δείχνω ξανά τον ίδιο σύνδεσμο.
5. Παράδοση - Ο κώδικας στο αποθετήριό σας, μια σύντομη σημείωση για τη δομή και τον τρόπο εκτέλεσης, και στο Advanced, δοκιμές που μπορείτε να εκτελέσετε πριν από κάθε κυκλοφορία.