サンプルWebアプリのアイデアのリスト

チュートリアルを開始するたびに、どのアプリを作成すればよいのか疑問に思います。やることアプリ?二度とない!

この投稿を読んでいる場合は、チュートリアルやサンプルプロジェクトで新しいフレームワークやAPIをテストするために使用できるアイデア、シンプルなアプリを探していますが、本当に共感できるものは見つかりません。

それは十分に単純であると同時に、実行する価値があるほど複雑である必要があります。

「別のやることアプリを作りたくない」とお考えのようです。

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

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

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

しかし、私はそれらのアイデアを維持しようとします:

  • チュートリアルを作成するのに適しています
  • Webテクノロジーを試すのに適しています
  • 理解するのに1週間かかるものではありません
  • 「スタートアップのアイデア」ではありません
  • モバイルアプリではなくウェブアプリをターゲットにしています
  • 説明しやすい
  • 簡単に構築できます(準備ができていれば24時間以内)
  • 新機能で簡単に拡張

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

シンプルなアプリ

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

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

電卓アプリ

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

ビデオチュートリアルを見る

書籍データベース

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

レシピアプリ

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

ビデオチュートリアルを見る

ビルトラッカー

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

経費トラッカー

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

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

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

ノートアプリ

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

個人日記アプリ

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

ポモドーロアプリ

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

ビデオチュートリアルを見る

ミームジェネレーター

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

三目並べゲーム

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

ビデオチュートリアルを見る

人生のゲーム

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

ビデオチュートリアルを見る

ブログエンジン

  • ログインと投稿の追加を許可する
  • 訪問者はコメントを追加できます
  • データをどこかに保存する

QAエンジン

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

フォーラムエンジン

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

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

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

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

APIを利用したアプリ

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

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

小切手HNPWAそして素晴らしいハッカーニュースインスピレーションのために

Redditクライアント

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

Instagramクライアント

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

GitHubAPIクライアント

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

UnsplashAPIクライアント

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

で開始Unsplash API


サンプルアプリのデータ

簡単なアプリを使い始めることもありますが、使用できるデータを見つけるのに飽き飽きしています。必ずしもそうする必要はありません。実際のデータまたはランダムなデータを使用できます。

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

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

チェックアウトすることをお勧めしますAirtable、データベースのように非常に使いやすい、開発者向けの優れたAPIを提供します。

使用できるすばらしいパブリックAPIがあります。

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

画像ジェネレータ

アバター:

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

LoremIpsumは退屈です。スパイスを効かせます:

Lorem Ipsumの使用を主張する場合は、ロリプサム良い発電機です。

その他の偽のデータ

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

JSONPlaceholder偽の投稿、コメント、写真、ToDo、ユーザー、アルバムがRESTで使用できるようになっています。

偽の名前/ユーザーデータの生成が必要ですか?小切手UI名そしてRandomUser

まとめ

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

楽しむ!

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: