8 Ιδέες έργου React.js που θα σας βοηθήσουν να ξεκινήσετε να μαθαίνετε κάνοντας

Ένας από τους καλύτερους τρόπους για να μάθετε είναι να κάνετε. Αλλά συχνά οι προγραμματιστές αγωνίζονται με το μεγάλο ερώτημα "τι πρέπει να φτιάξω;"

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

  • Επιχείρηση & πραγματικός κόσμος: Πίνακας ελέγχου στατιστικών χαρτών
  • Διασκέδαση και ενδιαφέρον: Μουσικό όργανο
  • Προσωπικό και χαρτοφυλάκιο: Blog
  • Παραγωγικότητα: Σημειωματάριο
  • Παζλ και παιχνίδια: Space Invaders
  • Εργαλεία και βιβλιοθήκες: Θέμα πλαισίου
  • Πρόσθετα έργου: Webmentions
  • Κλώνοι: Κυνήγι προϊόντος

Αυτή είναι μια προεπισκόπηση του δωρεάν ebook 50 Projects for React & the Static Web. Μπορείτε να βρείτε τις πλήρεις 50 ιδέες του έργου, συμπεριλαμβανομένων αυτών των 8 στο 50reactprojects.com.

Πίνακας ελέγχου στατιστικών χαρτών

Κατηγορία: Επιχειρήσεις και πραγματικός κόσμος

Δημιουργήστε έναν πίνακα ελέγχου χάρτη που εμφανίζει στατιστικά στοιχεία και γεωγραφικές πληροφορίες σχετικά με το COVID-19.

Σύντομος

Η αντιμετώπιση μιας παγκόσμιας πανδημίας σημαίνει ότι ιοί όπως το Coronavirus επηρεάζουν τον κόσμο διαφορετικά με βάση τη γεωγραφική τοποθεσία.

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

Επίπεδο 1

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

Δημιουργήστε μια εφαρμογή χαρτογράφησης που χρησιμοποιεί το API της νόσου.sh Coronavirus για να προσθέσετε δείκτες στο χάρτη για κάθε χώρα μαζί με τον αριθμό των περιπτώσεων COVID-19.

Επίπεδο 2

Παρόλο που τα στατιστικά στοιχεία για κάθε χώρα είναι χρήσιμα, μπορεί να είναι χρήσιμο να συγκρίνουμε αυτά τα στατιστικά στοιχεία με τον αριθμό των περιπτώσεων σε ολόκληρο τον κόσμο.

Προσθέστε έναν πίνακα ελέγχου στατιστικών στοιχείων που δείχνει τον αριθμό των περιπτώσεων COVID-19 σε όλο τον κόσμο, καθώς και οποιαδήποτε άλλα χρήσιμα στατιστικά στοιχεία από το API.

Επίπεδο 3

Η λήψη τρεχουσών στατιστικών είναι ένας καλός τρόπος για να κατανοήσετε την τρέχουσα κατάσταση του κόσμου, αλλά πώς συγκρίνεται ιστορικά;

Χρησιμοποιήστε το API ιστορικών δεδομένων για να εμφανίσετε γραφήματα στον πίνακα ελέγχου που παρέχουν περιβάλλον για την ανάπτυξη και τη διάδοση του ιού.

Να κάνω

  • Δημιουργήστε μια νέα εφαρμογή χάρτη
  • Ανάκτηση δεδομένων χωρών API
  • Προσθέστε δείκτες στο χάρτη
  • Προσθέστε στατιστικά στοιχεία σε δείκτες
  • Ανάκτηση καθολικών δεδομένων API
  • Δημιουργήστε έναν πίνακα ελέγχου στατιστικών
  • Προσθήκη καθολικών στατιστικών
  • Ανάκτηση ιστορικών δεδομένων API
  • Προσθέστε γραφήματα στο χάρτη

