🎭 一个基于 React Hooks + Express 的全栈表情包生成器 🪐

嘿，大家好😃

我终于发布了我的个人项目Meme Studio的第一个版本，这是一个简单快捷的meme 创作和分享网站。它使用Typescript（以及少量 Javascript）创建，前端使用React.js ，后端使用Express.js 。

提供两种语言：英语和法语

网站：https://www.meme-studio.io
Github 存储库：https://github.com/viclafouch/meme-studio

以下是我为Meme Studio使用的一些软件包的列表：

• React - 用于构建用户界面
• React-Helmet - 管理文档头（title、、等...... meta-description）lang
• React-i18next - 国际化
• React-Router - React 的声明式路由
• React-Loadable - 使用承诺加载组件（代码拆分）
• Immer - 通过改变当前状态来创建不可变状态
• ExpressJS - 服务器端
• Sequelize - 数据库

开发持续了大约 7 个月，我希望创建一些相当完整的东西，并能够提高我在 React 方面的技能，更准确地说是使用 Hooks 的技能（当前版本是16.13.1）。

以下是用于开发应用程序（可在桌面和移动设备上使用）的几行有趣的代码。

后端

数据库表 (3)

模因的定义：

可以使用文本定制 meme，我们可以更改其颜色、字体大小、阴影、文本对齐等……

我们还可以通过移动文本来改变其位置。文本可以被复制、删除或添加。

文本框的定义：

为了翻译，我创建了另一个与 Meme 模型相关的表（这样我们就可以在应用程序中搜索 meme）。

Meme 模型可以有多个翻译（FR、EN_GB 等）和文本框。

这里的关系：

REST API

这是一个简单的REST API，我仅使用Express.js的 2 条路由：

• /memes获取可用 meme 列表。
• /meme/:id获取所选 meme 的详细信息，包括其文本框。

该 API 还使用express-validator来检查请求中发送的参数。例如，对于我的分页，检查参数page是否为数字；检查idmeme 的参数是否存在于数据库中；……

前端

正面，这是花费时间最长的部分。

由于组件越来越深，我不得不创建一个全局状态。我使用了React Context API，并使用Immer.js来管理对象的不变性。

下面是我的编辑器状态的界面（与画布显示相关的一切）：

为了创建 meme 的文本内容，我使用了<canvas>元素。

<canvas>是一个 HTML 元素，可用于通过脚本（通常是 JavaScript）绘制图形。例如，它可以用来绘制图形、组合照片，或者创建简单（或更复杂）的动画。我使用这个元素来创建文本 + 照片的组合。

在此处查看<canvas>元素的文档。

请注意，每次自定义 meme（例如：编辑文本颜色）时，画布都需要从 0 开始重新绘制所有内容。

下面是绘制 meme 自定义的效果钩子。

对于那些在项目中使用画布的人，我强烈建议您遵循这些建议，以优化应用程序的性能。

创建 meme 后，您有 3 个选择（目前）：

• 将图像下载为 PNG 文件
• 将图像复制到剪贴板
• 直接在 Twitter 上分享

您已经看到了一些应用程序代码，但您可以详细查看此 GitHub 链接：https://github.com/viclafouch/meme-studio。

Meme Studio是一个开源项目，您可以自由地为其做出贡献。

我感谢任何反馈和建议。

小心 ！