Simple and browser-scoped IPFS file browser leveraging Pinata Cloud SDK

This is a submission for the The Pinata Challenge

What I Built

Simple and browser-scoped IPFS file browser leveraging Pinata Cloud SDK in which the user can upload, download, preview, and delete files using Pinata Cloud SDK. I built this web app for participating in the contest only and I've used some of my knowledge gained from other projects I've made.

Demo

Desktop

https://github.com/leiniercs/pinata_file_browser/raw/refs/heads/main/demos/demo_desktop.mp4

Mobile

https://github.com/leiniercs/pinata_file_browser/raw/refs/heads/main/demos/demo_mobile.mp4

My Code

The code is publicly available on my Github account and ready to clone, build and started.

leiniercs / pinata_file_browser

Web app created for a contest in Dev Community (https://dev.to/challenges/pinata)

Simple and browser-scoped IPFS file browser

Web app created for a contest in Dev Community.

With this web application the user can upload, download, preview, and delete files using Pinata Cloud SDK. I built this web app for participating in the contest only and I've used some of my knowledge gained from other projects I've made.

What's under the hood

• NodeJS - https://www.nodejs.org
• Typescript - https://www.typescriptlang.org/
• ReactJS - https://www.react.dev/
• NextJS - https://www.nextjs.org/
• TailwindCSS - https://www.tailwindcss.com/
• Next-Intl - https://next-intl-docs.vercel.app/
• Next-Themes - https://www.github.com/pacocoursey/next-themes
• NextUI - https://www.nextui.org/
• ReactIcons - https://react-icons.github.io/react-icons/
• PinataSDK - https://www.pinata.cloud

Techniques used

• 'Content-Security-Policy' to secure the application against hijack and code injection
• Components and functions reused as much as possible across the application
• Optimized global state manager
• Visualization of optimized image thumbnails from Pinata Cloud
• Audio and video playback in the file details dialog
• Translations for the 10 most spoken languages
• Detection of the user's browser language
• Dark/Light themes
• …

View on GitHub

More Details

What's under the hood

• NodeJS - https://www.nodejs.org
• Typescript - https://www.typescriptlang.org/
• ReactJS - https://www.react.dev/
• NextJS - https://www.nextjs.org/
• TailwindCSS - https://www.tailwindcss.com/
• Next-Intl - https://next-intl-docs.vercel.app/
• Next-Themes - https://www.github.com/pacocoursey/next-themes
• NextUI - https://www.nextui.org/
• ReactIcons - https://react-icons.github.io/react-icons/
• PinataSDK - https://www.pinata.cloud

Techniques used

• 'Content-Security-Policy' to secure the application against hijack and code injection
• Components and functions reused as much as possible across the application
• Optimized global state manager
• Visualization of optimized image thumbnails from Pinata Cloud
• Audio and video playback in the file details dialog
• Translations for the 10 most spoken languages
• Detection of the user's browser language
• Dark/Light themes
• Drag and drop support
• Responsive design (desktop, tables and mobile)

How I used Pinata Cloud SDK?

• Creating temporary API keys
• Deleting the temporary API key once it was used
• Upload the files
• Deleting the files
• Get the signed URL of a CID to download it
• Get the signed URL of a CID related to an image to visualize it in the web browser in an optimized resolution

Team Submissions

I worked alone.