没项目经验，这7个前端项目让你脱颖而出

我是傲夫靠斯，欢迎关注我的公众号【前端工程师的自我修养】，每天更新。

很多面临毕业的学生想入行前端，但苦于缺少项目经验，不知道做个什么项目能够达到公司的用人要求。也有很多前端的初学者，不知道做什么项目能找到工作。还有就是刚刚工作几年的前端工程师，可能在公司做的东西每天就是重复的画页面，能力提升缓慢，可能在跳槽时没有亮眼的项目经历，无法找到满意的工作。

我今天整理了7个项目给大家作为推荐。

为什么推荐这7个项目呢？因为它们包含了我们所能接触到的全部基础功能，像身份认证、API接口、数据库操作、React/Vue路由切换页面、音乐或者视频播放等等。

另外这7个项目之间还有相互的融合包含，你中有我，我中有你。像社交应用、电商应用、视频应用中也会有实时聊天应用。

在选用技术框架时，可以挑选自己擅长框架来开发，我选的是Vue/React技术栈，后台使用Node Express框架。数据库使用Postgres、MongoDB。

这里推荐大家去深入完成其中的1～2个你感兴趣的就可以了，不必去花时间全部完成，因为面试官更需要的是项目深度，而不是项目的广度。

1. 实时聊天应用

我们每天都会用到聊天软件：像微信、QQ、抖音、淘宝等，这些软件有的主要功能是聊天，有的是作为辅助功能。但现在大多数的软件中都会有聊天的功能。

聊天软件的主要功能就是可以实时的给用户发送消息并可以实时的回复，在用户离线时也可以查看聊天的记录。

如果构建实时聊天应用？

• 首先使用create-react-app或者vue-cli来创建项目
• 使用现有的Sass服务商，例如极光IM、腾讯IM、网易云信，它们都有免费使用的额度。
• 使用socket.io框架自行搭建聊天服务
• 使用Node.js自行搭建websocket服务

这里我推荐大家按顺序从上到下，先从现成的IM服务接入开始，熟悉他们的API设计方式，然后自行搭建时可以参考。

2. 社交媒体应用

社交媒体软件我们常用的像：微信、微博、小红书。

这和聊天软件其实很相似，在社交媒体软件上，用户们可以相互关注，浏览对方的帖子/图片/视频，并可以进行点赞、评论等操作。

如何构建社交媒体应用？

• 使用create-react-app或者vue-cli来创建项目，使用Node API来构建后台服务
• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架
• 使用微信、微博等实现第三方登陆功能
• 将Node API和前端应用部署阿里云、腾讯云等

3. 电商应用

我们常用的有：淘宝、京东、拼多多等

电商软件可以让我们不用走出家门就能买到东西，我们可以在购物车中加入商品、删除商品，以及使用微信、支付宝、银行卡进行结账。

如何构建电商应用？

• 使用create-react-app或者vue-cli来创建项目，使用Node API来构建后台服务
• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架
• 使用支付宝、微信接入支付功能
• 将Node API和前端应用部署阿里云、腾讯云等

如果大家接入支付功能不方便，可以使用stripe NPM包，使用Stripe可以使用测试环境进行创建订单，处理支付。

4.视频应用

我们常用的：B站、抖音、优酷、爱奇艺等等

视频应用一般基本的功能有视频上传、视频浏览、点赞、评论、搜索视频等。

如何构建视频应用？

• 使用create-react-app或者vue-cli来创建项目，使用Node/Express来构建后台服务
• 使用阿里云OSS/VOD，腾讯云COS/VOD来存储视频
• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架
• 将后台应用和前端应用部署阿里云、腾讯云等

5. 博客应用

我们常用的：老的博客像新浪博客、QQ空间、CSDN、博客园，现在比较新的像掘金社区、简书等。

博客一般所具有的功能就是用来展示自己的，我们可以博客上发表帖子内容。

如何构建博客应用？

• 使用React的Gatsby、Next.js，Vue的Nuxt.js来创建项目
• 使用一些markdown转换插件来处理markdown，比如remark等等
• 将应用部署阿里云、腾讯云等

6.论坛应用

我们常用的像：百度贴吧、天涯论坛、v2ex、StackOverflow等

我们程序员会经常去v2ex、StackOverflow去讨论一些技术问题，或者发帖来请教，等待其他人进行回帖解答。

如何构建论坛应用？

• 使用create-react-app或者vue-cli来创建项目，使用Node/Express来构建后台服务
• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架
• 使用微信、微博等实现第三方登陆功能
• 将Node API和前端应用部署阿里云、腾讯云等

7. 音乐应用

我们常用的有：网易云音乐、QQ音乐、网易云音乐。

我们可以通过音乐软件进行听音乐，上传音乐，评论，创建歌单等等。

如何构建音乐应用？

• 使用create-react-app或者vue-cli来创建项目，使用Node/Express来构建后台服务
• 使用阿里云OSS/VOD，腾讯云COS/VOD来存储音频
• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架
• 将后台应用和前端应用部署阿里云、腾讯云等

唠叨

如果本文对你能起到作用，您的点赞、评论、关注是对我最大的鼓励 O(∩_∩)O

我是傲夫靠斯，微信搜【前端工程师的自我修养】，让我们每天进步一点点，期待更好的自己。