1.使用React（帶hook）構建電影搜索應用程序
首先，您可以使用React構建電影搜索應用程序。下圖顯示了最終應用的外觀：
在構建此應用程序時，您將使用相對較新的Hooks API來提高React技能。該示例項目利用了React組件，許多hook，一個外部API，當然還有一些CSS樣式。
技術棧和功能
- React Hook
- create-react-app
- JSX
- CSS
在不使用任何類的情況下，這個項目為你提供了一個完美的入門到實戰的機會，並且肯定會在2020年為你提供幫助。
你可以在此處找到示例項目。按照教程進行操作，或者自己動手做。
https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
2.使用Vue構建聊天應用
對你來說，另一個很棒的項目是使用我最喜歡的JavaScript庫：VueJS構建聊天應用程序。
該應用程序將如下所示：
您將學到什么
學習本教程后，您將學習如何從頭開始設置Vue應用-創建組件，處理狀態，創建路由，連接到第三方服務，甚至處理身份驗證。
技術棧和功能
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
這真的是一個很棒的項目，開始使用Vue或提高你的現有技能，以應對2020年的發展。
你可以在此處找到該教程。
https://www.sitepoint.com/pusher-vue-real-time-chat-app/
3.使用Angular 8構建美麗的天氣應用
此示例將幫助你使用Google的Angular 8構建美觀的天氣應用程序：
你將學到什么
這個項目將教你從頭開始創建應用程序的寶貴技能，從設計到開發，再到生產就緒部署。
技術棧和功能
- Angular 8
- Firebase
- Server-side rendering
- CSS with Grid Layout and Flexbox
- Mobile friendly and responsive
- Dark mode
- Beautiful UI
我真的非常喜歡這個綜合項目，因為你不會孤立地學習東西。相反，你將學習整個開發過程——從設計到最終部署。
你真的應該做這個。
4.使用Svelte構建待辦應用
Svelte有點像一個新來的孩子，至少與React, Vue和Angular相比是這樣。盡管如此，它仍然是2020年的熱門之一。
待辦事項不一定是最熱門的話題，但這確實可以幫助您提高Svelte技能。看起來像這樣：
您將學到什么
本教程將向您展示如何使用svelte3制作一個應用程序，從開始到結束。它使用組件、樣式和事件處理程序。
技術棧和功能
- Svelte 3
- Components
- Styling via CSS
- ES 6 語法
市面上並沒有那么多好的的Svelte入門項目，所以我覺得這是一個不錯的開始。
5.使用Next.js構建電商購物車
Next.js是最流行的框架，用於創建支持應用程序開箱即用的React應用程序。
該項目將向您展示如何構建一個如下所示的電子商務購物車：
您將學到什么
在這個項目中，您將學習如何設置一個Next.js開發環境——創建新頁面和組件、獲取數據、設置樣式並部署下一個應用程序。
技術棧和功能
- Next.js
- Components and pages
- Data fetching
- Styling
- Deployment
- SSR and SPA
有一個真實的例子（例如電子商務展示櫃）來學習新的東西總是很高興。您可以在此處找到該教程。
https://snipcart.com/blog/next-js-ecommerce-tutorial
6.使用Nuxt.js構建功能完善的多語言博客網站
Nuxt.js代表Vue，Next.js代表React：一個很好的框架，結合了服務器端渲染和單頁面應用程序的功能。
您可以創建的最終應用程序將如下所示：
您將學到什么
這個示例項目將教您如何使用Nuxt.js構建完整的網站——從初始設置到最終部署。
它利用了Nuxt必須提供的許多很酷的功能，例如頁面和組件以及SCSS的樣式。
技術棧和功能
- Nuxt.js
- Components and pages
- Storyblok module
- Mixins
- Vuex for state management
- SCSS for styling
- Nuxt middlewares
這對您來說是一個非常酷的項目，涵蓋了Nuxt.js的許多出色功能。我個人很喜歡與Nuxt合作，因此您應該真正嘗試使用它，因為它也會使您成為更好的Vue開發人員。
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
7.用蓋茨比(Gatsby)建立博客
Gatsby是一個很棒的靜態站點生成器，它在后台使用React和GraphQL。這是該項目的結果：
您將學到什么
在本教程中，您將學習如何利用Gatsby構建出色的博客，以便在使用React和GraphQL的同時編寫自己的文章。
技術棧和功能
- Gatsby
- React
- GraphQL
- Plugins and themes
- MDX/Markdown
- Bootstrap CSS
- Templates
如果您想創建博客，這是一個很好的示例，說明如何利用React和GraphQL做到這一點。
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
我並不是說WordPress總是一個不好的選擇，但是使用Gatsby，您可以在使用React的同時創建高性能網站——這是一個了不起的組合。
8.用Gridsome建立博客
Gridsome是Vue的……好吧，我們已經在Next/Nuxt中有了它。
但是對於Gridsome和Gatsby也是如此。兩者都使用GraphQL作為數據層，但是Gridsome使用VueJS。這也是一個很棒的靜態網站生成器，可幫助您創建出色的博客：
您將學到什么
該項目將教您如何構建一個簡單的博客，以開始使用Gridsome，GraphQL和Markdown。
它還介紹了如何通過Netlify部署應用程序。
技術棧和功能
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
當然，這不是最全面的教程，但它確實涵蓋了Gridsome和Markdown的基本概念，並且可能是一個很好的起點。
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome
9.使用Quasar構建類似SoundCloud的音頻播放器應用
Quasar是另一個Vue框架，也可以用於構建移動應用程序。
在此項目中，您將創建一個音頻播放器應用，如下所示：
您將學到什么
雖然其他項目主要關注Web應用程序，但本項目將向您展示如何通過Quasar框架使用Vue創建移動應用程序。
您應該已經配置了可運行Android Studio / Xcode的Cordova設置。如果沒有，該教程中將有一個指向Quasar網站的鏈接，在那里他們向您展示了如何進行設置。
技術棧和功能
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Components
一個小項目，展示了Quasar在構建移動應用程序方面的強大功能。