6 Absurde Ideen zum Erstellen Ihrer ersten Web-App

Benötigen Sie ein paar Ideen zum Erstellen einer einfachen Web-App? Diese 6 Beispiele helfen Ihnen dabei, alle Schlüsselkompetenzen zu üben und haben Spaß dabei!

Okay, Sie haben bereits die Front-End-Webentwicklung gelernt und möchten jetzt Ihre Entwickler-Muskeln bei der nächsten großen Herausforderung spielen lassen: Full-Stack-Web-Apps. Sie haben wahrscheinlich viele ehrgeizige Projektideen im Kopf. Aber wie können Sie feststellen, welche mit Ihren aktuellen Fähigkeiten angemessen sind?

Hier sind 6 ungewöhnliche Ideen für Ihre erste Web-App, mit denen Sie Erfahrungen mit allen grundlegenden Konzepten der Full-Stack-Webentwicklung sammeln können. Am Ende haben Sie ein unverwechselbares Projekt, das Sie in Ihr Portfolio aufnehmen können. Es wird Ihnen helfen, sich von allen langweiligen Projekten abzuheben, die alle anderen bauen.

Hinweis: Wenn Sie noch HTML / CSS / JS lernen, habe ich 8 Ideen zusammengestellt, um nur das Front-End zu üben.

1. FastFood Guru

Die Idee: Yelp ist eine sehr beliebte Quelle für Restaurantbewertungen. Die meisten Leute nutzen es jedoch, um mehr über Restaurants zu erfahren, von denen sie noch nie zuvor gehört haben. Was ist mit massiven Fast-Food-Ketten wie McDonald's und Burger King? Viele Leute gehen zu diesen, aber irgendwie sind sie kein beliebter Überprüfungskandidat.

Ja, Sie könnten mir sagen, dass jedes Menü ziemlich gleich ist und das Essen auch immer gleich schmeckt. Wenn Sie jedoch viele dieser Kettenrestaurants besucht haben, wissen Sie, dass es einige Dinge gibt, die sich stark unterscheiden.

Welches hat das luxuriöseste Badezimmer? Welche markieren ihre Menüpreise? Welche haben um 1 Uhr morgens lustige Betrunkene? Dies wäre eine Bewertungsseite für jene Fast-Food-Ketten, die angeblich konsistent sind.

Art der Website: Bewertungen

Schlüsselfunktionen:

  • Möglichkeit, ein Konto mit einem Bild, einem Benutzernamen und einem Ort zu erstellen
  • Verwenden Sie Google Maps, damit ein Benutzer ein bestimmtes Restaurant auswählen kann, indem er entweder einen Ort auf der Karte sucht oder einen Namen eingibt und aus einer Liste auswählt (typeahead).
  • Ermöglichen Sie dem Benutzer, eine Bewertung zu schreiben
  • Ermöglichen Sie dem Benutzer, die folgenden Fast-Food-spezifischen Themen auf einer Skala von 1 bis 5 zu bewerten: Badezimmerqualität, Personal, Sauberkeit, Durchfahrts-Frechheit, Liefergeschwindigkeit
  • Möglichkeit, Bilder zur Bewertung hinzuzufügen
  • Responsive Design bis hin zum Handy

Hauptentscheidungsentscheidungen:

  • Ist das eine ernsthafte Website oder geht es wirklich um die lustigen Dinge, die in einem Fast-Food-Laden passieren können?
  • Wer wird diese Seite nutzen? Leute auf Roadtrips, die versuchen, einen Ort zum Mittagessen zu wählen? Häufige Fast-Food-Besucher, die ihre Erfahrungen teilen möchten?
  • Sollte dies eine Community sein, in der die Leute häufig auf der Website nach lustigen Geschichten suchen und daran teilnehmen? Oder mehr einmalige, seltene Verwendung?
  • Welche Social-Media-Integration könnte dazu beitragen, Geschichten / Rezensionen zu verbreiten?

Was Sie lernen werden: Benutzersysteme und Bildspeicher sind zwei große Herausforderungen. Dies ist eine gute Gelegenheit, jeweils eine Basisversion zu implementieren. Wenn Sie sich dafür entscheiden, diese Website zu einer humororientierten Website zu machen, wie kann Ihr Design dann ein angemessenes Maß an Humor beeinflussen, das nicht böse ist? Wenn Sie eine Fangemeinde haben möchten, ist dies ein guter Test, um festzustellen, wo Sie möglicherweise aktuelle Fast-Food-Bewertungen abrufen können, um Ihre Datenbank zu erstellen und sofortigen Inhalt zu erstellen.

2. GrillBer

Die Idee: Ja, du hast es erraten. Uber zum Grillen. Wenn Sie in einer Stadt leben, haben Sie möglicherweise keinen Platz für einen Grill oder einen sicheren Ort, um ihn abzusperren. Wenn Sie beispielsweise im 20. Stock eines Wohnhauses wohnen, wo können Sie Ihren Grill aufstellen?

Problem gelöst mit GrillBer, einem Lieferservice für Grillverleih. Auf diese Weise können Kunden ohne Logistik ein Cookout durchführen. Vielleicht möchten Sie sogar eine Rolle Rasen und Stühle hinzufügen, damit Ihre Kunden einen Popup-Park auf einem Parkplatz erstellen können!

Art des Standorts: Lieferung / Logistik

Schlüsselfunktionen:

  • Formular, mit dem ein Benutzer einen Grill für eine bestimmte Anzahl von Stunden zu einem bestimmten Stundensatz buchen und in einer Datenbank speichern kann. Der Benutzer muss seinen Namen, seine Adresse usw. eingeben.
  • Kalender, der verschiedene Zeiten anzeigt, zu denen Grills verfügbar sind. Ein Beispiel hierfür finden Sie in Zipcar.
  • Produktdetailseite mit dem Grill und weiteren Informationen zu den verschiedenen Add-Ons wie Stühlen und Rasen.
  • Social Media-Integration mit Instagram, die all die fantastischen Cookouts zeigt, die Menschen mit GrillBer durchgeführt haben.
  • Ein Checkout-Prozess und ein Zahlungssystem mit Stripe, damit Benutzer den Prozess abschließen können.

Hauptentscheidungsentscheidungen:

  • Dies muss nicht wie Uber visuell anregend sein. Aber braucht es überhaupt einen coolen interaktiven Kalender? Oder können Sie mit einem Grundformular wie einer E-Commerce-Website davonkommen?
  • Wie viele Schmerzen beim Grillen möchten Sie beheben? Erwarten Sie, dass der Benutzer den Grill reinigt? Sind dies die billigeren, aber langsameren Holzkohlegrills oder teurere Gasgrills?
  • Cookouts sollen ein stressfreies Erlebnis sein. Wenn die Leute sich beeilen müssen, um ihr Essen zu kochen, wird es keine großartige Erfahrung sein. Wie können Sie mithilfe von Kopie und Mikrokopie klar angeben, dass dies kein stressiger Prozess sein wird?
  • Welche Logik müssen Sie in Ihrem Backend für das Buchungssystem haben? Müssen Sie eine halbe Stunde vorher und nachher für die Lieferung des Grills einplanen?

Was Sie lernen werden: So koordinieren Sie das Front-End und das Back-End eines Buchungssystems. Überlegen Sie, wie viele Websites dies tun. Buchungsseiten für Restaurants. Buchungsseiten für Konferenzräume. Es gibt viele mehr. Dies ist ein sehr verbreitetes Muster und eine großartige Leistung, die Sie in Ihrem Lebenslauf zur Diskussion stellen müssen.

3. NetworkTap

Die Idee: Social Media ist eine zunehmend beliebte Werbestrategie. Unternehmen nutzen Twitter, Facebook, LinkedIn und Pinterest, um Kunden mitten im Surfen zu erreichen. Es gibt jedoch einen ungenutzten Bereich: den tatsächlichen Beitrag des Benutzers.

