为了账号安全,请及时绑定邮箱和手机立即绑定

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

这是提交给Pinata挑战的内容

我造的东西

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

演示

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

分享链接的派对挑战应用1

分享链接聚会挑战APP(2)

链接分享的派对挑战游戏3

我的那段代码 GitHub标志 GitHub logo 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账户

我后来, 登录了。

点击登录Pinata账号

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

点击前往API

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

新建API

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

给键命名并赋予管理员权限

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

复制并保存密钥,因为你只会看到一次。

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

点击完成,开始构建

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

谢谢你们

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消