Wenn Sie diesen Beitrag lesen, suchen Sie wahrscheinlich nach einer Idee. Sie möchten wahrscheinlich eine einfache App erstellen, die Sie in einem Lernprogramm oder in Ihrem Beispielprojekt verwenden können, um ein neues Framework oder eine neue API zu testen. Aber Sie können nichts finden, was wirklich mit Ihnen in Resonanz steht.
Es muss einfach genug sein, um nicht Ihre ganze Zeit in Anspruch zu nehmen, aber gleichzeitig komplex genug, um es wert zu sein, getan zu werden.
"Ich möchte keine weitere To-Do-App erstellen!" Ich höre dich denken.
Ich verstehe es. Ich habe diesen Beitrag geschrieben, um mir selbst zu helfen, und ich hoffe, er wird Ihnen auch helfen.
Was Sie unten finden
Einige der Ideen sind in sich geschlossen (ohne die Verwendung einer externen API), während andere berühmte öffentliche APIs verwenden, mit denen Sie problemlos vorgefertigte Daten abrufen können.
Einige erfordern einen Serverteil, andere nicht, was möglicherweise auch von Ihrer Implementierung abhängt.
Aber ich habe versucht sicherzustellen, dass diese Ideen sind:
- gut für ein Tutorial
- gut mit Webtechnologien zu experimentieren
- nicht etwas, das eine Woche dauern wird, um herauszufinden
- keine "Startup-Ideen"
- gezielt auf Web-Apps
- leicht zu erklären
- einfach zu bauen (weniger als 24 Stunden, wenn vorbereitet)
- einfach mit neuen Funktionen zu erweitern
Also, genug geredet, hier ist die Liste!
Einfache Apps ohne externe Abhängigkeiten
Eine Weight Tracker App
- Es akzeptiert eine Reihe von manuellen Eingaben von Gewichtsmessungen, die zu verschiedenen Daten durchgeführt wurden
- Es kann ein Diagramm zeichnen
- Sie können damit mehrere Entitäten verfolgen, z. B. das Gewicht einer Person
- Es speichert die Gewichte irgendwo
Eine Taschenrechner-App
- Ein Standardrechner: Zahlen, +, -, *, / und das Ergebnis
Eine Buchdatenbank
- Geben Sie die Bücher ein, die Sie besitzen
- Geben Sie die Bücher ein, die Sie kaufen möchten
- Speichern Sie die Buchinformationen und Bilder
Eine Rezept-App
- Geben Sie mit den Schritten einen Namen und eine Beschreibung ein
- Bilder haben
- Haben Sie ein Ranking für Schwierigkeit und Qualität
- Fügen Sie die benötigte Zeit hinzu
- Haben Sie verschiedene Schritte mit jeweils einem Bild
- Bewahren Sie sie irgendwo auf
Ein Bill Tracker
- Protokollieren Sie Rechnungen, Beträge und Daten
- Rechnungen auflisten
- Habe ein paar Grafiken (dieses Jahr / letztes Jahr)
- Bewahren Sie sie irgendwo auf
Ein Ausgaben-Tracker
- Kosten protokollieren und markieren (oder Kategorien haben)
- Kosten auflisten
- Habe ein paar Grafiken (letzter Monat / letztes Jahr)
- Bewahren Sie sie irgendwo auf
Eine Chat-Anwendung
- Eine Art abgespeckter Slack
- Personen treten ohne Authentifizierung ein und erhalten einen Namen, der gespeichert wird, wenn sie zurückkommen
- Speichern Sie den Verlauf
- Benachrichtigungen hinzufügen
Eine Notizen-App
- Fügen Sie eine neue Notiz hinzu
- Listen Sie alle Ihre Notizen in der Seitenleiste auf
- Bewahren Sie sie irgendwo auf
Eine persönliche Tagebuch-App
- Fügen Sie Einträge mit Datum und Text hinzu
- Neuere zuerst anzeigen
- Bilder anhängen
- Bewahren Sie sie irgendwo auf
Eine Pomodoro App
- Geben Sie eine Zeit ein
- Timer starten
- Benachrichtigen, wenn die Zeit abgelaufen ist
Ein Meme Generator
- Habe 10 beliebte Meme-Bilder
- Lassen Sie den Benutzer den Text hinzufügen
- Ergebnis ist Bild + Text
- Speichern Sie den Verlauf
Tic-Tac-Toe-Spiel
Wir alle wissen, was ein Tic-Tac-Toe-Spiel ist?
Das Spiel des Lebens
Ein großartiges Projekt mit Mathematik und Grafik.
Eine Blog-Engine
- Benutzer kann sich anmelden und Beiträge hinzufügen
- Besucher können Kommentare hinzufügen
- Speichern Sie die Daten irgendwo
Ein QS-Motor
- Benutzer kann sich anmelden
- Fragen hinzufügen
- Antwort auf Fragen
- Erlauben Sie dem ursprünglichen Benutzer, die beste Frage auszuwählen
- Speichern Sie die Daten irgendwo
Eine Forum-Engine
- Benutzer kann sich anmelden
- Beiträge hinzufügen
- Kommentare zu Beiträgen
- Speichern Sie die Daten irgendwo
Ein einbettbarer Live-Chat
Denken Sie an Intercom oder Olark.
- Haben Sie ein "Backend", in dem Sie antworten
- Auf einer Webseite einbetten
- Lassen Sie sich privat schreiben
API-basierte Apps
Ein Hacker News Client
- Listen Sie die beliebtesten Beiträge
- Kommentare eines Beitrags anzeigen
- Benutzerprofil anzeigen
- Suche HN
Lassen Sie sich von HNPWA und Awesome Hacker News inspirieren.
Ein Reddit-Client
- Listen Sie die beliebtesten Beiträge
- Listen Sie die Kommentare eines Beitrags auf
- Benutzerprofil anzeigen
Ein Instagram-Client
- Geben Sie einen Hashtag ein und erhalten Sie die neuesten Beiträge
- Geben Sie einen Benutzernamen ein und erhalten Sie die neuesten Beiträge
- Ermöglichen Sie das Speichern eines oder mehrerer Hashtags / Benutzernamen und das Abrufen der neuesten Beiträge von diesen
Ein GitHub-API-Client
- Listen Sie die beliebten Repositories von heute / Woche / Monat auf
- Listen Sie die neuesten Commits in einem Repository auf
- Zeigen Sie eine Person oder Organisation an, deren öffentliche Repositories nach Sternen geordnet sind
Ein Unsplash-API-Client
- Suchen Sie Bilder nach Thema
- Lassen Sie den Benutzer einen Begriff eingeben und relevante Bilder anzeigen
Beginnen Sie mit der Unsplash-API, um sich inspirieren zu lassen.
Daten für Ihre Beispiel-Apps
Manchmal fangen Sie an, eine einfache App zu erstellen, aber Sie langweilen sich mit den Daten, die Sie verwenden können. Sie müssen sich nicht langweilen! Sie können reale Daten oder zufällige Daten verwenden.
Öffentliche APIs, die Sie in Beispielprojekten verwenden können
Vielleicht haben Sie eine Idee für eine perfekt schöne CRUD-App oder etwas, das mit einer API funktioniert, aber Sie möchten die API gar nicht erst erstellen.
Ich empfehle Ihnen, Airtable zu testen, das eine großartige API für Entwickler bietet. Es ist sehr einfach zu bedienen, wie eine Datenbank.
Hier sind einige erstaunliche öffentliche APIs, die Sie verwenden können:
- Die Cat-API
- Die Hunde-API
- Die Chuck Norris API
- F ** k Aus als Service-API
- Zitiert API
- Zitiert API
- Dad Jokes API
- Die Spotify-API
- Die New York Times API
- Die Wikipedia-API
- Die Wikidata-API
- Die mittlere API
- Design Quotes API
- Die GoodReads-API
- Die Dribbble-API
- Die 500px-API
- Die Unsplash-API
- Die Giphy API - GIFs!
- Die Pixabay-API
- Wechselkurse
- Site-Screenshots-API
- Die Oxford Dictionary API
- Website Technologies API
- Die Mapbox-API
- Music Lyrics API von Genius
- Site Meta Tags API
- Die EventBrite-API
- Änderungsprotokolle für Open Source-Projekte
- Die GitHub REST API
- Die GitHub GraphQL API
- QR-Codes API
- Die StackExchange-API
- Wörter und Synonyme
- Die Nasa API
- Die SpaceX-API
- Die Hacker News API
- Die Instagram API
- Die Reddit-API
- Die Slack-API
- Die Twitter-API
- Die YouTube-API
Bildplatzhalter für Ihre Beispielprojekte
- Placeholder.com
- Placekitten
Bildgeneratoren
Avatare:
- RoboHash
- Entzückende Avatare
- DiceBear Avatare (Pixelkunst)
- Lorem Picsum
Beispieltextgenerator für Ihre Beispielprojekte
Lorem Ipsum ist langweilig. Mach es würziger!
Wenn Sie darauf bestehen, Lorem Ipsum zu verwenden, ist Loripsum ein guter Generator.
Andere gefälschte Daten
FakeJSON verfügt über unzählige Funktionen zur Generierung gefälschter Daten.
JSONPlaceholder verfügt über gefälschte Beiträge, Kommentare, Fotos, Aufgaben, Benutzer und Alben, die alle für den REST-Verbrauch bereit sind.
Benötigen Sie eine gefälschte Namens- / Benutzerdatengenerierung? Überprüfen Sie die UI-Namen und RandomUser.
Einpacken
Ich hoffe, diese Liste ist umfassend genug, um Ihren Bedürfnissen zu entsprechen!
Habe Spaß!
Möchten Sie JavaScript lernen? Holen Sie sich mein eBook bei jshandbook.com