Werbetreibende lieben Mundpropaganda-Marketing, und wenn Nutzer die eigentlichen Anzeigen selbst veröffentlichen, ist dies eine großartige Möglichkeit, andere in ihrem Newsfeed zu verwirren!

Auf dieser Website können Benutzer, die ein wenig mehr Geld verdienen möchten, freiwillig Informationen über sich selbst bereitstellen, und Werbetreibende können einen Beitrag mit einer Anzeige kurzzeitig entführen. Benutzer werden pro Ansicht oder auf andere Weise bezahlt. Jetzt können Anzeigen auf neue und innovative Weise Augäpfel erreichen!

Art der Website: Marktplatz

Schlüsselfunktionen:

  • Einzelne Benutzer müssen in der Lage sein, ein Konto mit Informationen wie Standort, Alter, Interessen und Familienstand zu erstellen, damit Werbetreibende auswählen können, wen sie zu ihrem Produkt veröffentlichen möchten
  • Werbetreibende müssen in der Lage sein, ein Konto zu erstellen und Informationen über ihre Markenidentität und die Personen, die sie erreichen möchten, zu veröffentlichen.
  • Jeder Nutzer muss in der Lage sein, sich an einen Werbetreibenden zu wenden, um über sein Interesse an einem Beitrag zu sprechen.
  • Jeder Werbetreibende muss in der Lage sein, alle Nutzer nach Kriterien wie Alter, Geschlecht usw. zu durchsuchen und eine Massennachricht über das Interesse an einer Anzeige an die ausgewählte demografische Gruppe zu senden.
  • Nutzer und Werbetreibende müssen sich auf eine Zahlungsmethode einigen: Pay-per-Like, Pay-per-View, Pay-per-Click oder andere.

Hauptentscheidungsentscheidungen:

  • Die Suchfunktion wird für die Werbetreibenden eine große Sache sein. Wie repräsentieren Sie jedes Suchergebnis? Möglicherweise möchten Sie Datenvisualisierung wie Google Analytics verwenden.
  • Wie können Sie die meisten Informationen aus den Benutzern herausholen? Integration in ein Social Media Konto? Vielleicht zahlen sie mehr basierend darauf, wie viele Informationen sie anbieten?
  • Welche Leistungsdynamik besteht zwischen Werbetreibenden und Nutzern? Erhalten Nutzer Eingaben zu Anzeigentext und Bild? Oder treffen Werbetreibende alle Entscheidungen darüber, was gezeigt wird?
  • Die Leute werden nicht 10 Dollar pro Woche davon wollen. Sie werden wahrscheinlich mindestens 100 Dollar wollen. Wie können Sie dies mit der Anzahl der Anzeigen in Einklang bringen, die wahrscheinlich geschaltet werden müssen, um dorthin zu gelangen? Niemand möchte seinen Newsfeed komplett verschmutzen.
  • Wie schlau sollen die Anzeigen sein? Sollte es offensichtlich sein oder sollte es sich eher wie ein authentischer Beitrag anfühlen?

Was Sie lernen werden: Marktplätze sind eine weitere sehr beliebte Art von Website. Mit diesem können Sie zwei Arten von Konten erstellen, was eine übliche Struktur ist. Messaging innerhalb einer Site ist eine gute Fähigkeit, um mit dieser zu lernen. Schauen Sie sich Fiverr für ein Beispiel an.

4. Repariere mein Schiff

Die Idee: Dies ist die Abkürzung für "Repair My Relationship". Es ist ein Forum, in dem Benutzer über ihre Beziehungsprobleme posten können und andere Ratschläge zur Behebung ihrer Probleme geben können.

Wenn Sie die guten Communities auf Websites wie 4chan, Reddit oder Bodybuilding.com kennengelernt haben, wissen Sie, dass es viele Menschen gibt, die bereit sind, ein paar Minuten Zeit zu spenden, um zu helfen.

Art der Website: Forum