Εργαλειοθήκη

  • Ανοίξτε το API δεδομένων ασθενειών (disease.sh)
  • React Leaflet (react-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

Σεμινάρια

  • Πώς να δημιουργήσετε μια εφαρμογή Dashboard & Map Coronavirus (COVID-19) στο React with Gatsby and Leaflet (freecodecamp.org)
  • Πώς να προσθέσετε στατιστικά στοιχεία περιπτώσεων Coronavirus (COVID-19) στον πίνακα ελέγχου του χάρτη React με το Gatsby (freecodecamp.org)
  • Χαρτογράφηση με React Leaflet (egghead.io)

Εμπνευση

  • Πίνακας ελέγχου COVID-19 από το Κέντρο Επιστήμης και Μηχανικής Συστημάτων (CSSE) στο Πανεπιστήμιο Johns Hopkins (JHU) (coronavirus.jhu.ed)
  • Επίδειξη πίνακα ελέγχου Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Ιδέα διάταξης

Μουσικό όργανο

Κατηγορία: Διασκέδαση & Ενδιαφέρουσες

Δημιουργήστε ένα διαδραστικό πιάνο που μπορείτε να χρησιμοποιήσετε για να παίξετε μουσική με το πληκτρολόγιό σας.

Σύντομος

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

Επίπεδο 1

Χρησιμοποιώντας τα API ήχου του προγράμματος περιήγησης και του ιστού, μπορούμε να δημιουργήσουμε ήχους που, όταν συγκεντρωθούν, μπορούν πραγματικά να ακούγονται σαν μουσική.

Δημιουργήστε ένα σύνολο κουμπιών που παίζουν σημειώσεις μιας κλίμακας όταν κάνετε κλικ.

Επίπεδο 2

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

Δημιουργήστε μια διάταξη πιάνου χρησιμοποιώντας κουμπιά που λειτουργούν κάνοντας κλικ στο κουμπί ή χρησιμοποιώντας το φυσικό πληκτρολόγιο.

Επίπεδο 3

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

Δημιουργήστε εναλλαγές εφέ που αλλάζουν τον ήχο των σημειώσεων όταν είναι ενεργοποιημένες.

Να κάνω

  • Δημιουργήστε κουμπιά
  • Αναπαραγωγή ήχου όταν κάνετε κλικ
  • Τακτοποιήστε τις σημειώσεις σε κλίμακα
  • Δημιουργήστε διάταξη πιάνου
  • Ορίστε συμβάντα πληκτρολογίου
  • Δημιουργία διάταξης εφέ
  • Εναλλαγή εφέ ήχου

Εργαλειοθήκη

  • Αντιδράστε HotKeys (github.com)

Σεμινάρια

  • Δημιουργία πιάνου με React Hooks (dev.to)
  • Πώς να δημιουργήσετε ένα πληκτρολόγιο πιάνου χρησιμοποιώντας JavaScript βανίλιας (freecodecamp.org)
  • Δημιουργία πιάνου με tone.js! (dev.to)
  • Πώς έφτιαξα ένα πιάνο σε μόνο 1kb JavaScript (frankforce.com)

Εμπνευση

  • React Guitar (react-guitar.com)

Ιδέα διάταξης

Ιστολόγιο

Κατηγορία: Προσωπικά & Χαρτοφυλάκιο

Δημιουργήστε ένα blog που μπορείτε να χρησιμοποιήσετε για να μοιραστείτε τις εμπειρίες και τα έργα σταδιοδρομίας σας.

Σύντομος

Με οποιαδήποτε καριέρα, το να έχετε ένα blog για να μοιραστείτε τις εμπειρίες σας είναι ένας καλός τρόπος για να ενημερώσετε τους ανθρώπους για το τι εργάζεστε και να βοηθήσετε τους άλλους να μάθουν από τις εμπειρίες σας.

Είναι επίσης ένας τρόπος να ενισχυθεί αυτό που έχετε μάθει, ώστε να μπορείτε να το αναφέρετε στο μέλλον.

Επίπεδο 1

Για να μοιραστείτε τις εμπειρίες σας, χρειάζεστε μια δομή ιστότοπου που θα σας επιτρέψει να δημιουργήσετε νέο περιεχόμενο και να διαχειριστείτε το υπάρχον περιεχόμενο.

Ένας τρόπος για να γίνει αυτό είναι με τη δημιουργία αρχείων markdown που πηγαίνει ο ιστότοπός σας για τη δημιουργία νέων σελίδων και την εμφάνιση των δημοσιεύσεων.

Δημιουργήστε ένα blog χρησιμοποιώντας αρχεία markdown ως πηγή περιεχομένου

Επίπεδο 2

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

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

Επίπεδο 3

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

Ενσωματώστε μια επισήμανση σύνταξης που κάνει τα μπλοκ κώδικα πιο ευανάγνωστα.

Να κάνω

  • Δημιουργήστε ένα blog
  • Προσθέστε πρώτο στατικό περιεχόμενο
  • Πηγή στατικού περιεχομένου
  • Ενσωμάτωση CMS
  • Προσθέστε κώδικα στο περιεχόμενο
  • Προσθήκη επισήμανσης σύνταξης

Εργαλειοθήκη

  • Netlify CMS (netlifycms.org)
  • Prism.js (prismjs.com)

Σεμινάρια

  • Δημιουργία ιστολογίου Gatsby με το Netlify CMS (gatsbyjs.org)
  • Πώς να δημιουργήσετε το blog κωδικοποίησης από το μηδέν χρησιμοποιώντας το Gatsby και το MDX (freecodecamp.org)

Εμπνευση

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Ιδέα διάταξης

Σημειωματάριο

Κατηγορία: Παραγωγικότητα

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

Σύντομος

Η λήψη σημειώσεων είναι ένας πολύ καλός τρόπος για να βεβαιωθείτε ότι παρακολουθούμε τις σκέψεις μας ή θυμόμαστε τα σημαντικά πράγματα από μια συνάντηση. Το να μπορείτε εύκολα να τα διαχειριστείτε και να τα οργανώσετε είναι σημαντικό για να τα βρείτε αργότερα!

Επίπεδο 1

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

Δημιουργήστε μια φόρμα για να προσθέσετε νέες σημειώσεις και να τις προβάλετε σε μια λίστα.

Επίπεδο 2

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

Προσθέστε τη δυνατότητα να επισημάνετε ή να κατηγοριοποιήσετε τις σημειώσεις και μια εισαγωγή για να τις αναζητήσετε.

Επίπεδο 3

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

Προσθέστε τη Roam Research, που είναι εμπνευσμένη από την έρευνα των σημειώσεων, για να δημιουργήσετε ένα δίκτυο σκέψεων.

Να κάνω

  • Δημιουργήστε μια φόρμα
  • Αποθηκεύστε νέες σημειώσεις
  • Λίστα σημειώσεων
  • Προσθέστε ετικέτες ή κατηγορίες
  • Προσθήκη αναζήτησης σημειώσεων
  • Προσθήκη δικτύου σημειώσεων

Εργαλειοθήκη

  • Θέμα Gatsby Brain (github.com)
  • Fuse.js (fusejs.io)

Σεμινάρια

  • Πώς να προσθέσετε αναζήτηση σε μια εφαρμογή React με το Fuse.js (freecodecamp.org)

Εμπνευση

  • Αφρός (foambubble.github.io)
  • Έρευνα Roam (roamresearch.com)
  • Θέμα Gatsby Garden (github.com)

Ιδέα διάταξης

Διαστημικοί εισβολείς

Κατηγορία: Παζλ και παιχνίδια

Δημιουργήστε ένα διαστημικό εισβολέα παιχνίδι διαστημοπλοίων shooter για να πυροβολήσετε πολλά κύματα εχθρικών πλοίων.

Σύντομος

Το Space Invaders είναι ένα κλασικό arcade που σας φέρνει σε ένα διαστημικό σκάφος ενάντια σε μια εξωγήινη εισβολή. Καθώς προσπαθείτε να τους πυροβολήσετε, πυροβολούν πίσω και έχετε μόνο περιορισμένο ποσό προστασίας πριν ανοίξετε το χτύπημά σας.

Επίπεδο 1

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

Δημιουργήστε ένα διαστημικό σκάφος που μπορεί να κινηθεί και να πυροβολήσει εξωγήινους που δεν κινούνται.

Επίπεδο 2

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

Προσθέστε κίνηση στους αλλοδαπούς που πηγαίνουν δίπλα-δίπλα στην περιοχή παιχνιδιού. Κάθε φορά που οι εξωγήινοι φτάνουν στη μία πλευρά πρέπει να πέφτουν ένα επίπεδο. Πρέπει επίσης να επιταχυνθούν σε ορισμένα διαστήματα.

Επίπεδο 3

Είστε μόνος σας, αλλά ευτυχώς μπορείτε να λάβετε κάποια προστασία. Έχετε ασπίδες που μπορείτε να κρύψετε πίσω που σας προστατεύουν όσο διαρκούν.

Δημιουργήστε πολλές ασπίδες μπροστά από το διαστημικό σκάφος της συσκευής αναπαραγωγής που μπορεί να προκαλέσει περιορισμένη ζημιά.

Να κάνω

  • Δημιουργήστε ένα νέο παιχνίδι
  • Δημιουργήστε στατικούς εξωγήινους
  • Δημιουργήστε ένα διαστημικό σκάφος παίκτη
  • Προσθέστε στοιχεία ελέγχου διαστημικού σκάφους
  • Προσθέστε όπλο διαστημικού σκάφους
  • Ρυθμίστε τις παραβιάσεις αλλοδαπών
  • Κάντε τους εξωγήινους να γυρίσουν πίσω
  • Κάντε τους εξωγήινους να κινούνται
  • Προσθέστε διαστήματα εξωγήινων
  • Προσθέστε ασπίδες

Σεμινάρια

  • Μάθετε JavaScript δημιουργώντας 7 παιχνίδια (freecodecamp.org)

Εμπνευση

  • Space Invaders (codepen.io)

Ιδέα διάταξης

Θέμα πλαισίου

Κατηγορία: Εργαλεία & Βιβλιοθήκες

Δημιουργήστε ένα θέμα Gatsby που δημιουργεί ένα έργο με το πλαίσιο Tailwind CSS.

Σύντομος

Ως προγραμματιστές, συνήθως πρέπει να κάνουμε πολλά παρόμοια βήματα κάθε φορά που δημιουργούμε ένα νέο έργο. Αλλά εργαλεία όπως τα θέματα μας επιτρέπουν να αφαιρέσουμε αυτά τα βήματα και να τα συσκευάσουμε με έναν εύκολο στη χρήση τρόπο που μπορεί να λειτουργήσει για οποιοδήποτε νέο έργο.

Επίπεδο 1

Τα θέματα Gatsby είναι ένα σύστημα που μοιάζει με plugin, όπου μπορούμε να εκμεταλλευτούμε τον αγωγό Gatsby για να μοιραστούμε τη λειτουργικότητα ως πακέτο στα npm.

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

Δημιουργήστε ένα νέο θέμα Gatsby που, όταν χρησιμοποιείται, δημιουργεί μια νέα σελίδα οδηγού στυλ σε οποιοδήποτε έργο στο οποίο προστίθεται.

Επίπεδο 2

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

Προσθέστε ένα πλαίσιο CSS στο θέμα Gatsby που επιτρέπει στο έργο που έχει προστεθεί να χρησιμοποιήσει αυτό το πλαίσιο.

Επίπεδο 3

Μερικές φορές τα θέματα είναι καλύτερα μόνο ως εργαλεία, μερικές φορές είναι χρήσιμο να γίνει γνωμοδότηση. Ένας τρόπος για να προσθέσετε χρήσιμη λειτουργικότητα σε ένα πλαίσιο CSS είναι να δημιουργήσετε αποθέματα.

Δημιουργήστε επαναχρησιμοποιήσιμα στοιχεία React χρησιμοποιώντας το πλαίσιο CSS που μπορεί να χρησιμοποιηθεί στο έργο στο οποίο έχει προστεθεί το θέμα.

Να κάνω

  • Δημιουργήστε ένα νέο θέμα
  • Προσθήκη στο παράδειγμα έργου
  • Δημιουργία νέας σελίδας στυλ
  • Προσθήκη πλαισίου CSS
  • Χρησιμοποιήστε το CSS για παράδειγμα
  • Δημιουργήστε στοιχεία
  • Χρησιμοποιήστε εξαρτήματα

Εργαλειοθήκη

  • Θέματα Gatsby (gatsbyjs.org)
  • Tailwind (tailwindcss.com)

Σεμινάρια

  • Δημιουργία ενός θέματος (gatsbyjs.org)
  • Τι είναι το Tailwind CSS και πώς μπορώ να το προσθέσω στον ιστότοπό μου ή στην εφαρμογή React; (freecodecamp.org)

Εμπνευση

  • Θέμα Gatsby Tailwind (github.com)

Ιδέα διάταξης

Webmentions

Κατηγορία: Πρόσθετα έργου

Προσθέστε την ενσωμάτωση webmentions σε έναν ιστότοπο που εμφανίζει αλληλεπιδράσεις στο Twitter με τον ιστότοπο.

Σύντομος

Η κοινωνική αλληλεπίδραση είναι ένας αποτελεσματικός τρόπος για να προσελκύσετε περισσότερο κοινό και συνομιλία σε θέματα για τα οποία γράφουμε.

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

Επίπεδο 1

Προκειμένου να γίνει χρήση των Webmentions, ένας ιστότοπος πρέπει να διαμορφωθεί με μετα-ετικέτες για να παρέχει πληροφορίες.

Προσθέστε τις κατάλληλες μετα-ετικέτες σε έναν ιστότοπο και επικυρώστε τη χρήση του με το webmention.io.

Επίπεδο 2

Το Webmentions API είναι ένας τρόπος για να βλέπετε μέσω προγραμματισμού συνδέσεις σε κοινωνικές αλληλεπιδράσεις από μια διεύθυνση URL του ιστότοπού σας. Σας επιτρέπει να αποκτήσετε τον τύπο αλληλεπίδρασης, ακόμη και το προφίλ του ατόμου.

Συνδέστε έναν ιστότοπο στο Webmentions και προσθέστε μια λίστα κοινωνικών αλληλεπιδράσεων σε σελίδες δημοσιεύσεων ιστολογίου.

Επίπεδο 3

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

Προσθέστε έναν κοινωνικό σύνδεσμο που, όταν κάνετε κλικ, δημιουργεί ένα tweet με έναν σύνδεσμο προς τη σελίδα.

Να κάνω

  • Προσθέστε μετα-ετικέτες στον ιστότοπο
  • Επικύρωση μετα-ετικετών
  • Συνδεθείτε στο Webmention
  • Συνδεθείτε κοινωνικά με το Bridgy
  • Λίστα αλληλεπιδράσεων
  • Προσθήκη κουμπιού tweet

Εργαλειοθήκη

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • Gatsby Plugin Webmention (github.com)

Σεμινάρια

  • Indieweb pt2: Χρήση Webmentions στο Eleventy (mxb.dev)
  • Clientside Webmentions (swyx.io)
  • Ξεκινώντας με το Webmentions στο Gatsby (knutmelvaer.no)
  • Κατασκευή Gatsby Plugin Webmentions (christopherbiscardi.com)

Εμπνευση

  • Knut Melvær (knutmelvaer.no)
  • Swyx (swyx.io)

Ιδέα διάταξης

Κυνήγι προϊόντων

Κατηγορία: Κλώνοι

Δημιουργήστε έναν κλώνο κυνήγι προϊόντος που επιτρέπει στους χρήστες να δημοσιεύουν ένα νέο προϊόν με βαθμολογίες

Σύντομος

Όλοι ζούμε για προϊόντα, είτε πρόκειται για κινητά τηλέφωνα είτε για εφαρμογές που χρησιμοποιούμε στους φορητούς υπολογιστές μας.

Ενώ υπάρχουν τόνοι προϊόντων στον κόσμο, μπορεί να είναι δύσκολο να περιηγηθείτε στα καλά και τα κακά. Εργαλεία όπως το Product Hunt παρέχουν μια πλατφόρμα για να μάθετε νέα εργαλεία και να λαμβάνετε αντιδράσεις και κριτικές από άλλους.

Επίπεδο 1

Το πιο σημαντικό μέρος για την εκμάθηση νέων προϊόντων είναι το ίδιο το προϊόν. Θέλουμε να μάθουμε τι είναι το προϊόν, πώς φαίνεται και πώς λειτουργεί.

Δημιουργήστε μια σελίδα που σας επιτρέπει να προσθέσετε ένα νέο προϊόν σε έναν ιστότοπο με τίτλο, εικόνα και περιγραφή.

Επίπεδο 2

Όταν μαθαίνετε για προϊόντα, οι κριτικές είναι ένας τρόπος που μπορούμε να εμπιστευτούμε ένα προϊόν πριν το αγοράσουμε. Μας βοηθά να κερδίσουμε εμπιστοσύνη σε αυτό που πρόκειται να ξοδέψουμε τα χρήματα ή τον χρόνο μας.

Προσθέστε τη δυνατότητα των ατόμων να προσθέσουν κριτικές για κάθε προϊόν.

Επίπεδο 3

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

Προσθέστε τη δυνατότητα αναζήτησης προϊόντων και περιήγησης ανά κατηγορία.

Να κάνω

  • Δημιουργία ιστότοπου προϊόντος
  • Δημιουργία βάσης δεδομένων
  • Προσθήκη φόρμας προϊόντος
  • Προσθήκη προϊόντος στη βάση δεδομένων
  • Ζητήστε προϊόν για σελίδα
  • Προσθήκη φόρμας κριτικής
  • Προσθέστε κριτικές στη βάση δεδομένων
  • Προσθέστε κριτικές στο προϊόν
  • Προσθήκη αναζήτησης προϊόντων
  • Προσθήκη κατηγοριών προϊόντων

Εργαλειοθήκη

  • Hasura (hasura.io)

Σεμινάρια

  • Δημιουργία εφαρμογής κλώνου Product Hunt χρησιμοποιώντας Hasura και Next.js (logrocket.com)
  • Πώς να δημιουργήσετε μια βασική έκδοση του Product Hunt χρησιμοποιώντας το React (freecodecamp.org)

Ιδέα διάταξης

Περισσότερα Έργα

Αν θέλετε περισσότερες ιδέες για έργα, δείτε 50 Έργα για το React & τον Στατικό Ιστό!

Σταματήστε να αναρωτιέστε τι πρέπει να φτιάξω; Κατεβάστε δωρεάν στο 50reactprojects.com

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου