This is a submission for the The Pinata Challenge

What we Built

We created StashIt, a game assets storage web app that leverages the power of Next.js, TailwindCSS, and Pinata. It securely stores various game assets, such as images, audio, video, and 3D models, over the IPFS network. Each file is uniquely identified by its CID, provided by Pinata, ensuring no duplicate assets. The platform also includes AI-powered features to generate character lore using OpenRouter API. Additionally, users can add metadata to their files for enhanced asset management.

Demo

Access the live deployment of the project here!

Landing Page

My Projects Dashboard

Explore Assets

File Preview

AI Character Lore Generator

Auth Page

Single File Upload

Key Pinata Features

1. IPFS Storage:

   • We utilized Pinata's IPFS service to securely store and retrieve game assets. The files uploaded to Pinata are decentralized, providing durability and reliability in asset storage.

   for (const [key, value] of formData.entries()) {
   if (key.startsWith("file") && value instanceof File) {
     try {
       const upload = await pinata.upload
         .file(value)
         .group(groupId)
         .addMetadata({
           name: name,
           keyValues: {
             description: description ? description : "",
           },
         });
       successCount++;
     } catch (error) {
       console.error(`Error uploading file ${key}:`, error);
       errors.push(`Failed to upload ${value.name}`);
     }
   }
   }
   

2. Unique CID Management:

   • Each uploaded asset is assigned a unique Content Identifier (CID) by Pinata, which allows for efficient tracking and prevents duplicate uploads. This feature is crucial for maintaining an organized library of game assets.

3. Metadata Management:

   • Users can attach metadata to their assets through Pinata, allowing for better categorization and searchability of game files. This feature enables users to manage their assets more effectively by providing additional context and information about each asset.

4. Group Management:

   • Users can create and manage groups, allowing them to collaborate on projects with team members. This feature fosters teamwork by enabling users to share and organize assets collectively within a group.

5. Pinning and Unpinning Files:

   • Users have the ability to pin and unpin files in their asset library. Pinning files ensures that they remain available on the IPFS network, while unpinning allows users to remove files they no longer need, optimizing storage and management.

6. Pinning AI-Generated Content:

   • AI-generated text will be pinned in the form of a text file associated with the selected project or group.

7. Pinata Pagination:

   • The Pinata pagination feature allows users to easily manage large collections of files by organizing them into pages, improving the user experience when browsing and retrieving assets.

   const response = await pinata
     .listFiles()
     .group(groupId)
     .pageLimit(itemsPerPage + 1) // Request 11 items
     .pageOffset(page * itemsPerPage); // Correct offset when page starts at 0
   

8. Seamless Integration:

   • The integration of Pinata with our Next.js application was straightforward. The Pinata API allowed us to implement functionalities such as file uploads, retrieval, and metadata attachment with minimal overhead.

9. User Authentication:

   • Using Auth.js for OAuth, we ensured that users can securely log in and manage their assets, providing a personalized experience while interacting with the Pinata features.

Source Code

View the project code in the repository

More Details

StashIt showcases the potential of using Pinata in web applications aimed at managing digital assets. By leveraging Pinata's robust IPFS capabilities, we ensured that our users could securely upload, manage, and share their game assets without the worry of loss or duplication. The use of metadata allows for a more organized approach to asset management, making it easier for users to find and utilize their stored assets effectively.

Additional Features

• AI Character Lore Generation: Users can create unique character lore and storylines using the OpenRouter API, enhancing their game development experience.
• OAuth with Auth.js: We implemented OAuth functionality using Auth.js, allowing users to log in via third-party services such as Google or GitHub, adding an extra layer of security and ease of use in managing their assets.
• Pinning AI-generated Content: Users can pin AI-generated images to selected projects or groups, while AI-generated text will be pinned in the form of a text file associated with the selected project or group.

Team Submissions:

This is a submission by a team of 2 members.

• @shivamsharma1
• @sidjs