手记

我是如何使用React制作一个链接分享型个人作品集应用的?

这是提交给Pinata挑战的内容

我造的东西

我建立了一个简单的链接分享页面。这个应用允许个人分享他们的社交账号链接或展示他们个人的链接集合。如果你修改代码的话,该软件就可以发挥两个不同的作用。

演示

你可以在这里找到我的作品集: https://link-sharing-portfolio.vercel.app/

我的那段代码 GitHub标志 arize99 / 链接分享作品集

一个简单的React应用,用于分享链接并上传个人资料照片,并集成了Pinata的Files API。

链接分享
以下是描述

链接分享作品集是一个基于 React 的 web 应用程序,允许用户创建一个简单的作品主页,包含链接到他们的 GitHub、LinkedIn 和 Twitter 个人资料。它还包括通过 Pinata 的 IPFS 存储上传和显示个人资料照片的功能。

特点
  • GitHub、LinkedIn 和 Twitter 个人资料链接的输入框
  • 个人照片上传功能
  • 与 Pinata 的 IPFS 存储集成,用于托管个人照片
  • 使用 Tailwind CSS 的响应式设计
先决条件

请在开始前确保已达到以下要求

  • 您已经装好最新版的Node.js和npm
  • 您已经拥有Pinata账户和API密钥(用于上传照片)
设置链接共享

要安装链接共享功能,请按照以下步骤操作:

首先,克隆代码库:

``` git clone https://github.com/yourusername/link-sharing-portfolio.git

克隆来自GitHub的链接共享项目仓库到本地:

  步骤2:导航到项目的文件夹:

```    cd 链接共享文件夹
  1. 安装依赖项:

接着安装依赖项。

运行命令 npm install

设置应用程序:
  1. 在项目的根目录中创建一个 .env 文件。
  2. 在文件中添加…

浏览这个 GitHub 页面

更多细节

我首先创建了一个Pinata账户。

我后来, 登录了。

你可以用Pinata做很多事情,但在这个情况下,我们想作为开发者使用它,所以我去API页面获取一个新的密钥。

我在API页面点击了新建密钥按钮来生成一个密钥。

我为密钥(key)起了个名字,并给了管理员权限,这样我就能有所有权限。

你将获得一个API密钥、API Secret和JWT代码……请立即将它们复制到一个安全的地方,因为你将再也不能查看它们了!

点击“好了”,然后开始建造吧。 🥳

特别感谢 @pinata 发起这个挑战。谢谢他提供的机会。这是我第一次在 Dev.to 参与挑战。

谢谢你们

0人推荐
随时随地看视频
慕课网APP