＃一個示例Web應用程序的想法清單

每次我開始教程時，我都會陷入困境，不知道應該建造什麼應用程序。再一個待辦事項應用程序？不要再一個了！

如果您正在閱讀此文章，您正在尋找一個想法，一個簡單的應用，您可以在教程中或示例項目中使用該應用來測試新的框架或API，但您找不到真正激起您興趣的內容。

它需要足夠簡單，但同時足夠複雜，值得做。

“我不想再建立另一個待辦事項應用程序”，我聽到你在想什麼。

我撰寫了這篇文章來幫助自己，希望也能幫助到您。

其中一些想法是獨立的（不涉及使用外部API），有些使用著名的公共API，您可以輕鬆地獲取預先構建的數據。

有些需要服務器部分，有些不需要，這也可能取決於您的實現方式。

但我要試著讓這些想法：

  • 適合教程
  • 適合試驗網絡技術
  • 不是需要一周時間找到的東西
  • 不是“創業點子”
  • 我不定位於移動應用程序而是網絡應用程序
  • 容易解釋
  • 易於構建（如果事先準備好，少於24小時）
  • 易於擴展新功能

那就說得夠多了，這是清單！

  • [簡單的應用程序]（＃簡單的應用程序）
  • [體重跟踪應用程序]（＃體重跟踪應用程序）
  • [計算器應用程序]（＃計算器應用程序）
  • [圖書數據庫]（＃圖書數據庫）
  • [食譜應用程序]（＃食譜應用程序）
  • [賬單跟踪器]（＃賬單跟踪器）
  • [費用跟踪器]（＃費用跟踪器）
  • [聊天應用程序]（＃聊天應用程序）
  • [筆記應用程序]（＃筆記應用程序）
  • [個人日記應用程序]（＃個人日記應用程序）
  • [波莫多羅計時應用程序]（＃波莫多羅應用程序）
  • [網絡爆笑圖片生成器]（＃網絡爆笑圖片生成器）
  • [Tic-tac-toe遊戲]（＃Tic-tac-toe遊戲）
  • [生命遊戲]（＃生命遊戲）
  • [博客引擎]（＃博客引擎）
  • [Q＆A引擎]（＃Q＆A引擎）
  • [論壇引擎]（＃論壇引擎）
  • [可嵌入的即時聊天]（＃可嵌入的即時聊天）
  • [API驅動的應用程序]（＃API驅動的應用程序）
  • [Hacker News客戶端]（＃Hacker News客戶端）
  • [Reddit客戶端]（＃Reddit客戶端）
  • [Instagram客戶端]（＃Instagram客戶端）
  • [GitHub API客戶]（＃GitHub API客戶端）
  • [Unsplash API客戶]（＃Unsplash API客戶端）
  • [用於示例應用程序的數據]（＃用於示例應用程序的數據）
  • [您可以在示例項目中使用的公共API]（＃您可以在示例項目中使用的公共API）
  • [用於示例項目的圖像占位符]（＃用於示例項目的圖像占位符）
  • [圖形生成器]（＃圖形生成器）
  • [用於示例項目的示例文本生成器]（＃用於示例項目的示例文本生成器）
  • [其他虛假數據]（＃其他虛假數據）
  • [總結]（＃總結）

簡單的應用程序

體重跟踪應用程序

  • 接受手動輸入的體重測量集，取自不同日期
  • 可以繪製圖表
  • 允許追踪多個實體，例如多個人的體重
  • 把它們存儲在某個地方

計算器應用程序

一個標準計算器：數字，+，-，*，/和結果

查看視頻教程

圖書數據庫

  • 輸入您所擁有的書籍
  • 輸入您想購買的書籍
  • 存儲書籍信息、圖像

食譜應用程序

  • 輸入名稱、步驟說明
  • 有圖片
  • 有難度和質量的排名
  • 添加所需時間
  • 每個步驟都有一張圖片
  • 把它們存儲在某個地方

查看視頻教程