Schlüsselfunktionen:

  • Ein Post / Kommentar-System ähnlich wie Reddit oder Quora.
  • Ein Upvote-System für Beiträge und Kommentare
  • Eine Gelegenheit für den Benutzer, zu posten, was er tatsächlich mit seinem Lebensgefährten versucht hat und welche Ergebnisse sich daraus ergeben
  • Ein Abzeichen- oder Karmasystem zur Belohnung häufig aufgeregter Benutzer
  • Ein Benutzerkontosystem für diejenigen, die Kommentare abgeben oder Beiträge verfassen möchten, ähnlich wie Reddit

Hauptentscheidungsentscheidungen:

  • Sollte dies wie Reddit stärker anonymisiert oder aus Gründen der Glaubwürdigkeit an ein Social-Media-Konto wie Quora gebunden sein?
  • Auf dieser Seite wird es viele Trolle geben. Wie gehst du damit um?
  • Sollte sich dies ausschließlich auf romantische Beziehungen beziehen? Oder auch Freundschaften?
  • Wie können Sie das Ausweissystem verwenden, um besonders gute Kommentatoren zu motivieren, wiederzukommen?

Was Sie lernen werden: So erstellen Sie ein Forum! Es gibt auch viele Leute da draußen, die bereit sind, ein paar Minuten ihrer Zeit zu spenden, um Internet-Fremden in Not zu helfen. Ernsthaft. Ihre größte Herausforderung besteht darin, sicherzustellen, dass sich diese hilfreichen Benutzer für ihre Bemühungen belohnt fühlen, da dies sie motiviert, wiederzukommen.

5. CatBattles

Die Idee: Katzenvideos sind… unglaublich beliebt. Eine besonders charakteristische Form des Katzenvideos ist der Amateurkampf, bei dem zwei Katzen mit minimalen Konsequenzen, aber viel Miauen und Ringen gegeneinander antreten.

Auf dieser Website können Benutzer Videos über das Ringen ihrer Katzen posten und den Zuschauern lustige Kommentare geben. Diese Seite würde auch KEINE professionellen Katzenschlachten oder Kämpfe mit grausamen Enden erlauben. Es ist ausschließlich für ungezwungene Unterhaltung gedacht, nicht für Tierrechtsverletzungen.

Art der Website: Videoinhalt

Schlüsselfunktionen:

  • Jeder kann ein Katzenvideo hochladen
  • Benutzer können ein anonymes Konto erstellen und Kommentare hinzufügen.
  • Ein Screenshot jeder Katze, auf die der Benutzer klickt, um den Sieger zu erraten, bevor der Kampf beginnt
  • Upvotes für die besten Videos und besten Kommentare
  • Die Möglichkeit, schädliche oder inszenierte Videos zu melden

Hauptentscheidungsentscheidungen:

  • Warum sollte jemand sein Katzenkampfvideo hier posten und nicht Reddit oder YouTube? Sie müssen einige Funktionen hinzufügen, um sie von diesen Websites zu unterscheiden.
  • Wie können Sie diese Seite in der Katzenliebhaber-Community populär machen? Katzenliebhaber genießen keine Gewalt, aber sie genießen Katzenhumor.
  • Sollte diese Site die Dynamik von Hot or Not duplizieren? Wie können Sie ein einzigartiges Seherlebnis für den Betrachter schaffen, das über YouTube hinausgeht? Vielleicht ein Play-by-Play des Kampfes, der als Benutzerbeitrag aufgezeichnet wird?

Was Sie lernen werden: Das Speichern von Videos in einer Datenbank ist eine gute Lernfähigkeit. Das Replizieren der Dynamik von YouTube ist eine bewährte Methode, die andere klar verstehen werden. Es wäre auch eine gute Herausforderung, den richtigen Ton für Humor auf der Website zu finden.

6. CouponBank

Die Idee: Es gibt viele Websites, auf denen Gutscheine einzeln ausgetauscht werden können. Aber was ist mit dem „langen Schwanz“ von Gutscheinen? Mit anderen Worten, seltene oder undurchsichtige Gutscheine, die auf einer Mainstream-Gutschein-Website möglicherweise nicht beliebt sind. Und was ist, wenn die andere Person keinen gewünschten Gutschein hat? Gutscheine sind sowieso im Grunde Geld.

