Une liste d'exemples d'idées d'applications Web

Chaque fois que je lance un didacticiel, je me trouve dans les limbes en me demandant quelle application dois-je créer. Une application à faire? Pas encore!

Si vous lisez cet article, vous recherchez une idée, une application simple que vous pouvez utiliser dans votre didacticiel ou dans votre exemple de projet pour tester un nouveau framework ou une nouvelle API, mais vous ne trouvez rien qui résonne vraiment avec vous.

Il doit être assez simple mais en même temps assez complexe pour valoir la peine d'être fait.

«Je ne veux pas créer une autre application de tâches», je vous entends penser.

J'ai écrit ce post pour m'aider et j'espère que cela vous aidera également.

Certaines des idées sont autonomes (n'impliquant pas l'utilisation d'une API externe), d'autres utilisent des API publiques célèbres où vous pouvez facilement récupérer des données prédéfinies.

Certains nécessitent une partie serveur, d'autres non, ce qui peut également dépendre de votre implémentation.

Mais j'essaye de garder ces idées:

  • bon pour construire un tutoriel
  • bon d'expérimenter avec les technologies web
  • pas quelque chose qui prendra une semaine à comprendre
  • pas des «idées de démarrage»
  • Je ne cible pas les applications mobiles mais les applications Web
  • facile à expliquer
  • facile à construire (moins de 24 heures si préparé)
  • facile à étendre avec de nouvelles fonctionnalités

Alors, assez parlé, voici la liste!

Applications simples

Une application de suivi du poids

  • Il accepte un ensemble d'entrées manuelles de mesures de poids prises à différentes dates
  • Il peut tracer un graphique
  • Il peut permettre de suivre plusieurs entités, par exemple le poids de plus d'une personne
  • Stockez-les quelque part

Une application de calcul

Une calculatrice standard: les nombres, +, -, *, / et le résultat

Voir le didacticiel vidéo

Une base de données de livres

  • Entrez les livres que vous possédez
  • Entrez les livres que vous souhaitez acheter
  • Stocker les informations du livre, les images

Une application de recettes

  • Entrez un nom, une description avec les étapes
  • Avoir des photos
  • Avoir un classement pour la difficulté et la qualité
  • Ajoutez le temps nécessaire
  • Avoir des étapes différentes avec une image pour chacun
  • Stockez-les quelque part

Voir le didacticiel vidéo

Un traqueur de factures

  • Enregistrer les factures, les montants et la date
  • Liste des factures
  • Ayez quelques graphiques (cette année / l'année dernière)
  • Stockez-les quelque part

Un tracker de dépenses

  • Consigner les dépenses, les étiqueter (ou avoir des catégories)
  • Liste des dépenses
  • Avoir quelques graphiques (le mois dernier / l'année dernière)
  • Stockez-les quelque part

Une application de chat

  • Une sorte de Slack dépouillé
  • Les personnes entrent sans authentification et se voient attribuer un nom, stocké pour le moment où elles reviennent
  • Stockez l'historique
  • Ajouter des notifications

Une application de notes

  • Ajouter une nouvelle note
  • Listez toutes vos notes dans la barre latérale
  • Stockez-les quelque part

Une application de journal personnel

  • Ajouter des entrées avec une date et un texte
  • Les inscriptions ont une date
  • Afficher le plus récent en premier
  • Joindre des photos
  • Stockez-les quelque part

Une application pomodoro

  • Entrez une heure
  • Démarrer la minuterie
  • Alerte lorsque le temps est écoulé

Voir le didacticiel vidéo

Un générateur de mèmes

  • Avoir 10 images de mèmes populaires
  • Laisser l'utilisateur ajouter le texte
  • Le résultat est image + texte
  • Stockez l'historique

Jeu de tic-tac-toe

Nous savons tous ce qu'est un jeu de tic-tac-toe 🙂

Voir le didacticiel vidéo

Le jeux de la vie

Un grand projet impliquant des mathématiques et des graphiques.

Voir le didacticiel vidéo

Un moteur de blog

  • Autoriser à se connecter et ajouter des articles
  • Les visiteurs peuvent ajouter des commentaires
  • Stockez les données quelque part

Un moteur QA

  • Autoriser la connexion
  • Autoriser l'ajout de questions
  • Permettre de répondre aux questions
  • Autoriser l'utilisateur d'origine à choisir la meilleure question
  • Stockez les données quelque part

Un moteur de forum

  • Autoriser la connexion
  • Autoriser l'ajout de messages
  • Autoriser à commenter les articles
  • Stockez les données quelque part

Un chat en direct intégrable

Pensez Intercom ou Olark.

  • Avoir un «backend» où vous répondez
  • Incorporer sur une page Web
  • Laissez les gens vous écrire en privé

Applications alimentées par API

Un client Hacker News

  • Répertoriez les articles les plus populaires
  • Afficher les commentaires d'un article
  • Afficher un profil utilisateur
  • Rechercher HN

VérifierHNPWAetAwesome Hacker Newspour l'inspiration

Un client Reddit

  • Répertoriez les articles les plus populaires
  • Lister les commentaires d'un article
  • Afficher un profil utilisateur

Un client Instagram

  • Entrez un hashtag et obtenez les derniers articles
  • Entrez un nom d'utilisateur et obtenez les derniers messages
  • Autoriser à stocker un ou plusieurs hashtags / noms d'utilisateur et obtenir tous les derniers messages de ceux-ci

Un client API GitHub

  • Répertoriez les référentiels populaires d'aujourd'hui / semaine / mois
  • Répertoriez les derniers commits dans un référentiel
  • Afficher les référentiels publics d'une personne ou d'une organisation classés par étoiles

Un client API Unsplash

  • Rechercher des images par sujet
  • Laisser l'utilisateur entrer un terme, afficher des images pertinentes

Commencer àAPI Unsplash


Données pour vos exemples d'applications

Parfois, vous commencez à faire une application simple, mais vous vous ennuyez de trouver des données que vous pouvez utiliser. Vous n'êtes pas obligé, vous pouvez utiliser des données réelles ou des données aléatoires.

API publiques que vous pouvez utiliser dans des exemples de projets

Peut-être avez-vous une idée pour une application CRUD parfaitement sympa, ou quelque chose qui fonctionne avec une API, mais vous ne voulez pas créer l'API en premier lieu.

Je recommande de vérifierAirtable, qui fournit une excellente API pour les développeurs, très facile à utiliser, comme une base de données.

Il existe des API publiques incroyables que vous pouvez utiliser:

Espaces réservés d'image pour vos exemples de projets

Générateurs d'images

Avatars:

Exemple de générateur de texte pour vos exemples de projets

Lorem Ipsum est ennuyeux. Pimenter:

Si vous insistez pour utiliser Lorem Ipsum,Loripsumest un bon générateur.

Autres fausses données

FakeJSONa des tonnes de fausses capacités de génération de données.

JSONPlaceholdera de faux messages, commentaires, photos, todos, utilisateurs, albums prêts pour la consommation REST.

Besoin de faux nom / génération de données utilisateur? VérifierNoms de l'interface utilisateuretRandomUser

Emballer

J'espère que cette liste est suffisamment complète pour répondre à vos besoins!

S'amuser!

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: