示例Web應用程序提示列表

每次我開始教程時,我都會陷入困惑,想知道我應該構建哪個應用程序。待辦事項?再沒有!

如果您正在閱讀這篇文章,那麼您正在尋找一個想法,一個簡單的應用程序,可以在您的教程或示例項目中使用它來測試新的框架或API,但是您找不到真正能引起您共鳴的東西。

它必須足夠簡單,但同時又要足夠複雜才能值得。

我聽到您在想:“我不想構建另一個待辦應用程序”。

我寫這篇文章是為了幫助自己,我希望這也會對您有所幫助。

有些想法是獨立的(不涉及使用外部API),有些想法則使用了著名的公共API,您可以在其中輕鬆獲取預先構建的數據。

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

但我嘗試保留這些想法:

  • 很好地建立一個教程
  • 可以嘗試使用網絡技術
  • 不需要花一個星期就能弄清楚的東西
  • 不是“創業思路”
  • 我的目標不是移動應用,而是網絡應用
  • 容易解釋
  • 易於構建(如果準備的話,不到24小時)
  • 易於擴展的新功能

所以,足夠多的談話,這是清單!

簡單的應用程序

體重追踪器應用

  • 它接受一組在不同日期進行的體重測量的手動輸入
  • 它可以畫一個圖
  • 它可以允許跟踪多個實體,例如一個人的體重
  • 將它們存放在某個地方

計算器應用

標準計算器:數字,+,-,*,/和結果

觀看視頻教程

書籍資料庫

  • 輸入您擁有的書
  • 輸入您要購買的書
  • 存儲書籍信息,圖像

食譜應用

  • 輸入名稱,說明和步驟
  • 有圖片
  • 在難度和質量上有一些排名
  • 添加所需的時間
  • 每個步驟都有不同的圖片
  • 將它們存放在某個地方

觀看視頻教程

賬單追踪器

  • 記錄賬單,金額和日期
  • 列出賬單
  • 有一些圖表(今年/去年)
  • 將它們存放在某個地方

費用追踪器

  • 記錄費用,標記費用(或具有類別)
  • 列出費用
  • 有一些圖表(上個月/去年)
  • 將它們存放在某個地方

聊天應用

  • 某種簡化的鬆弛
  • 人們未經身份驗證即進入,並被分配一個名字,以備下次訪問時使用
  • 儲存歷史
  • 添加通知

筆記應用

  • 新增筆記
  • 在邊欄中列出所有筆記
  • 將它們存放在某個地方

個人日記應用

  • 添加帶有日期和文本的條目
  • 條目有日期
  • 先顯示更多最新內容
  • 附上圖片
  • 將它們存放在某個地方

番茄程序

  • 輸入時間
  • 啟動計時器
  • 時間到時提醒

觀看視頻教程

一個模因發生器

  • 有10個流行的米姆圖片
  • 讓用戶添加文字
  • 結果是圖像+文字
  • 儲存歷史

井字遊戲

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

觀看視頻教程

生活遊戲

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

觀看視頻教程

博客引擎

  • 允許登錄並添加帖子
  • 訪客可以添加評論
  • 將數據存儲在某處

質量檢查引擎

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

論壇引擎

  • 允許登錄
  • 允許添加帖子
  • 允許對帖子發表評論
  • 將數據存儲在某處

嵌入式實時聊天

考慮對講機或Olark。

  • 有一個“後端”,您可以在其中做出回應
  • 嵌入網頁
  • 讓人們私下給您寫信

API驅動的應用

黑客新聞客戶端

  • 列出熱門帖子
  • 顯示帖子評論
  • 顯示用戶個人資料
  • 搜索HN

查看漢普頓駭客駭客新聞尋求靈感

Reddit客戶端

  • 列出熱門帖子
  • 列出帖子的評論
  • 顯示用戶個人資料

Instagram客戶端

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

GitHub API客戶端

  • 列出今天/週/月的熱門存儲庫
  • 列出存儲庫中的最新提交
  • 顯示按星標排名的個人或組織公共存儲庫

Unsplash API客戶端

  • 按主題搜索圖像
  • 讓用戶輸入一個術語,顯示相關圖像

開始於Unsplash API


您的示例應用程序的數據

有時,您開始做一些簡單的應用程序,但是卻無聊地找到可以使用的數據。您不必一定要使用真實數據或隨機數據。

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

也許您有一個理想的CRUD應用程序想法,或者某個與API兼容的想法,但是您不想一開始就創建API。

我建議去看看空氣表,它為開發人員提供了很好的API,非常易於使用,例如數據庫。

您可以使用令人驚嘆的公共API:

您的示例項目的圖像佔位符

影像產生器

頭像:

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

Lorem Ipsum很無聊。加香料:

如果您堅持使用Lorem Ipsum,牛至是一個很好的發電機。

其他虛假數據

偽JSON具有大量的偽造數據生成功能。

JSONPlaceholder包含偽造的帖子,評論,照片,待辦事項,用戶和相冊,可供REST使用。

需要假名稱/用戶數據生成?查看UI名稱隨機用戶

包起來

我希望這份清單足夠全面,可以滿足您的需求!

玩得開心!

免費下載我的JavaScript初學者手冊


更多js教程: