10 个 MERN 项目创意，助您打造求职作品集

介绍

1. 视频会议服务

2. 视频分享应用

3. 实时聊天应用

4. 电子商务应用

5. 社交媒体应用

6. 博客应用

7. 音乐分享应用

8. 在线约会应用

9. 在线住宿预订应用程序

10. 在线图书馆

介绍

所以你已经学习编程一段时间了，掌握了HTML、CSS、JavaScript、React和Node等Web技术，也根据教程做了一些项目，比如待办事项应用、天气应用等等……但相信我，我曾经也深陷教程泥潭，浪费了很长时间，最终却收效甚微，甚至没能找到第一份工作。如果我当初按照我在这篇博客里分享的方法去做，应该早就找到工作了。因为教程并不教授编程的根本——解决问题的能力，它们只教语法，却不教你像程序员一样思考。而这种思考方式只能通过大量的实践和反复试错才能掌握。记住，成长往往伴随着不适。

我同意教程对初学者很有帮助，但它们并不能让你走得太远。一旦你掌握了所学技术的基础知识，就可以着手进行更具挑战性的项目，从而练习技能并不断提高。

本博客中的项目面向那些掌握 MERN 技术栈基础知识，但苦于教程学习而无法取得进展的程序员。所有这些项目都会迫使你学习一些你并不熟悉的新技术，但请记住，成长往往伴随着不适和挑战，所以要努力学习，也要讲究方法。

这些项目在某些方面有所重叠，因此开发一个项目有助于开发另一个项目。基本上，你可以在另一个项目中使用你在一个项目中实现的组件和功能。而这将成为你未来在公司工作的一部分。

为什么要构建这些项目？你应该构建这些项目来培养程序员的思维方式，提高逻辑能力，并成为 MERN 技术栈高手。我精心挑选了这 10 个 MERN 项目，你可以通过构建它们来提升编程技能，并获得你梦寐以求的程序员工作。

1. 视频会议服务

例如： Zoom、Skype、Microsoft Teams

疫情爆发后，人们被迫居家学习和工作。在此期间，Zoom、Microsoft Teams 等远程视频会议应用迎来了爆发式增长，因为它们解决了远程学习和会议的问题。那么，为什么不自己动手开发这些应用，并学习它们的工作原理呢？这个项目将挑战你的极限，让你走出舒适区。

你可以使用 GraphQL 的 Apollo Server 或 REST API 创建 API。用户可以通过 Passport.js 策略和 JWT 令牌进行身份验证。数据可以持久化到 MongoDB 或 Postgres，选择权在你。你可以使用 Redux 管理 UI 状态，并使用 WebRTC 实现实时视频通信。你还可以编写测试，这在大多数实际项目中都会用到，即使你没有编写过。你将不得不进行大量的 Google 搜索和阅读文档，这和你入职后日常工作中的工作内容类似。在项目开发过程中，你将遵循“尝试、失败、学习、重复”的循环。

项目构建完成后，您可以将 API 部署到 Heroku，将 UI 部署到 Netlify，然后就可以与全世界分享了。

前端和后端使用的技术

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo-Client/REST API - 使用 GraphQL 或 REST 实现请求
• React Motion/Spring 用于动画
• WebRTC——用于实时视频通信
• socket.io-client - 用于实时数据
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Apollo-Server/REST API - 使用 GraphQL 或 REST API 实现请求
• socket.io - 用于实时数据
• 可选：使用 Jest 进行单元测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

2. 视频分享应用

示例： Youtube、Snapchat、TikTok

我相信你每天都在使用文中提到的一个或多个视频分享应用。你可以开发任何你喜欢的应用来给未来的雇主留下深刻印象，因为他们需要使用各种复杂项目中常用的技术。所以开发这类应用会非常具有挑战性，但最终你会深入了解开发者日常使用的技术。谁知道呢，也许你就能开发出下一个爆款应用，并因此致富。

您可以使用 GraphQL 或 REST API 创建 API，数据持久化到 MongoDB 或 Postgres 中。授权方式可以使用 JWT 或 Passportjs。您可以使用 Cloudinary API 上传图片和视频，这样可以避免服务器负载过重。如果您会编写测试，我建议您练习编写测试；否则，您可以直接构建项目而无需编写测试。您可以使用 Socket.IO 库实现实时通知功能，并将数据存储在 MongoDB 或 Postgres 中。

您可以将 API 托管在 Heroku 上，将 UI 托管在 Netlify 上。

前端和后端使用的技术

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• React Motion/Spring 用于动画
• socket.io客户端
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行授权
• 使用 JWT 进行授权
• Cloudinary API - 用于上传图片和视频
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Apollo-Server/REST API
• socket.io
• 可选：使用 Jest 进行单元测试和集成测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

3. 实时聊天应用

