Άσκηση

Εισαγωγή

Το front-end της Givelink είναι σχεδόν εξ ολοκλήρου γραμμένο σε React. Η react είναι ένα Javascript framework που προωθεί component-based αρχιτεκτονική, αντί για χιλιάδες γραμμες HTML. Μάλιστα χρησιμοποιούμε ένα framework που βρίσκεται ένα επίπεδο πάνω απτη React, το NextJS, για να γλιτώσουμε παραπάνω χρόνο και κόπο.

Το back-end μας είναι επίσης γραμμένο σε Javascript, και απαντάει σε όλα σχεδόν τα requests με JSON objects. Περισσότερα για το backend μόλις μπεις στην Givelink 😉

Η Άσκηση

Φτιάξε μια NextJS εφαρμογή (ακολουθώντας τα official NextJS docs) που να χρησιμοποιεί axios (ένα node package) για να κάνει API request στο https://be.givelink.app/data και να προβάλει την πληροφορία προϊόντων σε μια σελίδα. Η σελίδα να έχει μορφή A x B grid, με κουτάκια που δείχνουν το κάθε προιον. Όταν ο χρήστης κάνει hover ενα προιον, αυτό θα πρέπει να αλλάζει (ελαφρώς) χρωμα για να δεινει feedback στον χρήστη οτι ειναι clickable. Υπάρχουν 300+ προϊόντα στη λίστα, αλλά θα πρέπει να προβάλλονται μόνο τα ενεργά: product.active = true. Έχεις 1 εβδομάδα να μας στείλεις τα παραδοτέα.

Guidelines

1. Ξεκίνα με κάτι απλό (πχ μια hello world σελίδα σε NextJS), και μετά πρόσθεσε σιγά-σιγά πράγματα
2. Ο ευκολότερος τρόπος να εξερευνήσεις τα δεδομένα είναι να ανοίξεις το https://be.givelink.app/data με ένα browser με κάποιο JSON Formatter Extension. Αλλίως θα σου βγάλει χύμα text
3. Το API endpoint παραπάνω περιέχει πολλή περισσότερη πληροφορία από όση χρειάζεσαι (αν έχεις όρεξη εξερεύνησέ τη 😉). Στα πλαίσια της άσκησης, μπορείς να υποθέσεις πως τα δεδομένα που σου απαντάει (response.data) έχουν την παρακάτω μειωμένη μορφή:

   {
     products: {
       productId1: {
         imagePath: string,
         name: string,
         price: number,
         active: boolean
       },
       productId2: {
         imagePath: string,
         name: string,
         price: number,
         active: boolean
       },
       ...
     }
   }
   

   Παρατήρησε τα εξής: το products δεν είναι array, αλλα object/map (μπορείς να το μετατρέψεις σε array με javascript ομως αν σου χρειαστεί!). Τα ενεργά προϊόντα είναι πάνω από 100.
4. Ξεκίνα από τα docs και επέστρεφε εκεί όταν κολλάς. Σε όλα. NextJS, React, Axios, ακόμα και Javascript docs θα σου χρειαστούν όλα. Σε ότι αφορά vanilla web development (JS, HTML, CSS) προτείνουμε τα MDN Docs
5. Για το κάθε προιόν πρόβαλε τη φωτογραφία του, το όνομά του και τη τιμή του, μέσα στο κουτάκι. Προσπάθησε να το κάνεις όσο πιο όμορφο μπορείς.
6. πρόσεξε οτι το product.imagePath είναι σχετικό path, μια ενδεικτική τιμή είναι my-gusto-ntolmadakia-gialantzi-190gr.jpg αλλά εννοείται https://be.givelink.app/images/products/my-gusto-ntolmadakia-gialantzi-190gr.jpg

Bonus Points

Η άσκηση είναι η παραπάνω, αλλά αν νιώθεις πολύ άνετα με τα concepts, μπορείς να μας δείξεις παραπάνω skills κάνοντας τα εξής:

1. Responsive Layout. Κάνε την εφαρμογή να φαίνεται όμορφη σε κινητές συσκευές, και να προσαρμόζεται αυτόματα σε μεγαλύτερες οθόνες.
2. Αντί για κανονική CSS, μπορείς να χρησιμοποιήσεις TailwindCSS. Η Givelink χρησιμοποιεί Tailwind σχεδόν για όλα τα styles, με εξαίρεση κάποιες λεπτομέρειες που δεν είναι υλοπιήσιμες και απαιτούν πιο hacky CSS
3. Αντί για Javascript, μπορείς να χρησιμοποιήσεις Typescript. H Typescript είναι ένα υπερσύνολο της Javascript που εισάγει Types στην γλώσσα. Αυτό μειώνει δραματικά τα λάθη, βελτιώνει το intellisense και κάνει τον κώδικα πιο ευανάγνωστο. Εφόσον μπεις στην Givelink, στα αληθινά projects θα γράφεις μόνο Typescript. Το να χρησιμοποιήσεις Typescript σε ένα project είναι από τις "μεγάλες" επιλογές που καλό είναι να γίνονται νωρίς, γιατί είναι πολύ δύσκολο να μεταφράσεις ένα υπάρχον Javascript project κατόπιν εορτής. Η React, η NextJS και το Axios όλα έχουν δικά τους Types που είναι documented στα αντίστοιχα docs τους. Συγκεκριμένα η NextJS έχει ολόκληρο section για το πως κάνεις αρχικοποίηση NextJS project σε Typescript

Παραδοτέα

Σαν μέρος της άσκησης, θέλουμε μια μικρή τεχνική αναφορά πάνω στον κώδικα. Αφήνουμε την μορφή πάνω σου, αλλά θέλουμε να μας περιγράψεις τις σχεδιαστικές επιλογές που έκανες, ποιές τεχνολογίες χρησιμοποίησες τελικά, δυσκολίες που αντιμετώπισες και πως τις έλυσες. Ιδανικά σε PDF, και μπορεί να περιέχει και screenshots. Για τον κώδικα, ιδανικά θέλουμε να μας στείλεις ένα Github Repo link και να τον δούμε από εκεί. Σε άλλη περίπτωση και τα zip αρχεία είναι δεκτά. Το file structure και τα περιεχόμενα του github/zip θα κριθούν σαν μέρη της άσκησης. Έχεις 1 εβδομάδα να μας στείλεις τη καλύτερη προσπάθειά σου! 💜