Δήμος Τρίπολης – Πολιτιστικός ιστότοπος & έκθεση βιβλίου
Πολιτιστικός ιστότοπος για την Έκθεση Βιβλίου του Δήμου Τρίπολης, με πρόγραμμα, συγγραφείς και ανακοινώσεις. Full-stack υλοποίηση σε WordPress και MySQL.
BitValve – Frontend για crypto P2P marketplace
Πελάτης:
BitValve
Ημερομηνία:
2021
Διάρκεια:
4 μήνες
BitValve – Frontend για crypto P2P marketplace
Υλοποίηση frontend για crypto P2P marketplace στη λογική του BitValve. Το αντικείμενο κάλυψε τις λίστες προσφορών, τα φίλτρα ανά τρόπο πληρωμής, νόμισμα, χώρα και ποσό, καθώς και τις οθόνες συναλλαγής. Δεν περιλάμβανε backend.
Ο πελάτης
Το BitValve είναι crypto marketplace από χρήστη σε χρήστη για άμεση αγορά και πώληση ψηφιακών περιουσιακών στοιχείων, με υποστήριξη πολλών τρόπων πληρωμής. Το συγκεκριμένο έργο αφορούσε frontend στη λογική αυτής της πλατφόρμας και όχι ανάπτυξη του backend της.
Το έργο
Το marketplace συγκεντρώνει προσφορές αγοράς και πώλησης ψηφιακών περιουσιακών στοιχείων από χρήστη σε χρήστη. Στο frontend, ο επισκέπτης περιηγείται στις προσφορές, συνδυάζει φίλτρα και συνεχίζει στις οθόνες της συναλλαγής.
Η βασική δυσκολία ήταν η πυκνότητα της πληροφορίας. Κάθε προσφορά περιλαμβάνει τιμή, όρια, αποδεκτούς τρόπους πληρωμής, στοιχεία φήμης του πωλητή και διαθεσιμότητα. Η οθόνη έπρεπε να διατηρεί αυτά τα στοιχεία ευανάγνωστα ώστε να μπορούν να συγκριθούν πολλές προσφορές.
Τα φίλτρα ανά τρόπο πληρωμής, νόμισμα, χώρα και ποσό λειτουργούν συνδυαστικά. Η ταξινόμηση και η σελιδοποίηση επηρεάζουν επίσης την κατάσταση της λίστας, οπότε το UI έπρεπε να καλύπτει με συνέπεια τη φόρτωση, τα κενά αποτελέσματα και τις μεγάλες λίστες.
Το backend δεν ήταν μέρος του έργου. Η δική μου ευθύνη περιορίστηκε στην αρχιτεκτονική του UI, στη σύνθεση των components και στη διαχείριση της κατάστασης στο frontend.
Η βασική δυσκολία ήταν η πυκνότητα της πληροφορίας. Κάθε προσφορά περιλαμβάνει τιμή, όρια, αποδεκτούς τρόπους πληρωμής, στοιχεία φήμης του πωλητή και διαθεσιμότητα. Η οθόνη έπρεπε να διατηρεί αυτά τα στοιχεία ευανάγνωστα ώστε να μπορούν να συγκριθούν πολλές προσφορές.
Τα φίλτρα ανά τρόπο πληρωμής, νόμισμα, χώρα και ποσό λειτουργούν συνδυαστικά. Η ταξινόμηση και η σελιδοποίηση επηρεάζουν επίσης την κατάσταση της λίστας, οπότε το UI έπρεπε να καλύπτει με συνέπεια τη φόρτωση, τα κενά αποτελέσματα και τις μεγάλες λίστες.
Το backend δεν ήταν μέρος του έργου. Η δική μου ευθύνη περιορίστηκε στην αρχιτεκτονική του UI, στη σύνθεση των components και στη διαχείριση της κατάστασης στο frontend.
Η πρόκληση
Σε μια τέτοια οθόνη, τα φίλτρα δεν λειτουργούν ανεξάρτητα. Κάθε αλλαγή επηρεάζει τη λίστα, την ταξινόμηση και τη σελιδοποίηση, μαζί με τις αντίστοιχες καταστάσεις φόρτωσης ή απουσίας αποτελεσμάτων.
Η σαφήνεια είχε ιδιαίτερη βαρύτητα επειδή το UI υποστηρίζει συναλλαγές μεταξύ αγνώστων. Οι τιμές, τα όρια και οι τρόποι πληρωμής έπρεπε να ξεχωρίζουν χωρίς διφορούμενες ετικέτες ή οπτικό θόρυβο.
Η σαφήνεια είχε ιδιαίτερη βαρύτητα επειδή το UI υποστηρίζει συναλλαγές μεταξύ αγνώστων. Οι τιμές, τα όρια και οι τρόποι πληρωμής έπρεπε να ξεχωρίζουν χωρίς διφορούμενες ετικέτες ή οπτικό θόρυβο.
Τι έκανα εγώ
Υλοποίησα όλο το frontend και οργάνωσα τις οθόνες σε επαναχρησιμοποιήσιμα components. Για τους πίνακες και τα χειριστήρια φίλτρων χρησιμοποίησα την υπάρχουσα βιβλιοθήκη components, ενώ το Tailwind CSS κάλυψε τη διάταξη και τις αποστάσεις στις πυκνές οθόνες.
Διαχώρισα τη διαχείριση της κατάστασης από την πηγή των δεδομένων, καθώς η σύνδεση με backend δεν ανήκε στο αντικείμενο του έργου.
Διαχώρισα τη διαχείριση της κατάστασης από την πηγή των δεδομένων, καθώς η σύνδεση με backend δεν ανήκε στο αντικείμενο του έργου.
Τεχνολογίες
- Vue.js, Tailwind CSS, αρχιτεκτονική μόνο frontend, UI crypto marketplace, σύνθετα interfaces φιλτραρίσματος και καταχωρίσεων
Ετικέτες
Κατηγορίες
Περισσότερα
Reveall B.V. (Next) – Ανασχεδιασμός frontend για πλατφόρμα event technology
Ανασχεδιασμός της frontend αρχιτεκτονικής για τη Reveall, σήμερα Next, με σαφέστερα όρια και επαναχρησιμοποιήσιμα components.
Troop Travel – Πλατφόρμα οργάνωσης και έγκρισης ομαδικών ταξιδιών
Frontend δουλειά στην πλατφόρμα ομαδικών επαγγελματικών ταξιδιών Troop Travel. Ανέπτυξα σύνθετες φόρμες και ροές έγκρισης που άλλαζαν ανάλογα με τον ρόλο και την κατάσταση του αιτήματος.