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/

My Code

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…

View on GitHub

More Details

I started by creating a Pinata account.

and I logged in afterward.

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.

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

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

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!.

Click on DONE and start building. 🥳

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

Thank you guys.