賬單跟踪器

  • 登錄賬單，金額和日期
  • 列出賬單
  • 有幾個圖表（今年/去年）
  • 把它們存儲在某個地方

費用跟踪器

  • 登錄費用，標記它們（或有類別）
  • 列出費用
  • 有幾個圖表（上個月/去年）
  • 把它們存儲在某個地方

聊天應用程序

一種簡化的Slack

  • 人們無需驗證即可進入並分配一個名稱，以便再次使用時存儲
  • 存儲歷史記錄
  • 添加通知

筆記應用程序

  • 添加新筆記
  • 在側邊欄中列出所有筆記
  • 把它們存儲在某個地方

個人日記應用程序

  • 添加帶有日期和文本的條目
  • 條目有日期
  • 顯示最新的條目
  • 附加圖片
  • 把它們存儲在某個地方

波莫多羅計時應用程序

  • 輸入時間
  • 開始計時器
  • 時間結束時進行提醒

查看視頻教程

網絡爆笑圖片生成器

  • 有10個熱門的爆笑圖片
  • 讓用戶添加文本
  • 結果是圖片 + 文本
  • 存儲歷史記錄

井字遊戲

我們都知道什麼是井字遊戲😃

查看視頻教程

生命遊戲

一個涉及數學和圖形的偉大項目。

查看視頻教程

博客引擎

  • 允許登錄並添加文章
  • 訪客可以添加評論
  • 把數據存儲在某個地方

Q＆A引擎

  • 允許登錄
  • 允許添加問題
  • 允許回答問題
  • 允許原始用戶選擇最佳問題
  • 把數據存儲在某個地方

論壇引擎

  • 允許登錄
  • 允許添加帖子
  • 允許評論帖子
  • 把數據存儲在某個地方

可嵌入的即時聊天

想像一下Intercom或Olark。

  • 有一個“後端”供您回答
  • 嵌入到網頁上
  • 讓人們私下寫信給您

API驅動的應用程序

Hacker News客戶端

  • 列出熱門帖子
  • 顯示帖子評論
  • 顯示用戶檔案
  • 搜索HN

查看HNPWA和Awesome Hacker News以獲取靈感

Reddit客戶端

  • 列出熱門帖子
  • 列出一個帖子的評論
  • 顯示用戶檔案

Instagram客戶端

  • 輸入標籤並獲取最新帖子
  • 輸入用戶名並獲取最新帖子
  • 允許存儲一個或多個標籤/用戶名並從其中獲取所有最新的帖子

GitHub API客戶端

  • 列出今天/一周/一個月的熱門庫
  • 列出庫中最新的提交
  • 按星星數量排名的一個人或組織的公共庫

Unsplash API客戶端

  • 按主題搜索圖像
  • 允許用戶輸入詞語，顯示相關圖像

從Unsplash API開始

用於示例應用程序的數據

有時您開始做一些簡單的應用程序，但是為了找到可以使用的數據而感到無聊。您不需要自己創建API，您可以使用真實數據或隨機數據。

您可以在示例項目中使用的公共API

也許您對一個完全可以使用CRUD應用程序的完美好點子，或者一個可以使用API工作的點子有主見，但是您不想首先創建API。

我建議您查看Airtable，它為開發人員提供了一個非常易於使用的API，就像一個數據庫一樣。

有一些令人驚奇的公共API可供使用：

用於示例項目的圖像占位符

圖形生成器

頭像:

用於示例項目的示例文本生成器

Lorem Ipsum太無聊了。調梅味道：

如果您堅持使用Lorem Ipsum，Loripsum是一個不錯的生成器。

其他虛假數據

FakeJSON具有大量生成虛假數據的功能。

JSONPlaceholder具有可供REST使用的虛假帖子、評論、照片、任務、用戶和專輯。

需要虛假名稱/用戶數據生成？請查看UI Names（界面名稱）和RandomUser

總結

我希望這個列表足夠全面，以滿足您的需求！

祝您玩得開心！