Envie de créer quelque chose d'amusant? Voici une liste d'exemples d'idées d'applications Web.

Vous souhaitez apprendre JavaScript? Obtenez mon ebook sur jshandbook.com

Si vous lisez cet article, vous cherchez probablement une idée. Vous souhaitez probablement créer une application simple que vous pouvez utiliser dans un 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 pour ne pas prendre tout votre temps, 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 t'entends penser.

J'ai compris. J'ai écrit cet article pour m'aider moi-même et j'espère que cela vous aidera également.

Ce que vous trouverez ci-dessous

Certaines des idées sont autonomes (n'impliquant pas l'utilisation d'une API externe), tandis que 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'ai essayé de m'assurer que ces idées sont:

  • bon pour 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»
  • ciblé sur 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 sans dépendances externes

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 vous permettre de suivre plusieurs entités, par exemple le poids de plus d'une personne
  • Il stocke les poids quelque part

Une application de calcul

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

Une base de données de livres

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

Une application de recettes

  • Entrez un nom et 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

Un traqueur de factures

  • Enregistrer les factures, les montants et les dates
  • 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 et 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 leur retour
  • Stocker 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
  • Afficher le plus récent en premier
  • Joindre des images
  • Stockez-les quelque part

Une application pomodoro

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

Un générateur de mèmes

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

Jeu de tic-tac-toe

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

Le jeux de la vie

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

Un moteur de blog

  • Autoriser l'utilisateur à se connecter et à ajouter des messages
  • Les visiteurs peuvent ajouter des commentaires
  • Stockez les données quelque part

Un moteur QA

  • Autoriser l'utilisateur à se connecter
  • Ajouter des questions
  • Répondre aux questions
  • Autoriser l'utilisateur d'origine à choisir la meilleure question
  • Stockez les données quelque part

Un moteur de forum

  • Autoriser l'utilisateur à se connecter
  • Ajouter des articles
  • Commenter les messages
  • 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

  • Lister les messages populaires
  • Afficher les commentaires d'un article
  • Afficher le profil d'un utilisateur
  • Rechercher HN

Consultez HNPWA et Awesome Hacker News pour trouver l'inspiration.

Un client Reddit

  • Lister les messages populaires
  • Lister les commentaires d'un article
  • Afficher le profil d'un 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

Commencez par l'API Unsplash pour vous inspirer.

Données pour vos exemples d'applications

Parfois, vous commencez à créer une application simple, mais vous vous ennuyez avec les données que vous avez trouvées que vous pouvez utiliser. Vous n'avez pas à vous ennuyer! 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 vous recommande de consulter Airtable, qui fournit une excellente API pour les développeurs. C'est très facile à utiliser, comme une base de données.

Voici quelques API publiques étonnantes que vous pouvez utiliser:

  • L'API Cat
  • L'API Dog
  • L'API Chuck Norris
  • F ** k Off As A Service API
  • API de devis
  • API de devis
  • API Dad Jokes
  • L'API Spotify
  • L'API du New York Times
  • L'API Wikipedia
  • L'API Wikidata
  • L'API Medium
  • API Design Quotes
  • L'API GoodReads
  • L'API Dribbble
  • L'API 500px
  • L'API Unsplash
  • L'API Giphy - GIF!
  • L'API Pixabay
  • Taux d'échange
  • API de captures d'écran du site
  • L'API du dictionnaire Oxford
  • API de technologies de site Web
  • L'API Mapbox
  • API de paroles de musique par Genius
  • API de balises méta de site
  • L'API EventBrite
  • Changelogs de projets open source
  • L'API REST GitHub
  • L'API GraphQL GitHub
  • API de codes QR
  • L'API StackExchange
  • Mots et synonymes
  • L'API Nasa
  • L'API SpaceX
  • L'API Hacker News
  • L'API Instagram
  • L'API Reddit
  • L'API Slack
  • L'API Twitter
  • L'API YouTube

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

  • Placeholder.com
  • Placekitten

Générateurs d'images

Avatars:

  • RoboHash
  • Adorables avatars
  • Avatars DiceBear (pixel art)
  • Lorem Picsum

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

Lorem Ipsum est ennuyeux. Pimenter!

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

Autres fausses données

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

JSONPlaceholder contient de faux messages, commentaires, photos, todos, utilisateurs et albums, tous prêts pour la consommation REST.

Besoin de faux nom / génération de données utilisateur? Vérifiez les noms de l'interface utilisateur et RandomUser.

Emballer

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

S'amuser!

Vous souhaitez apprendre JavaScript? Obtenez mon ebook sur jshandbook.com