例如： Slack、WhatsApp、Telegram、Discord

我们几乎每天都会使用上述提到的应用程序，因为它们方便了我们与远方的朋友和家人实时交流。你将使用 Socket 库来实现这个实时功能，并实现用户身份验证和授权机制以确保用户安全。总而言之，这是一个极具挑战性的项目，你将深入了解所使用的技术并提升你的编程逻辑能力。

你可以选择使用 REST 或 GraphQL 编写 API，并将数据持久化到 Postgres 或 MongoDB 中。实时数据交换通过 socket.io 库实现。用户通过 Passportjs 等策略进行身份验证，例如 Google、Twitter 和 Facebook。用户使用 JWT 令牌进行授权。编写实际环境测试至关重要，因为它们可以帮助我们避免几乎所有会造成长期金钱和时间损失的 bug，但如果你选择不编写测试，也没关系。你使用 emoji-mart 在 UI 中发送表情符号，并使用 Redux 在单一位置管理整个应用程序的状态。

你可以在 Heroku 上同时部署前端和后端，但建议将它们分开托管，这样更方便。例如，将 API 托管在 Heroku 上，将 UI 托管在 Netlify 上。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• socket.io客户端
• 表情符号市场
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passport.js 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Apollo-Server/REST API
• socket.io
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

4. 电子商务应用

例如：亚马逊、UberEats、Udemy

如今，网上购物已无处不在。几乎所有网站都设有某种形式的在线商店，无论是只销售少量产品的简单商店，还是像亚马逊、eBay 等销售各种类别海量商品的大型商店。电子商务市场规模庞大。因此，掌握如何开发电商应用程序能让你在竞争中更具优势，如果你是自由职业者，还能帮你获得更多客户。

您可以使用 GraphQL 或 REST API 编写 API，数据存储在 MongoDB 或 Postgres 数据库中，图片则存储在 Cloudinary API 的免费套餐中。您需要为该项目创建一个管理面板，并使用 Stripe 平台处理支付。您可以使用 d3.js 库在管理面板上可视化数据。身份验证分别使用 Passportjs 和 JWT 实现。编写单元测试、端到端测试和集成测试并非必需，但如果您能编写这些测试，将会是一个加分项。

项目完成后，API 托管在 Heroku 上，UI 托管在 Netlify 上。

前端：

• React/NextJs
• Redux/Redux 工具包
• REST API
• D3.js
• Stripe 与 use-shopper-cart 配合使用进行支付
• socket.io客户端
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API - 用于上传图片
• Apollo-Server/REST API
• 条纹
• socket.io
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

5. 社交媒体应用

例如： Instagram、Twitter、Facebook

社交媒体应用，例如 Instagram、Facebook 和 Twitter，无疑已成为我们生活中不可或缺的一部分。通过这些应用，我们可以聊天、阅读最新新闻、分享视频、结识陌生人等等。你也可以自己动手开发这类应用，以此来提升你的编程技能。

API 使用 GraphQL 或 REST API 构建，数据存储在 MongoDB 或 Postgres 中。用户需要通过 Google 或邮箱进行身份验证，授权采用 JWT 实现。您可以使用 React 库（例如 React Spring 或 Motion）或其他您选择的动画库创建动画。图像和视频上传到 Cloudinary API，因此不会给服务器造成过大的压力。

您使用 Heroku 托管后端代码，使用 Netlify 托管 React 代码。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• 反应弹簧/运动
• socket.io客户端
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API 用于图像和视频上传
• Apollo-Server/REST API
• socket.io
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

6. 博客应用

例如： Medium、Dev.to、HackerRank

我们都像你现在在 Dev.io 上阅读文章一样，在网上阅读文章。创建博客应用很棒，因为你可以将自己的文章托管在自己的应用上。我推荐使用 Dev.io 构建应用，但最终选择权在你。

您可以使用 GraphQL 或 REST API 创建 API，并将用户生成的数据存储在 MongoDB 或 Postgres 中。您可以使用 Passportjs 等策略（例如 Google、Facebook 或 Twitter）对用户进行身份验证，并使用 JWT 令牌进行身份验证。您可以使用 React Motions 或 Spring 创建动画，当然您也可以使用任何库或仅使用 CSS 来实现动画。您可以使用 remark 这个 Markdown 包来创建 Markdown 格式的博客文章。您还可以选择编写单元测试、端到端测试和集成测试。

API托管在Heroku上，UI托管在Netlify上。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• Markdown 注释
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Apollo-Server/REST API
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

7. 音乐分享应用

例如： Spotify、SoundCloud、Pandora

在这个项目中，你可以构建示例中提到的任何一款音乐分享和流媒体应用。你还可以选择实现商店功能，允许用户购买音乐。总的来说，这是一个既有趣又有挑战性的项目，能够帮助你快速成长。

