Willst du etwas Spaß bauen? Hier ist eine Liste mit Beispielideen für Web-Apps.

Möchten Sie JavaScript lernen? Holen Sie sich mein eBook bei jshandbook.com

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