Θέλετε να φτιάξετε κάτι διασκεδαστικό; Ακολουθεί μια λίστα με δείγματα ιδεών για εφαρμογές ιστού.

Ενδιαφέρεστε να μάθετε JavaScript; Αποκτήστε το ebook μου στο jshandbook.com

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

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

"Δεν θέλω να δημιουργήσω άλλη εφαρμογή που πρέπει να κάνουμε!" Σε ακούω να σκέφτεσαι.

Το καταλαβαίνω. Έγραψα αυτήν την ανάρτηση για να βοηθήσω τον εαυτό μου και ελπίζω να σας βοηθήσει επίσης.

Τι θα βρείτε παρακάτω

Μερικές από τις ιδέες είναι αυτόνομες (δεν περιλαμβάνουν τη χρήση εξωτερικού API), ενώ μερικές χρησιμοποιούν διάσημα δημόσια API όπου μπορείτε εύκολα να τραβήξετε προκατασκευασμένα δεδομένα.

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

Αλλά προσπάθησα να βεβαιωθώ ότι αυτές οι ιδέες είναι:

  • καλό για ένα σεμινάριο
  • καλό να πειραματιστείτε με τεχνολογίες ιστού
  • όχι κάτι που θα χρειαστεί μια εβδομάδα για να το καταλάβω
  • όχι "ιδέες εκκίνησης"
  • στοχευμένες σε εφαρμογές ιστού
  • εύκολο να εξηγηθεί
  • εύκολο στην κατασκευή (λιγότερο από 24 ώρες, εάν είναι προετοιμασμένο)
  • εύκολο να επεκταθεί με νέες δυνατότητες

Λοιπόν, αρκετή συζήτηση, εδώ είναι η λίστα!

Απλές εφαρμογές χωρίς εξωτερικές εξαρτήσεις

Μια εφαρμογή παρακολούθησης βάρους

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

Μια εφαρμογή αριθμομηχανής

  • Μια τυπική αριθμομηχανή: αριθμοί, +, -, *, / και το αποτέλεσμα

Βάση δεδομένων βιβλίου

  • Εισαγάγετε τα βιβλία που σας ανήκουν
  • Εισαγάγετε τα βιβλία που θέλετε να αγοράσετε
  • Αποθηκεύστε τις πληροφορίες και τις εικόνες του βιβλίου

Μια εφαρμογή συνταγών

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

Ένας εντοπιστής λογαριασμών

  • Λογαριασμοί καταγραφής, ποσά και ημερομηνίες
  • Λίστα λογαριασμών
  • Έχετε μερικά γραφήματα (φέτος / πέρυσι)
  • Αποθηκεύστε τα κάπου

Παρακολούθηση δαπανών

  • Καταγράψτε τα έξοδα και προσθέστε ετικέτες (ή έχετε κατηγορίες)
  • Λίστα δαπανών
  • Έχετε λίγα γραφήματα (τελευταίος μήνας / πέρυσι)
  • Αποθηκεύστε τα κάπου

Μια εφαρμογή συνομιλίας

  • Κάποιο είδος του Slack-down Slack
  • Τα άτομα εισέρχονται χωρίς έλεγχο ταυτότητας και τους αποδίδεται ένα όνομα, το οποίο αποθηκεύεται όταν επιστρέψουν
  • Αποθηκεύστε το ιστορικό
  • Προσθήκη ειδοποιήσεων

Μια εφαρμογή σημειώσεων

  • Προσθέστε μια νέα σημείωση
  • Καταγράψτε όλες τις σημειώσεις σας στην πλευρική γραμμή
  • Αποθηκεύστε τα κάπου

Μια προσωπική εφαρμογή ημερολογίου

  • Προσθέστε καταχωρήσεις με ημερομηνία και κείμενο
  • Εμφάνιση πιο πρόσφατων πρώτων
  • Επισυνάψτε φωτογραφίες
  • Αποθηκεύστε τα κάπου

Μια εφαρμογή pomodoro

  • Εισαγάγετε μια ώρα
  • Ξεκινήστε το χρονόμετρο
  • Ειδοποίηση όταν τελειώσει ο χρόνος

Μια γεννήτρια meme

  • Έχετε 10 δημοφιλείς εικόνες meme
  • Αφήστε τον χρήστη να προσθέσει το κείμενο
  • Το αποτέλεσμα είναι εικόνα + κείμενο
  • Αποθηκεύστε το ιστορικό

Παιχνίδι Tic-tac-toe

Όλοι γνωρίζουμε τι είναι το παιχνίδι tic-tac-toe;

Το παιχνίδι της ζωής

Ένα μεγάλο έργο που περιλαμβάνει μαθηματικά και γραφικά.

Μια μηχανή blog

  • Επιτρέψτε στο χρήστη να συνδέεται και να προσθέτει αναρτήσεις
  • Οι επισκέπτες μπορούν να προσθέσουν σχόλια
  • Αποθηκεύστε τα δεδομένα κάπου

Ένας κινητήρας QA

  • Επιτρέψτε στο χρήστη να συνδεθεί
  • Προσθέστε ερωτήσεις
  • Απάντηση σε ερωτήσεις
  • Επιτρέψτε στον αρχικό χρήστη να επιλέξει την καλύτερη ερώτηση
  • Αποθηκεύστε τα δεδομένα κάπου

