🔧 How I made a Link sharing portfolio app using React
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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:
- Clone the repository:
git clone https://github.com/yourusername/link-sharing-portfolio.git - Navigate to the project directory:
cd link-sharing-portfolio - Install the dependencies:
npm install
Configuring the Application
- Create a
.envfile in the root directory of the project. - Add…
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.
...
🔧 Portfolio or no portfolio?
📈 19.8 Punkte
🔧 Programmierung
🔧 Add Tweets to Your React App using react-tweet
📈 18.66 Punkte
🔧 Programmierung