何か楽しいものを作りたいですか?これがサンプルのWebアプリのアイデアのリストです。

JavaScriptの学習に興味がありますか?jshandbook.comで私の電子ブックを入手してください

この投稿を読んでいるなら、おそらくアイデアを探しているでしょう。チュートリアルやサンプルプロジェクトで使用して、新しいフレームワークやAPIをテストできるシンプルなアプリを作成することをお勧めします。しかし、あなたは本当にあなたに共鳴するものを見つけることができません。

それはあなたのすべての時間を費やさないように十分に単純であると同時に、行う価値があるのに十分に複雑である必要があります。

「別のやることアプリを作りたくない!」あなたが考えているのを聞きます。

わかった。私は自分自身を助けるためにこの投稿を書きました、そしてそれがあなたにも役立つことを願っています。

あなたが以下に見つけるもの

一部のアイデアは自己完結型(外部APIの使用を含まない)ですが、一部のアイデアは、事前に構築されたデータを簡単に取得できる有名なパブリックAPIを利用しています。

サーバー部分を必要とするものと必要としないものがありますが、これも実装によって異なります。

しかし、私はこれらのアイデアが次のとおりであることを確認しようとしました:

  • チュートリアルに適しています
  • Webテクノロジーを試すのに適しています
  • 理解するのに1週間かかるものではありません
  • 「スタートアップのアイデア」ではありません
  • Webアプリを対象
  • 説明しやすい
  • 構築が簡単(準備ができている場合は24時間未満)
  • 新機能で簡単に拡張

だから、十分な話、ここにリストがあります!

外部依存のないシンプルなアプリ

ウェイトトラッカーアプリ

  • さまざまな日付で行われた体重測定の手動入力のセットを受け入れます
  • グラフをプロットできます
  • これにより、複数のエンティティ、たとえば複数の人の体重を追跡できます。
  • 重みをどこかに保存します

電卓アプリ

  • 標準の計算機:数値、+、-、*、/、および結果

書籍データベース

  • 所有している本を入力してください
  • 購入したい本を入力してください
  • 書籍の情報と画像を保存する

レシピアプリ

  • 手順とともに名前と説明を入力します
  • 写真を持っている
  • 難易度と品質のランキングがあります
  • 必要な時間を追加する
  • それぞれの写真で異なるステップを持っている
  • それらをどこかに保管する

ビルトラッカー

  • 請求書、金額、日付をログに記録する
  • 請求書を一覧表示する
  • いくつかのグラフがあります(今年/昨年)
  • それらをどこかに保管する

経費トラッカー

  • 経費を記録してタグを付けます(またはカテゴリを設定します)
  • 経費の一覧表示
  • いくつかのグラフがあります(先月/昨年)
  • それらをどこかに保管する

チャットアプリケーション

  • ある種の削ぎ落とされたSlack
  • 人々は認証なしで入り、名前が割り当てられ、戻ってきたときに備えて保存されます
  • 履歴を保存する
  • 通知を追加する

ノートアプリ

  • 新しいメモを追加する
  • サイドバーにすべてのメモを一覧表示します
  • それらをどこかに保管する

個人日記アプリ

  • 日付とテキストを含むエントリを追加します
  • 最近のものを最初に表示
  • 写真を添付する
  • それらをどこかに保管する

ポモドーロアプリ

  • 時間を入力してください
  • タイマー開始
  • 時間が経過したときにアラート

ミームジェネレーター

  • 人気のミーム画像を10枚
  • ユーザーにテキストを追加さ​​せます
  • 結果は画像+テキストです
  • 履歴を保存する

三目並べゲーム

私たちは皆、三目並べゲームが何であるかを知っていますか?

人生ゲーム

数学とグラフィックスを含む素晴らしいプロジェクト。

ブログエンジン

  • ユーザーがログインして投稿を追加できるようにする
  • 訪問者はコメントを追加できます
  • データをどこかに保存する

QAエンジン

  • ユーザーにログインを許可する
  • 質問を追加する
  • 質問への回答
  • 元のユーザーが最適な質問を選択できるようにする
  • データをどこかに保存する