Μια μηχανή φόρουμ

  • Επιτρέψτε στο χρήστη να συνδεθεί
  • Προσθήκη δημοσιεύσεων
  • Σχολιάστε δημοσιεύσεις
  • Αποθηκεύστε τα δεδομένα κάπου

Μια ενσωματωμένη ζωντανή συνομιλία

Σκεφτείτε Intercom ή Olark.

  • Έχετε ένα «backend» όπου απαντάτε
  • Ενσωμάτωση σε ιστοσελίδα
  • Αφήστε τους χρήστες να σας γράψουν ιδιωτικά

Εφαρμογές με API

Ένας πελάτης ειδήσεων χάκερ

  • Λίστα των δημοφιλών δημοσιεύσεων
  • Εμφάνιση σχολίων μιας ανάρτησης
  • Εμφάνιση προφίλ χρήστη
  • Αναζήτηση HN

Ρίξτε μια ματιά στο HNPWA και στο Awesome Hacker News για έμπνευση.

Ένας πελάτης Reddit

  • Λίστα των δημοφιλών δημοσιεύσεων
  • Αναφέρετε τα σχόλια μιας ανάρτησης
  • Εμφάνιση προφίλ χρήστη

Ένας πελάτης Instagram

  • Εισαγάγετε ένα hashtag και λάβετε τις πιο πρόσφατες δημοσιεύσεις
  • Εισαγάγετε ένα όνομα χρήστη και λάβετε τις πιο πρόσφατες δημοσιεύσεις
  • Επιτρέψτε να αποθηκεύσετε ένα ή περισσότερα hashtag / ονόματα χρήστη και να λάβετε όλες τις τελευταίες αναρτήσεις από αυτές

Ένας πελάτης API GitHub

  • Παραθέστε τα δημοφιλή αποθετήρια από σήμερα / εβδομάδα / μήνα
  • Λίστα των τελευταίων δεσμεύσεων σε ένα αποθετήριο
  • Εμφάνιση δημόσιων αποθετηρίων ατόμων ή οργανώσεων με κατάταξη με αστέρια

Ένα πρόγραμμα-πελάτης Unsplash API

  • Αναζήτηση εικόνων ανά θέμα
  • Αφήστε τον χρήστη να εισαγάγει έναν όρο, να εμφανίσει σχετικές εικόνες

Ξεκινήστε από το Unsplash API για έμπνευση.

Δεδομένα για το δείγμα εφαρμογών σας

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

Δημόσια API που μπορείτε να χρησιμοποιήσετε σε παραδείγματα έργων

Ίσως έχετε μια ιδέα για μια τέλεια εφαρμογή CRUD ή κάτι που να λειτουργεί με ένα API, αλλά δεν θέλετε να δημιουργήσετε το API.

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

Ακολουθούν μερικά εκπληκτικά δημόσια API που μπορείτε να χρησιμοποιήσετε:

  • Το API Cat
  • Το API σκυλιών
  • Το API Chuck Norris
  • F ** k Off ως API υπηρεσίας
  • API τιμών
  • API τιμών
  • API αστείων μπαμπάδων
  • Το API Spotify
  • Το API των New York Times
  • Το API της Wikipedia
  • Το API Wikidata
  • Το μεσαίο API
  • API προσφορών σχεδίασης
  • Το API GoodReads
  • Το API Dribbble
  • Το API 500px
  • Το API Unsplash
  • Το API Giphy - GIF!
  • Το API του Pixabay
  • Συναλλαγματικές ισοτιμίες
  • API στιγμιότυπων οθόνης ιστότοπου
  • Το API λεξικού της Οξφόρδης
  • API τεχνολογιών ιστοτόπου
  • Το API του Mapbox
  • API στίχων μουσικής από την Genius
  • API μετα-ετικετών ιστότοπου
  • Το API EventBrite
  • Ανοιχτές πηγές έργων changelogs
  • Το API REST GitHub
  • Το API GitHub GraphQL
  • API κωδικών QR
  • Το API StackExchange
  • Λέξεις και συνώνυμα
  • Το API της Nasa
  • Το API SpaceX
  • Το API ειδήσεων χάκερ
  • Το API Instagram
  • Το API Reddit
  • Το Slack API
  • Το API του Twitter
  • Το API του YouTube

Placeholder εικόνας για τα δείγματα έργων σας

  • Placeholder.com
  • Πουκάκι

Δημιουργίες εικόνων

Είδωλα:

  • RoboHash
  • Αξιολάτρευτα είδωλα
  • DiceBear Avatars (εικονοστοιχεία)
  • Lorem Picsum

Δείγμα δημιουργίας κειμένου για τα δείγματα έργων σας

Ο Lorem Ipsum είναι βαρετός. Μπαχαρικά!

Εάν επιμένετε να χρησιμοποιήσετε το Lorem Ipsum, το Loripsum είναι μια καλή γεννήτρια.

Άλλα πλαστά δεδομένα

Το FakeJSON έχει τόνους ψεύτικων δυνατοτήτων παραγωγής δεδομένων.

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

Χρειάζεστε ψεύτικο όνομα / δημιουργία δεδομένων χρήστη; Ελέγξτε τα ονόματα UI και το RandomUser.

Τυλίγοντας

Ελπίζω ότι αυτή η λίστα είναι αρκετά περιεκτική ώστε να ανταποκρίνεται στις ανάγκες σας!

Καλα να περνατε!

Ενδιαφέρεστε να μάθετε JavaScript; Αποκτήστε το ebook μου στο jshandbook.com