BitValve — Frontend για crypto P2P marketplace

BitValve case study — Ανάπτυξη του frontend του P2P marketplace: καταχωρίσεις προσφορών, φιλτράρισμα και όλη η ροή συναλλαγής

Πελάτης:

BitValve

Ημερομηνία:

2021

Διάρκεια:

4 μήνες
BitValve — Frontend για crypto P2P marketplace
Frontend για ένα crypto P2P marketplace χτισμένο πάνω στο πρότυπο του BitValve: λίστες προσφορών, φιλτράρισμα σε πολλούς άξονες και οι ροές συναλλαγής γύρω από αυτά. Μόνο frontend, σε Vue.js με PrimeVue και Tailwind CSS.
BitValve offer listings — Buy and sell offers with payment method filtersBitValve trade flow — Escrow trade screen with limits and reputation

Ο πελάτης

Το BitValve είναι crypto marketplace από χρήστη σε χρήστη, όπου ο κόσμος αγοράζει και πουλάει ψηφιακά περιουσιακά στοιχεία απευθείας, με μεγάλη λίστα τρόπων πληρωμής. Τα πάντα εκεί μέσα στηρίζονται στο να εμπιστευτεί κάποιος έναν άγνωστο αρκετά ώστε να κάνει τη συναλλαγή.

Το έργο

Ήταν το frontend ενός crypto P2P marketplace στη λογική του BitValve: περιήγηση στις προσφορές, φιλτράρισμα ανά τρόπο πληρωμής, νόμισμα, χώρα και ποσό, και μετακίνηση μέσα στις οθόνες συναλλαγής.Το ενδιαφέρον πρόβλημα είναι η πυκνότητα. Μία μόνο γραμμή προσφοράς κουβαλάει τιμή, όρια, αποδεκτούς τρόπους πληρωμής, φήμη πωλητή και διαθεσιμότητα, και ο χρήστης σαρώνει δεκάδες τέτοιες ψάχνοντας αυτή που του κάνει. Αν βγει λάθος η ιεραρχία, όλη η λίστα γίνεται αδιάβαστη.Το άλλο μισό είναι το φιλτράρισμα. Τα φίλτρα πρέπει να συνδυάζονται, και τα αποτελέσματα να ανανεώνονται όσο ο χρήστης ακόμα σκέφτεται, όχι μετά. Σε λίστα αυτού του μεγέθους αυτό είναι ερώτημα αρχιτεκτονικής frontend πριν γίνει ερώτημα UI.Εδώ δεν υπήρχε backend. Η δουλειά ήταν αρχιτεκτονική UI, σύνθεση components και διαχείριση κατάστασης, φτιαγμένη ώστε να μπει από πίσω ένα πραγματικό API χωρίς ξαναγράψιμο.

Η πρόκληση

Τα interfaces του fintech κουβαλάνε πολλή κατάσταση UI. Φίλτρα, ταξινόμηση και σελιδοποίηση αλληλεπιδρούν, και κάθε συνδυασμός έχει την άδεια περίπτωση, την περίπτωση φόρτωσης και την περίπτωση «πάρα πολλά αποτελέσματα». Αν ξεχάσεις μία από αυτές, εκεί ακριβώς αρχίζει να δείχνει χαλασμένο ένα marketplace.Υπάρχει και μια διάσταση εμπιστοσύνης που εύκολα την υποτιμάς. Όταν κάποιος ετοιμάζεται να στείλει χρήματα σε άγνωστο, μια στήλη που δεν ευθυγραμμίζεται ή μια διφορούμενη ετικέτα κοστίζουν πολύ περισσότερο από ό,τι θα κόστιζαν οπουδήποτε αλλού.

Τι έκανα εγώ

Έφτιαξα ολόκληρο το frontend σε Vue.js, πάνω σε αρχιτεκτονική components φτιαγμένη για επαναχρησιμοποίηση και όχι για αντιγραφή. Το PrimeVue καλύπτει τα βαριά διαδραστικά κομμάτια, πίνακες και χειριστήρια φίλτρων, εκεί που το να τα γράψω μόνος μου θα ήταν κόπος σε ήδη λυμένο πρόβλημα.Το Tailwind CSS αναλαμβάνει διάταξη και αποστάσεις, κι αυτό είναι που επέτρεψε να δουλέψω γρήγορα πάνω σε τόσο πυκνές οθόνες.Δόμησα το UI έτσι ώστε η σύνδεση με backend να είναι θέμα αλλαγής πηγής δεδομένων, όχι ξαναδουλέματος των components.

Τεχνολογίες

  • Vue.js, PrimeVue, Tailwind CSS, αρχιτεκτονική μόνο frontend, UI crypto marketplace, σύνθετα interfaces φιλτραρίσματος και καταχωρίσεων
Ετικέτες
Κατηγορίες

Περισσότερα

Πείτε μου για το έργο σας και πάρτε τιμή, χρονοδιάγραμμα και αντικείμενο με email. Χωρίς κλήση.
Σας άρεσε αυτό που είδατε; Ας συνεργαστούμε

    Πώς δουλεύει
    1. Πείτε μου για το έργο σας παρακάτω.
    2. Σας στέλνω με email μερικές γρήγορες ερωτήσεις, περίπου 2 λεπτά.
    3. Παίρνετε τιμή, χρονοδιάγραμμα και αντικείμενο έργου με email. Χωρίς κλήση.
    Ένα link με βοηθάει να εκτιμήσω πιο γρήγορα το έργο σας.

    Απαντώ συνήθως μέσα σε μία εργάσιμη, με τιμή, χρονοδιάγραμμα και αντικείμενο έργου.

    Ο ιστότοπος προστατεύεται από reCAPTCHA. Ισχύουν η Πολιτική Απορρήτου and Όροι Χρήσης της Google.