フォーラムエンジン

  • ユーザーにログインを許可する
  • 投稿を追加する
  • 投稿へのコメント
  • データをどこかに保存する

埋め込み可能なライブチャット

インターコムまたはオラークを考えてください。

  • 応答する「バックエンド」を用意する
  • Webページに埋め込む
  • 人々にあなたに個人的に手紙を書かせましょう

APIを利用したアプリ

ハッカーニュースクライアント

  • 人気のある投稿を一覧表示する
  • 投稿のコメントを表示する
  • ユーザーのプロファイルを表示する
  • HNを検索

インスピレーションを得るためにHNPWAとAwesomeHackerNewsをチェックしてください。

Redditクライアント

  • 人気のある投稿を一覧表示する
  • 投稿のコメントを一覧表示する
  • ユーザーのプロファイルを表示する

Instagramクライアント

  • ハッシュタグを入力して最新の投稿を取得
  • ユーザー名を入力して最新の投稿を取得する
  • 1つ以上のハッシュタグ/ユーザー名を保存し、それらからすべての最新の投稿を取得することを許可します

GitHubAPIクライアント

  • 今日/週/月の人気のあるリポジトリを一覧表示します
  • リポジトリ内の最新のコミットを一覧表示します
  • 星でランク付けされた個人または組織の公開リポジトリを表示する

UnsplashAPIクライアント

  • トピックで画像を検索
  • ユーザーに用語を入力させ、関連する画像を表示させる

インスピレーションを得るためにUnsplashAPIから始めてください。

サンプルアプリのデータ

簡単なアプリの作成を開始することもありますが、使用できるデータに飽き飽きしています。退屈する必要はありません!実際のデータまたはランダムデータを使用できます。

サンプルプロジェクトで使用できるパブリックAPI

完璧に優れたCRUDアプリ、またはAPIで動作するもののアイデアがあるかもしれませんが、そもそもAPIを作成したくないでしょう。

開発者に優れたAPIを提供するAirtableをチェックすることをお勧めします。データベースのように、とても使いやすいです。

使用できるすばらしいパブリックAPIは次のとおりです。

  • Cat API
  • DogAPI
  • チャックノリスAPI
  • F ** k Off As a Service API
  • 引用API
  • 引用API
  • オヤジギャグAPI
  • Spotify API
  • New York Times API
  • ウィキペディアAPI
  • ウィキデータAPI
  • Medium API
  • Design Quotes API
  • GoodReads API
  • Dribbble API
  • 500px API
  • Unsplash API
  • Giphy API — GIF!
  • Pinterest API
  • 為替相場
  • サイトのスクリーンショットAPI
  • オックスフォード辞書API
  • ウェブサイトテクノロジーAPI
  • Mapbox API
  • Geniusによる音楽歌詞API
  • サイトメタタグAPI
  • EventBrite API
  • オープンソースプロジェクトの変更ログ
  • GitHub REST API
  • GitHub GraphQL API
  • QRコードAPI
  • StackExchange API
  • 言葉と同義語
  • Nasa API
  • SpaceX API
  • ハッカーニュースAPI
  • InstagramAPI
  • Reddit API
  • Slack API
  • Twitter API
  • YouTube API

サンプルプロジェクトの画像プレースホルダー

  • Placeholder.com
  • Placekitten

画像ジェネレータ

アバター:

  • RoboHash
  • 愛らしいアバター
  • DiceBearアバター(ピクセルアート)
  • Lorem Picsum

サンプルプロジェクト用のサンプルテキストジェネレータ

LoremIpsumは退屈です。スパイスを効かせましょう!

Lorem Ipsumの使用を主張する場合、Loripsumは優れたジェネレーターです。

その他の偽のデータ

FakeJSONには、偽のデータ生成機能がたくさんあります。

JSONPlaceholderには、偽の投稿、コメント、写真、ToDo、ユーザー、アルバムがあり、すべてRESTで使用できます。

偽の名前/ユーザーデータの生成が必要ですか?UI名とRandomUserを確認してください。

まとめ

このリストがあなたのニーズに合うように十分に包括的であることを願っています!

楽しんで!

JavaScriptの学習に興味がありますか?jshandbook.comで私の電子ブックを入手してください