GitHub 上有什么好玩又有挑战的前端项目？

幽冥谷主

本人大三，学习js大概一年的时间，

最近感觉学习遇到了瓶颈，负责人给我的建议是尝试java或者挂载一个上线的项目
在此征求一下意见。

newco

我这推荐12个不仅有趣还很实用的前端项目。
首先推荐一款「H5页面生成器」来镇楼。

H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀的H5制作、建站工具，示范网站： www.h5ds.com
H5DS同时也是一款基于react+mobx的在线HTML制作工具，灵活的内核可快速改造成各种 可视化制作工具（基于该内核，可以做BI工具，建站工具，图形设计工具，在线PPT工具等一系列工具），H5DS提供了丰富的插件扩展接口，让插件可自由快速扩展和动态加载，同时也支持API接入。
传送门：https://github.com/h5ds/h5ds

其他11款也不错，如下：
1. reveal.js: 幻灯片展示框架

一个专门用来做 HTML 幻灯片的框架，支持 HTML 和 Markdown 语法。

• github: https://github.com/hakimel/reveal.js
  
• demo: https://revealjs.com
  

动图取自博客 reveal.js - 程序员的PPT制作神器。
2. impress.js: 又一个幻灯片展示框架

一个受 https://prezi.com/ 的启发，使用了现代浏览器里支持的 CSS3 transforms 和 transitions 的特效幻灯片。
我的个人网站首页 https://www.senntyou.com/ 也是用 impress.js 开发的。

• github: https://github.com/impress/impress.js
  
• demo: https://impress.js.org/
  

3. particles.js: 超棒的粒子效果

• github: https://github.com/VincentGarreau/particles.js
  
• demo: https://vincentgarreau.com/particles.js/
  

4. carbon: 代码美图生成器

可以将你的代码生成美美的图片，然后你就可以分享到各个社区了。

• github: https://github.com/dawnlabs/carbon
  
• demo: https://dawnlabs.io/carbon
  

5. favico.js: 让你的 favicon 用上胶囊图标、图片和视频

• github: https://github.com/ejci/favico.js
  
• demo: http://lab.ejci.net/favico.js/
  

6. typed.js: 打字机效果库

• github: https://github.com/mattboldt/typed.js
  
• demo: https://mattboldt.com/demos/typed-js/
  

7. vConsole: 移动端开发调试利器

vConsole： 一个轻量、可拓展、针对手机网页的前端开发者调试面板（chrome 开发者工具的便利实现）。
一般在 web 应用开发过程中，可以用 console.log 去输出一些信息，但是在移动端，console.log 的信息是看不到的。
这种情况下，当然可以选择使用 alert 弹出一些信息，但是这种方法实在不怎么方便，也会阻断 js 事件循环，调试体验和效率都很差。
好在有 vConsole 可以帮助我们解决这个问题。

• github: https://github.com/Tencent/vConsole
  
• demo: https://wechatfe.github.io/vconsole/demo.html
  

8. midnight.js: 固定头部炫酷效果

• github: https://github.com/Aerolab/midnight.js
  
• demo: https://aerolab.github.io/midnight.js/
  

9. multiscroll.js: 多边滑动效果

• github: https://github.com/alvarotrigo/multiscroll.js
  
• demo: https://alvarotrigo.com/multiScroll/
  

10. diaporama: Kenburns 效果 与 glsl 转换动画库

• github: https://github.com/gre/diaporama
  
• demo: http://greweb.me/diaporama/
  

11. RainEffect: 雨滴效果

• github: https://github.com/codrops/RainEffect
  
• demo: https://tympanus.net/Development/RainEffect/
  

不管是不是科班出身，每一个程序员都应该花时间了解和学习计算机科学相关的基础知识，因为所有关于如何编程的底层逻辑和原理都在那里了。
这里有4本手册，全网累积下载100w次，几乎程序员人手一套，包含数据结构与算法、操作系统、计算机组成原理、计算机网络等硬核基础知识，图文+实战案例，平时开发+搞定面试，帮你快速建立对计算机科学的大局观，夯实计算机基本功，瞬间起飞～

祝大家玩的愉快，要是觉得不错的话，那就帮我
@代码丸子


点个赞哈，码字不易，ღ( ´･ᴗ･` )比心！

白涩天

3位淘系技术前端工程师，精心筛选出 26 个难度层层递进，好玩且实用的前端项目，比如动画制作、文字识别、可视化图表、H5制作等等，甚至还能把云音乐灰色歌曲解锁播放（嘘！）
本篇内容按难度分为【初级篇：8个】、【中级篇：9个】、【高级篇：9个】项目，不同水平不同学习瓶颈的同学可按需选择~
（点击头像关注我们账号，别错过更多阿里工程师一线技术干货）
—————————————————————————————————————

初级篇

这里一般适用于刚入门前端的同学，一般入门前端都是从html和css开始的，应该让这些同学提起对前端的兴趣，因此初级篇选用几个比较有趣的css库来让同学入门前端。
animate

animate是一个css动画库，动画内容一般也是我们所熟悉的，例如渐入、渐出、弹跳、旋转、抖动等特效。ppt里面的许多特效在animate都能找到。而且使用简单，只需引入库并添加相关css即可。

• 演示地址：https://animate.style/
  
• GitHub地址：https://github.com/animate-css/animate.css
  

CSS-Inspiration

CSS-Inspiration涵盖了css的许多常见的特效，例如布局方式、border、伪元素、滤镜、背景3d等。这些都是css里面十分重要的知识点，当我们学习完css基础之后，可以利用此项目来制作一些常用的特效，也可以巩固基础知识。

• 演示地址：https://chokcoco.github.io/CSS-Inspiration/#/
  
• GitHub地址：https://github.com/chokcoco/CSS-Inspiration
  

Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap是可以直接应用到我们平常的项目里的，而且非常方便、功能特别多，也是我们常用的前端UI框架。

• 官网：https://getbootstrap.com/
  
• GitHub地址：https://github.com/twbs/bootstrap
  

tesseract.js

一个js ocr识别库，支持包括中英文等许多语言的图片和视频文字识别，底层封装了Tesseract OCR引擎来实现。

视频实时ocr：

• demo: http://tesseract.projectnaptha.com
  
• github: https://github.com/naptha/tesseract.js
  

vanillawebprojects

这里一共包含20+个项目，包括表单验证、音视频播放器、打字等小应用，有趣且方便学习。

• github: https://github.com/bradtraversy/vanillawebprojects
  

Ant Design

基于 Ant Design 设计体系的 React UI 组件库, 提供了丰富的组件，基本满足各种开发使用需求。大部分前端项目都会涉及到React / Vue的组件开发，如何开发封装一个组件是成为一个合格前端的第一步，可以通过模仿Ant Design的写法去学习如何开发一个组件，同时学到框架(React / Vue) + HTML + CSS。

• github: https://github.com/ant-design/ant-design/ （React版本）
  
• https://github.com/vueComponent/ant-design-vue/ (Vue版本)
  

Echarts

基于 JavaScript 的开源可视化图表库。Echarts使用数据配置的方式轻松的实现可视化，如果想学习数据可视化，不如从学习Echarts的实现开始。

• github: https://github.com/apache/echarts
  

JavaScript的学习

ECMAScript是JavaScript的语言标准，描述了JS的能力，API，基本实现步骤。目前比较通用的标准是ES6，从最初的版本：June 1997，最新的标准已经到了Edition 12 (June 2021)。每个版本都添加 / 修改了新的语法和API， 作为一个前端开发者，应该关注JS的变化，可以查看最新的ECMAScript提案，即将发生的变化。

• 传送门：https://es6.ruanyifeng.com/ ES6的学习
  
• ECMAScript提案：https://github.com/tc39/proposals
  

中级篇

当有一定css基础之后，前端工程师肯定需要接触一些js。使用js我们可以根据自己的逻辑，让动画产生不同的效果。在逐渐接触到一些大型的项目时，就可以开始学习前端工程化。
particles.js

当我们浏览网页的时候，会看见一些网站的背景有粒子效果，看完是不是也很好奇它是怎么实现的呢？在particles.js这个库里面，我们可以制造许多粒子效果，用在网页的背景可是相当好看的。

• 演示地址：https://codepen.io/VincentGarreau/pen/pnlso
  
• GitHub地址：https://github.com/VincentGarreau/particles.js
  

reveal.js

reveal.js是一款网页ppt，界面优美，又支持许多ppt功能，同时也有许多插件满足前端的需求，例如markdown、code等代码高亮插件。

• 文档地址：https://revealjs.com
  
• GitHub地址：https://github.com/hakimel/reveal.js
  

swiper.js

swiper是目前应用广泛的轮播图插件，拥有许多配置，也有许多切换效果，基本可以满足前端开发中轮播图的需求。

• 文档地址：https://www.swiper.com.cn/api/index.html
  
• GitHub地址：https://github.com/nolimits4web/swiper
  

构建（Build）工具

大型项目需要构建工具进行打包，使用插件，转义等，所以学习如何配置构建工具，如何基于构建工具的能力自定义实现某些功能是很重要的。Webpack和Gulp是两种常见的打包工具。

• Webpack：https://github.com/webpack/webpack
  
• Gulp: https://github.com/gulpjs/gulp
  

TypeScript

现在的前端开发中，对于TypeScript的使用越来越多，尤其是大型迭代项目中，JavaScript不能满足需要，学习TypeScript会是一个必备的技能。

• github：https://github.com/microsoft/TypeScript
  
• github中也有不少翻译的guide book: https://github.com/jkchao/typescript-book-chinese
  

Yeoman

Yeoman是一个能快速生成一个Web APP的脚手架工具，可以通过Yeoman定义常用的模板APP。

• github: https://github.com/yeoman/yeoman
  

rrweb

一个可以录制并回放任意 web 界面中的用户操作的纯前端的库，完全借助浏览器api来实现录制回放，实现的想法很有趣，对需要录制回放用户行为的需求很有帮助。

• github: https://github.com/rrweb-io/rrweb
  

vite

是一个新型前端构建工具，能够显著提升前端开发体验，和webpack等老牌打包工具不同，vite另辟蹊径，开发环境下使用原生esm，让本地开发更快速。代码相较webpack更轻量，且实现逻辑巧妙，比较适合阅读学习。

• github: https://github.com/vitejs/vite
  

UnblockNeteaseMusic

还在因为云音乐因为版权下架了一批你自己喜欢的歌曲，但是又不想单独为了几首歌换平台而烦恼吗，那你可以试试这个库，可以使用 QQ / 虾米 / 百度 / 酷狗 / 酷我 / 咪咕 / JOOX 等音源把云音乐灰色歌曲解锁播放。

• github: https://github.com/nondanee/UnblockNeteaseMusic
  

高级篇

学完基本的js基础后，我们需要学习一些前端常用框架，例如vue、react，这两个框架是我们工作中经常都要用到的，作为一名前端工程师不得不熟悉其中一个框架。掌握了前端工程化之后，就可以做一些有趣的方向，比如前端智能化，Low Code / no Code， serverless 等。
vue-admin-template

这是一个vue后台管理系统框架，可以让我们轻松地实现一个后台管理系统，界面也比较美观。

• 文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
  
• GitHub地址：https://github.com/PanJiaChen/vue-admin-template
  

h5-dooring

h5-dooring是一款可视化编辑器，底层是用react写的，使用此工具可以让我们快速生成h5页面。同时通过这个平台也能了解到低代码的相关知识。

• 文档地址：http://h5.dooring.cn/doc
  
• GitHub地址：https://github.com/MrXujiang/h5-Dooring
  

canvas-special

如果大家对图形学感兴趣，可以学一下canvas，canvas-special提供了许多canvas精美的案例供我们学习。

• GitHub地址：https://github.com/bxm0927/canvas-special
  

node-question-answering

基于Node.js的用深度学习模型去回答问题

• github：https://github.com/huggingface/node-question-answering
  

相关学习资源imgCook

通过设计稿生成组件代码的low code工具

• github: https://github.com/imgcook/imgcook
  

Midway

Midway 是一个适用于构建 Serverless 服务，传统应用、微服务，小程序后端的 Node.js 框架

• github: https://github.com/midwayjs/midway
  

Luckysheet

一款纯js实现的在线表格库，功能强大，excel的常见能力都支持，对有表格库集成需求或者要实现类似功能的很有帮助。

• github: https://github.com/mengshukeji/Luckysheet
  

flowchart-fun

是一个高效的绘制流程图和思维导图的工具库，输入文字，就能自动生成一个框图，很有意思。不过是基于既定的英文单词串生成框图，可能上手使用会有一定难度。

• github: https://github.com/tone-row/flowchart-fun
  

记得别吃灰，赶紧学起来吧~有问题欢迎与我们交流~
（本篇内容作者：阿里巴巴淘系技术部-观浪、理火、车铭）
——————————————————————————————————————————
阿里巴巴集团淘系技术部官方账号。淘系技术部是阿里巴巴新零售技术的王牌军，支撑淘宝、天猫核心电商以及淘宝直播、闲鱼、阿里汽车、阿里房产等创新业务，服务9亿用户，赋能各行业1000万商家。我们打造了全球领先的线上新零售技术平台，并作为核心技术团队保障了11次双十一购物狂欢节的成功。详情可查看我们官网：阿里巴巴淘系技术部官方网站。
点击下方主页关注我们，你将收获更多来自阿里一线工程师的技术实战技巧&成长经历心得。另，不定期更新最新岗位招聘信息和简历内推通道，欢迎各位以最短路径加入我们。

左手诺言

推荐 9 个前端开发者练手项目！！！
这些项目都是基于 Vue.js 前端框架，都是基于 Vue.js 开发点赞最靠前的项目。
相比于其他前端框架，Vue 更加易学。尤其在中国，Vue 可以说是前端开发者必会的框架，在 GitHub 上基于 Vue 开源的优质项目也是数不胜数，今天我们就盘点 GitHub 上受欢迎的 9 个开源项目。
1. 美观的后台模板 (Star: 67.1K)

地址：https : //http://github.com/PanJiaChen/vue-element-admin
Vue Element Admin 堪称接私活利器，是一个组件丰富的前端页面模板。它基于 Vue 和 Element UI 开发，有许多功能，例如登录/注销、权限认证、表、可视化组件等等，这些功能都是直接可用的，既美观又方便。
2. Awesome Vue.js (Star：60.2k)

地址：https://github.com/vuejs/awesome-vue
如果你打算学习 Vue，找一些 Vue 的学习资料、或者示例，这个 GitHub 项目不能错过。
该项目是由 Vue.js 创建和维护的，包含一系列的 Vue.js 的精选内容，对于刚学习 Vue 的小白或者进阶老手，这个项目都是很适合的，这里面涵盖了大量的内容，因此很值得去看一看。
3. Element （Star：49.9k）

地址：https://github.com/ElemeFE/element
Element UI 是一套为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面，基于 Vue 2 构建，非常棒的 UI 工具包。
4. Hoppscotch （Star：28.8k）

地址：https://github.com/hoppscotch/hoppscotch
Hoppscotch：帮助你更快地创建请求，节省开发时间，早下班。Hoppscotch 除了支持 REST API 外，它还支持 GraphQL。它还可以为你的 API 生成文档。
5. best-resume-ever (Star：14.6k)

地址：https://github.com/salomonelli/best-resume-ever
这个是一个简历项目，几行代码助你快速构建美观的简历，它支持使用 Vue 和 LESS 构建的各种模板。你可以在本地预览自己的简历，还可以在模板之间随意切换，方便选择合适自己的简历。
6. 另一个后台模板 (Star：3.6k)

地址：https://github.com/Armour/vue-typescript-admin-template
和第一个项目非常类似，也是非常美观的模板，功能也相似，不同的是这套模板具有 TypeScript 支持。
7. iHateRegex (Star：2.8k)

地址：https://github.com/geongeorge/i-hate-regex
正则表达式的可视化表示，你可以在“测试”区域中使用字符串测试正则表达式，并将可视化效果嵌入到你的站点中去，比如用户名、邮箱、日期、电话等，你只需要键入类型，它就会返回给你对应的表达式和演示字符。
8. 优雅的 Markdown 编辑器

地址：https://github.com/geongeorge/i-hate-regex
一款美观的 Markdown 编辑器，我用了一下，感觉没有 Typora 好用。
9. 快速构建 WEB 应用

GitHub 搜索 VUE-admin 即可

这是一套前端模板，不是简简单单的 UI，而是一个完整的前端项目。如果你学习完 Vue 的基础知识，这个项目可以作为第一个练手项目！
每个项目都给出了链接，如果无法访问的话，可以：
链接: https://pan.baidu.com/s/1UZpwT11XODLe_60zJ3m7qQ  密码: pq9q

hldiqjdq

推荐几个，其中有一个是我自己的项目，是哪个不说了，自己猜
壹号项目：玩转浏览器控制台

这几个项目都是一个项目中的一部分，玩转浏览器 console 系列
主项目地址:GitHub - yu-tou/colors-web: 自由/简单地让浏览器的console变的五彩斑斓。chalk or colors like library, use in browser console , with any colors
介绍，这是一个可以在浏览器控制台很方便输出彩色内容的库，以下是几个官方demo，实际上可以有很多其他有用途，用起来也很方面。
1.1 在 console 里实现一个小游戏：码农躲炸弹

体验地址：Webpack App
源码：colors-web/game.ts at master · yu-tou/colors-web · GitHub
截图：

1.2 在 console 里看视频

体验地址：Webpack App
源码：https://github.com/yu-tou/colors-web/blob/master/example/camera.ts
1.3 在 console 里显示音乐频谱

体验地址：Webpack App
源码：https://github.com/yu-tou/colors-web/blob/master/example/audio.ts
贰号项目：在自己 app 内快速集成小程序运行环境

这个项目也是我找了好久的一个解决方案，因为平常公司里开发业务，都需要考虑很多平台，例如同一个业务功能要在自己的app、官方H5上集成，也要考虑在微信、支付宝等各个小程序平台上集成，如果分多个技术栈开发同一个业务，非常耗费资源，所以一直有一个想法，如果在自己的app上也有一个标准的小程序运行环境，这样我们就只需要专注于用小程序进行业务功能的开发，最终把代码分发到各个小程序的平台，同时在自己的app中也以小程序的方式运行，这样可以极大节省开发工作量。
但是我一直在寻找一个比较完美的方案，却没有结果，因为有一些方案是成套的，例如支付宝的mpaas，一旦集成需要集成一堆东西进来，就是想接管你的app底层，而其他小程序转h5的方案则很难应用于复杂的生产场景，简单的页面问题不大，稍微复杂一点的页面，性能和安全性都是问题，最终结果就是没有完全之策，总是需要开发多套代码来覆盖全平台，后来尝试自己实现，发现工作量其实非常大，以后的维护也是一个问题。
蹲守多年后，终于在 github 上找到一个方案：FinClip


FinClip 小程序容器技术，15分钟 让 App 快速运行小程序






github 地址：Finogeeks · GitHub

这是一个挺新的项目，但是成熟度还是很高的，通过 github 就可以看出，生态非常丰富。可以实现在 iOS，Android，Flutter ，reactnative，windows，Mac 中运行小程序，完美匹配了我的需求
而且在 github 中有各个平台的 demo 实现，可以 clone 下来后直接运行，感兴趣的同学可以直接试一下：
https://github.com/finogeeks/finclip-ios-demo
https://github.com/finogeeks/finclip-android-demo
https://github.com/finogeeks/finclip-react-native-demo
https://github.com/finogeeks/finclip-flutter-demo
https://github.com/finogeeks/finclip-win32-demo
github不稳定的，也可以到官网去看看：
https://mp.finogeeks.com
而且这个项目还附带了小程序包管理的平台，可以实现小程序包的管理，实现 APP 对外开放的管理等，非常方便。

官方最近更新非常活跃，最近新增了一些插件

它还有一个点，也非常吸引我，就是他们的小程序语法是兼容微信小程序语法的，也就是说，你之前如果有在微信上开发过小程序，可以直接把代码包拖过来进行上传，不用再二次开发。

感觉这个团队的开发能力很强，出品的技术应该不错，有类似需求的同学可以尝试。


FinClip 小程序容器技术，15分钟 让 App 快速运行小程序






叁号项目：前端如何直通数据库？

平常要做个网站或者app，需要服务端，怎么办，其实有不少解决方案的，但是都比较复杂，有没有比较简单的，搭个数据库，运行个node服务，一句代码不需要写，一个配置都不需要配，就能直通数据库，还真有，而且这个项目还支持一些高级查询的操作。
github地址：https://github.com/o1lab/xmysql
看了一下，最近这个项目又进化了，变得更高级了，感兴趣的同学也可以了解下：GitHub - nocodb/nocodb: Open Source Airtable Alternative
肆号项目：交互式聊天窗口

这种交互方式国外比较流行的，但是国内见得比较少，不是那种在网站上聊天的，而是把一些网站的交互以聊天的方式完成，例如很多国外网站的注册和登录都是通过交互式聊天完成的，而不是弹出一个注册页面，让人觉得很人性化也很生动。

本来我也想在自己产品里集成一个这样的交互式聊天，让用户可以以聊天的方式触发一些功能，但是想了想自己实现还挺复杂的，后来在 github 发现了这个项目，稍微改造下就可以用。
github地址：GitHub - dmitrizzle/chat-bubble: Simple chatbot UI for the Web with JSON scripting
最终，在产品里快速实现了一个类似功能，纯前端实现。

wulibing

先提供两个方向给你做下参考：

• 研究页面框架，掌握其核心思想。关于这个方面在github上有个非常好的项目：https://github.com/tastejs/todomvc，可以参考下我在这个问题下的回答：angular 和 React 想选择一个学习，哪个比较好？ - eit Maple 的回答
  
• 如果想用js做一些酷酷的事情，那么有图像处理方面的库，是腾讯的AlloyTeam做的AlloyImage，还有很多待完善的功能，也欢迎你做一些贡献。传送门在此：AlloyTeam/AlloyImage · GitHub
  

-----------------冒着考试挂掉的风险来补充两个---5.26更新---------------

• 好多回答提到的D3，确实是一个非常有名非常有名的并且十分炫酷吊炸天的JS库，你不容错过：mbostock/d3 · GitHub （修改：d3的fork数并不是GitHubjs库中最多的，搞错了）
  
• 另外一个也很有意思，不过门槛略高，Three.js，是个3D库，没有相关领域经验的同学，坑大慎入。先来个华华丽丽的样例来秀一秀：How To Make The Earth In WebGL?。GitHub传送门mrdoob/three.js · GitHub
  

-----------------5.30--------------------

• 本来想在这个答案里慢慢分类总结一些，没想到 @trigkit4
  
  捷足先登了，那我就给他打个广告吧，github上值得关注的前端项目。 这里面应该总结得挺全了，足以满足各种癖好了 ; )