How I made a Link sharing portfolio app using React

arize99

Arize Nnonyelu

Posted on October 11, 2024

How I made a Link sharing portfolio app using React

This is a submission for the The Pinata Challenge

What I Built

I built a simple link-sharing portfolio. This app allows individuals to share links to their social accounts, or portfolios. The software can serve two purposes if you edit the code.

Demo

https://link-sharing-portfolio.vercel.app/

link sharing pinata challenge app 1

link sharing pinata challenge app 2

link sharing pinata challenge app 3

My Code

GitHub logo arize99 / link-sharing-portfolio

A simple portfolio react app that shares links and uploads a profile picture that integrates file uploads with Pinata’s Files API.

Link Sharing Portfolio

Description

Link Sharing Portfolio is a React-based web application that allows users to create a simple portfolio page with links to their GitHub, LinkedIn, and Twitter profiles. It also includes functionality to upload and display a profile photo using Pinata's IPFS storage.

Features

  • Input fields for GitHub, LinkedIn, and Twitter profile links
  • Profile photo upload functionality
  • Integration with Pinata's IPFS storage for photo hosting
  • Responsive design using Tailwind CSS

Prerequisites

Before you begin, ensure you have met the following requirements:

  • You have installed the latest version of Node.js and npm
  • You have a Pinata account and API keys (for photo upload functionality)

Installing Link Sharing Portfolio

To install Link Sharing Portfolio, follow these steps:

  1. Clone the repository:
    git clone https://github.com/yourusername/link-sharing-portfolio.git
    
  2. Navigate to the project directory:
    cd link-sharing-portfolio
    
  3. Install the dependencies:
    npm install
    

Configuring the Application

  1. Create a .env file in the root directory of the project.
  2. Add…

More Details

I started by creating a Pinata account.
create new pinata account

and I logged in afterward.

login to pinata account

You can use Pinata for various purposes, but for this purpose, we want to use it as a dev so I went to API to get a new key.

go to api

I clicked the New Key button from the API page to create a new key.

create new api

I chose a name for the Key and gave admin permission so that I could have all the privileges.

name the key and give admin permission

You will be presented with an API Key, API Secret, and JWT Code...MAKE SURE THAT YOU COPY THEM INTO A SAFE AND SECURE PLACE IMMEDIATELY BECAUSE YOU WON'T BE ABLE TO VIEW THEM AGAIN!.

copy and save the key because you wont see it again

Click on DONE and start building. 🥳

click on done start building

Special thanks to @pinata for this challenge.This is the first challenge I am participating in on Dev.to.

Thank you guys.

💖 💪 🙅 🚩
arize99
Arize Nnonyelu

Posted on October 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related