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
- …
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.
Top comments (0)