Sie benötigen eine Bank, um dieses Missverhältnis auf dem Markt zu beheben. Diese Bank würde beispielsweise eine erste Einzahlung von 20 USD verlangen. Dann wird jeder Gutschein, den Sie anfordern, von Ihrem Konto abgebucht. Jeder Gutschein, den Sie erfolgreich verschenken können, wird gutgeschrieben.

Art der Website: Peer-to-Peer-Kreditvergabe

Schlüsselfunktionen:

  • Benutzer müssen in der Lage sein, ein Konto zu erstellen und dann 20 USD in ein Treuhandkonto einzuzahlen, das jederzeit abgehoben werden kann. Dies ist eine Sicherheit. Sie können Stripe verwenden, um diese Transaktion zu verarbeiten.
  • Benutzer können ein Foto eines Gutscheins hochladen. Die Website muss dann automatisch das Produkt und die Höhe des Gutscheins ermitteln. Es muss den Benutzer auffordern, wenn er es nicht herausfinden kann. Die Cloud Vision API von Google sollte dabei helfen.
  • Wenn ein Benutzer einen Gutschein anfordert, muss das Originalposter ihn an ihn senden. Der Betrag des Gutscheins wird dem Konto des Originalplakats gutgeschrieben und vom Konto des Antragstellers abgebucht.
  • Sobald jemandes Konto 0 $ erreicht, kann er keine Gutscheine mehr anfordern, bis er selbst einige handelt oder mehr Geld hinzufügt.
  • Die Site generiert Einnahmen, indem sie einen kleinen Prozentsatz jeder Transaktion übernimmt.

Hauptentscheidungsentscheidungen:

  • Wie können Sie es so einfach wie möglich machen, eine große Anzahl von Gutscheinen hochzuladen? Die Cloud Vision API wäre hierfür eine große Sache.
  • Wie können Sie es den Leuten so einfach wie möglich machen, die Gutscheine zu versenden? Der Benutzer wäre erschöpft, wenn er viele Gutscheine per Post senden müsste.
  • Wie können Sie den Suchvorgang so einfach wie möglich gestalten? Was wäre, wenn jemand eine Quittung hochladen könnte und Sie überprüfen könnten, ob für die Artikel auf der Liste Gutscheine verfügbar sind?

Was Sie lernen werden: Dieses umfasst einige Schlüsselkonzepte der Peer-to-Peer-Kreditvergabe, wenn auch mit einem viel geringeren Risikoprofil. Dies ist ein großartiger Test für Ihre Aufmerksamkeit für die Benutzererfahrung. Es gibt Millionen von Menschen in den USA, die Zeit haben und nach einer einfachen Möglichkeit suchen, ein paar zusätzliche Dollars zu verdienen. Wie können Sie Ihre Website zu einer hervorragenden Option machen?

Werde kreativ

Fühlen Sie sich nicht verpflichtet, dieselben Projekte wie alle anderen zu bauen. Es ist äußerst schwierig, einen Wettbewerbsvorteil gegenüber dem Rest des Marktes zu erzielen, wenn Sie nachahmen.

Auch wenn einer dieser Vorschläge Ihnen nicht hilft, sollten Sie in Betracht ziehen, Projekte zu entwickeln, die ein wenig Persönlichkeit schaffen und sich von allen anderen unterscheiden können.

Wie Seth Godin sagt: „In einem überfüllten Markt ist das Einpassen ein Misserfolg. In einem geschäftigen Markt ist es gleichbedeutend, unsichtbar zu sein, wenn man nicht auffällt. “

Hat dir das gefallen? Gib es wie und lass es mich in den Kommentaren wissen!

Wenn Sie nach visualisierten Codierungs-Tutorials suchen, die HTML, CSS und JavaScript vereinfachen, melden Sie sich hier für meinen Newsletter an: