没项目经验,这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
没项目经验,这7个前端项目让你脱颖而出相关推荐
- 【软件测试】面试老约不到?软件测试简历项目经验怎么写?论项目经验的重要性......
目录:导读 前言 一.Python编程入门到精通 二.接口自动化项目实战 三.Web自动化项目实战 四.App自动化项目实战 五.一线大厂简历 六.测试开发DevOps体系 七.常用自动化测试工具 八 ...
- 【金三银四】软件测试简历项目经验怎么写,没有项目经验?
一.简历重要性以及编写原则 能力,经验,技能和工作态度的提现.对自身的说明书. 主要是提现你的价值. 包装简历的原则︰(不失真的包装) 1.合适原则∶需要的是合适,能够为企业带来价值的人. ⒉.营销原 ...
- 单片机项目经验到底是什么?项目开发培训真的靠谱吗?
每次看到钢铁侠这部电影,我都肾上腺素飙升,想去撸它几千行代码发泄一下. 很多人学习和从事单片机开发都是出于兴趣,虽然现实很难达到托尼斯塔克的水平,不过能通过自己写代码去做出自己想要的东西,已经很有成就 ...
- nginx怎么部署php项目,nginx怎么正确部署前端项目
目的: nginx部署打包成为dist的前端项目 (学习视频分享:php视频教程) 相关知识:docker 安装与使用 docker pull nginx docker run --restart=o ...
- idea上传项目到码云_mall前端项目的安装与部署
本文主要讲解mall前端项目mall-admin-web的在Windows和Linux环境下的安装及部署. Windows下的安装及部署 下载nodejs并安装 下载地址:https://nodejs ...
- 计算机算法项目经验例子,算法工程师岗位项目经验范文
项目经历(案例一) 项目时间:2014-04到至今 项目名称:载荷自动筛选及连接强度校核通用化软件 | 项目工具:Windows 项目描述: 项目介绍 要求可以自动化处理飞行载荷数据,可以依据筛选结果 ...
- oa项目经验描述_简历中项目经验模版
项目名称: OA (办公自动化) 开发工具 : MyEclipse 8.6 , Oracle 11g , Tomcat 6.0.18 项目描述 (1, SSH 框架版 ) : OA 主要功能模块分为首 ...
- 面试Java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备...
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者:hsm_computer 链接:https://www.cn ...
- SFB 项目经验-02-共存迁移-Lync 2013-TO-SFB 2015-规划02
本系列博文: Lync 项目经验-01-共存迁移-Lync2013-TO-SFB 2015-规划01 http://dynamic.blog.51cto.com/711418/1858520 Lync ...
- java零项目经验,找工作前该如何准备项目?面试时又该怎么说?
当下找Java工作时,面试官必问的问题是,你干过多少年的java项目?你最近的项目里,用到了哪些java技术?随会在此基础上进一步确认求职者的能力. 如果求职者之前有做过java项目,这块自然没问题, ...
最新文章
- 中国团队狂揽5项大奖!北航团队获2021 ACM MultiMedia唯一最佳论文奖
- 百度Q2日进2.9个亿,新基建推动Apollo上位!李彦宏开招管培生:亲自选亲自带...
- 为什么软件开发,人多,事少,还会工作量大?
- 加载模型预测时出现Dst tensor is not initialized.
- 吴恩达《Machine Learning》精炼笔记 1:监督学习与非监督学习
- uni-app 组件中的canvas转化为图片报错:errMsg:“canvasToTempFilePath:fail canvas is empty”
- JavaScript 获取元素及事件
- 微信小程序,video 全屏视屏展示,广告样式
- 排队论在计算机和通信领域的应用,随机过程与排队论——及其在计算机领域中的应用.pdf...
- 水果电商“异军突起”,资本市场为何竞相追捧?
- springboot毕设项目水族馆观光网站e8iy4(java+VUE+Mybatis+Maven+Mysql)
- Spring boot整合Redis(入门教程)
- 美国B1/B2签证免面试续签流程 2016年5月份更新
- 不完整拼音模糊匹配算法
- C++语言程序设计第五版 - 郑莉(第四章课后习题)
- 平头哥面试——芯片工程师面经
- php chinapay,GitHub - jakehu/chinapay-for-ecshop: 上海银联(chinapay)支付插件 for ECSHOP
- Oceanus:美团点评HTTP流量定制化路由的实践
- vue中获取短信验证码功能IOS手机问题
- 计算机的重要作用和正确使用的建议,引导孩子正确认识电脑和游戏的几点建议...