API 使用 GraphQL 或 REST API 创建，应用数据持久化到 MongoDB 或 Postgres。身份验证使用 Passportjs 或 JWT 令牌实现。UI 动画使用 React Spring、React Motion 或您选择的任何 React 动画库实现。图像和视频上传到 Cloudinary API。如果您会编写测试，可以使用 React Test Library 进行单元测试，使用 Cypress 进行端到端测试。

API托管在Heroku上，UI托管在Netlify上。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API 用于图像和视频上传
• Apollo-Server/REST API
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

8. 在线约会应用

例如： Tinder、Bumble、Match、Grindr

在线约会应用已经成为结识男女朋友甚至未来伴侣的主流方式。你可能也在用这些应用和别人约会。作为一名程序员，我当然可以开发约会应用，但我在这方面却毫无建树 :(，哈哈，开玩笑啦。所以，这个项目将会非常有趣，也很有挑战性，而且会是你作品集里的绝佳亮点。

你可以使用 GraphQL 或 REST 创建 API，并将数据存储在 MongoDB 或 Postgres 中。身份验证使用 Passportjs 实现，授权使用 JWT 令牌实现。动画可以使用 React Spring、React Motion、React GSAP 或你喜欢的其他动画库来实现。你可以使用 socket.io 库创建实时交互。如果你熟悉测试，还可以编写 uinit 测试、端到端测试和集成测试。

API托管在Heroku上，UI托管在Netlify上。

前端：

• React/NextJs
• Redux/Redux 工具包
• react-motion、react-sprint、react-gsp 用于动画
• Apollo客户端/REST API
• socket.io客户端
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API 用于图像和视频上传
• socket.io
• Apollo-Server/REST API
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

9. 在线住宿预订应用程序

例如： Airbnb、Vrbo、HomeAway、Stayz

Airbnb 是出国旅行时租房的主流方式。那么，何不开发一款属于你自己的 Airbnb 应用，同时提升你的编程技能呢？我得告诉你，这个项目极具挑战性，但你也会从中受益匪浅。项目完成后，将其上线，你就可以把它添加到你的作品集中，这绝对会助你找到理想的工作。

API 使用 GraphQL 或 REST 创建，数据存储在 MongoDB 或 Postgres 中。支付通过 Stripe 服务处理，并使用 use-shopper-cart 组件。身份验证使用 Passport.js，授权使用 JWT 令牌。动画使用 React Spring/Motion 或其他您选择的框架实现。您可以使用 D3.js 或 recharts 进行数据可视化。
您还可以编写各种类型的测试，例如：单元测试、端到端测试和集成测试。

您使用 Heroku 托管后端代码，使用 Netlify 托管前端代码。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• D3.js、Recharts
• socket.io客户端
• Stripe 与 use-shopper-cart 配合使用进行支付
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API 用于图像和视频上传
• Stripe 用于处理付款
• socket.io
• Apollo-Server/REST API
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

10. 在线图书馆

例如：古腾堡计划、Goodreads、在线图书页面、开放图书馆

对于爱书之人来说，在线图书馆变得至关重要。无论你是外出散步、跑步还是开车，都可以使用这些应用程序来听书或阅读书籍。你还可以创建类似古腾堡计划或 Goodreads 的在线图书馆，让你随时随地收听或阅读书籍。

你可以使用 GraphQL 或 REST API 编写 API，并将数据存储在 MongoDB 或 Postgres 中。身份验证使用 Passportjs 实现，授权使用 JWT 令牌实现。支付使用 Stripe 处理。UI 动画使用 React Motions 或 React Spring 实现，数据可视化使用 d3.js 或 recharts 库。你也可以编写测试，但这并非必须。

您使用 Heroku 托管后端代码，使用 Netlify 托管前端代码。

前端：

• React/NextJs
• Redux/Redux 工具包
• Apollo客户端/REST API
• react-motions、react-spring、gsp react
• D3.js、Recharts
• socket.io客户端
• Stripe 与 use-shopper-cart 配合使用进行支付
• 可选：单元测试、端到端测试、使用 React Testing Library 和 Cypress 进行集成测试

后端：

• Node.js
• 使用 Passportjs 进行身份验证
• 使用 JWT 进行授权
• MongoDB（搭配 Mongoose）、Postgres（搭配 Prisma）或 MySQL
• Cloudinary API 用于图像和视频上传
• Stripe 用于处理付款
• socket.io
• Apollo-Server/REST API
• 可选：使用 Jest 进行单元测试和端到端测试

部署中：

• Netlify 上的前端
• 后端：在 Heroku 上

概括

这 10 个项目都极具挑战性，足以考验任何水平的开发者，最终肯定能让他们成为更优秀的开发者。现在就摆脱教程的束缚，选择其中一个项目，开始构建并分享你的作品吧！祝你编程愉快！