这是提交给The Pinata Challenge的一份提交

我创建了一个名为PinDrop（受Pinterest启发）的MERN栈应用，这是一个用来分享想法的平台。你可以上传带有图片的想法，这些图片会被保存到Pinata的文件API。或者保存他人的想法。

来这里体验PinDrop直播：

dev-to-pinata-challenge-client.vercel.app

shravzzv / Dev.to-Pinata-challenge-client

为Dev.to Pinata挑战创建的React应用。

项目演示页面

用于Dev.to Pinata挑战的应用，使用React创建。这是Dev.to发起的一个挑战任务。来源。

• 使用 react-router-dom 进行路由切换。
• 简洁的响应式设计，支持暗色和亮色两种主题。

安装此项目，请按照以下步骤来做：

请克隆仓库到你的本地机器上:

git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-client

然后进入项目文件夹:

cd Dev.to-Pinata-challenge-client

接下来，安装项目所需的依赖项:

npm install

最后，运行开发环境:

npm run dev

这将启动开发服务器。

进入全屏，退出全屏

## 如何参与

如果你想贡献，可以按照以下步骤来。

1. 在GitHub上fork这个仓库。

2. 将你的 fork 克隆到本地。

在命令行中运行以下命令来克隆仓库：
git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-client
接着，进入克隆的文件夹：
cd Dev.to-Pinata-challenge-client

切换到全屏 恢复正常视图

  为你的功能修复或 bug 修复创建一个新分支，比如。

```git checkout -b 功能或修复名称```

全屏模式，退出全屏

  修改你的部分，提交修改，并将这些修改推送到你的fork仓库。

git add .
git commit -m "在此输入您的提交信息"
git push origin feature-or-bug-fix-name（特征或修复错误的名称）

全屏 退出全屏

5. 在 GitHub 上打开 Pull Request，将你的分支与原始仓库的 `main` 分支进行合并请求。

## 问题跟踪

发现了bug或者想要提个请求。

[查看 GitHub 上的內容](https://github.com/shravzzv/Dev.to-Pinata-challenge-client)

##  ![GitHub logo](https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg) [ shravzzv ](https://github.com/shravzzv) / [ Dev.to-Pinata挑战服务器](https://github.com/shravzzv/Dev.to-Pinata-challenge-server)

GitHub用户shravzzv的Dev.to-Pinata挑战服务器仓库

### 服务器，为dev.to Pinata挑战而创建的，基于Express和MongoDB。

# PinDrop API接口

项目演示地址：![项目演示](https://dev.to)

## 描述一下

这是为dev.to的Pinata挑战设计的REST API，你可以通过这个链接了解更多详情: [项目链接](https://dev.to/devteam/join-us-for-the-the-pinata-challenge-3000-in-prizes-59cb)

## 特点

* RESTful API 设计。
* 干净的错误处理和代码结构。

## API 接口

`/用户`

1. `POST: /users/signup`
2. `POST: /users/signin`
3. `PUT (私密): /users/:id`
4. `DELETE (私密): /users/:id`

 `/pins`

1. `get: /pins`
2. `get: /pins/:id`
3. `post(私有): /pins` - 私有操作
4. `put(私有): /pins/:id` - 私有操作
5. `delete(私有): /pins/:id` - 私有操作

## 使用的技术有

[![我的技能图标](https://camo.githubusercontent.com/ae3ea4458c250e3e123f0df846822b57c4cd75a3cd4045e45fb56966f64b38a0/68747470733a2f2f736b696c6c69636f6e732e6465762f69636f6e733f693d657870726573732c6769742c6d6f6e676f64622c6e6f64656a732c706f73746d616e2c7673636f6465)](https://skillicons.dev)

## 安装

要安装这个项目，请按照以下步骤。

克隆仓库：

git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-server

进入目录：

cd Dev.to-Pinata-challenge-server

安装依赖：

npm install

启动开发环境：

npm run dev

切换到全屏模式，退出全屏状态

如果您想贡献，请按照以下步骤来做：

在GitHub上分叉仓库。

1. 把你的fork克隆到本地。

git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-server // 克隆仓库到本地
cd Dev.to-Pinata-challenge-server // 切换到项目目录
npm install // 安装依赖
npm run dev // 启动开发服务器

点击进入全屏。点击退出全屏。

为你的功能或修复bug创建一个新的分支。

git checkout -b 功能或修复名称 # 创建一个新分支来开发功能或修复问题

全屏 退出

1. 做出修改，提交修改，并将修改推送到你的 fork。

git add .
git commit -m "你的提交信息在这里"
git push origin feature-or-bug-fix-name  # 例如功能或修复的名称

全屏模式 退出全屏

1. 在 GitHub 上提交一个 Pull Request，将你的分支与主分支对比。

访问 GitHub 上的

更多详情

皮纳塔在这款应用中大放异彩！这是我利用其功能的一些方式：

• 轻松上传图片：我使用了 npm 上的 Pinata 库来将图片上传到云存储。

• 优化的图像分发：Pinata 的内置优化功能确保了高效且高质量的图像分发。

查看一下用于展示如何使用Pinata上传和优化图片的代码示例：

    const asyncHandler = require('express-async-handler')
    const pinata = require('../config/pinata.config')
    const { Blob, File } = require('buffer')
    const fs = require('fs')

    /**

* 将给定的图像上传到Pinata并返回上传的URL地址。图像将通过Pinata进行优化。
     */
    exports.getUploadedUrl = asyncHandler(async (fileToUpload) => {
      // 创建一个包含文件内容的Blob对象
      const blob = new Blob([fs.readFileSync(fileToUpload.path)])

      // 创建一个新的File对象
      const file = new File([blob], fileToUpload.filename, {
        type: fileToUpload.mimetype,
      })

      const upload = await pinata.upload.file(file)

      fs.unlink(fileToUpload.path, (err) => err && console.log(err))

      // 生成并优化图像的签名URL
      const url = await pinata.gateways
        .createSignedURL({
          cid: upload.cid,
          expires: 5000000,
        })
        .optimizeImage({
          format: 'webp',
          fit: 'cover',
          gravity: 'auto',
          sharpen: 5,
        })

      // 返回优化后的URL地址
      return url
    })

点击进入全屏模式，点击退出全屏模式

其他特点：

• 简洁且响应式的设计：PinDrop 提供了一个简洁且用户友好的界面，能够无缝适应各种屏幕尺寸。
• 安全认证：用户账户通过基于 JWT 的强大认证机制受到保护，确保数据的隐私和完整性。
• 主题自定义：您可以选择亮色或暗色主题以匹配您的偏好。应用程序会自动跟随您操作系统的主题设置。（使用 Chrome DevTools 在开发者工具中切换主题。）
• 高级搜索：PinDrop 使用 MongoDB Atlas Search 实现高效且全面的搜索功能，使用户能够快速找到平台上的相关想法和内容。