Lädt...


🔧 Break-Time: Digital Time Capsules with Pinata


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

This is a submission for the The Pinata Challenge

Quick Links

What I Built

A lot of our footprint we leave in this world are increasingly becoming digital. I won't argue whether that's a bad or good thing, but I will say that our footprint, our memories, that we leave is important regardless if it's digital or physical.

That's why I decided to build Break Time. Break Time is a web app where you can make digital time capsules, store your digital memories, and then open them at a later date to look back on those fond memories so they aren't lost.

I call the time capsules Pinatas, named after the service used to make this app happen (Pinata). But I also decided with this term because it's apt for what it represents, a container with valuables and goodies (memories) inside which you can access by opening said container.

Example Usage

Here I'll give a quick overview of how you would use this app (I'll go into detail in a later section).

Let's say your best friend, John, and your other best friend, Jill, is about to get married in a few weeks. You get the great idea to start storing memories of the upcoming marriage ceremony up to their 5th anniversary (you're confident they love each other deeply and will last forever).

You start thinking of creating a time capsule to store those memories and then let them open it at the start of their 5th anniversary to look back on their fond memories.

However, you realize that even now most of your memories with them are digital (videos, photos, PDFs, SVGs, etc.). And you suspect it will be the same case with their marriage, considering it's 2024.

So you decide to use Break Time. You create an account, encourage your circle of friends, including Jill and John themselves to create their own accounts. You invite them to be your friends in the app.

Then, you create a Pinata (Time Capsule). You name it "John and Jill's 5th Anniversary", you create some description, such as "Hi friends! 🌸 Let’s celebrate the love John and Jill will have built over the next five years by capturing memories, well-wishes, and hopes for their future. When we unlock this capsule later, we’ll look back, laugh, and cherish how far they’ve come. Leave your messages, photos, or videos and help make this anniversary truly unforgettable!". You might even add a little thumbnail of their first date.

Next you decide who should be able to contribute to this Pinata (Time Capsule). You include all your friends to be contributors. And you set John and Jill as the sole openers of the Pinata, so only they can decide to open it. You set the minimum time to the next five years, so you force yourselves, including John and Jill, to wait and not spoil the memories before the 5th anniversary.

And then finally, after five years, after you've built up a mountain of memories, you can finally ask John and Jill to open the Pinata. Then you'll be able to download and look back on all those memories with a smile.

Other Usages

Of course the timeline doesn't necessarily have to span 5 years. You can even create Pinatas to store memories of a 1-week camping trip. It's up to you!

Demo

Video


Demo Video on YouTube

Application Flow

Home Page

Image description

Authentication Pages

Image description

Image description

Dashboard

Image description

This is where most of your data will be listed. On the top you'll see the Pinatas you've created. On the bottom right, you'll see a list of users you've added as friends. In the same place, there's also a form where you can add users as your friends by their usernames.

On the bottom left, you'll see a list of Pinatas in which others have created but involves you somehow, either you've been added as a contributor, an opener, or both.

Create Pinata

Image description

Here's where you create your Pinata. You can set its title, description, and thumbnail picture.

You can also set who can contribute to the Pinata once it has been created, as well as limit when invited users can contribute to the Pinata. You can set when allowed contributors can start contributing as well as when the Pinata will stop accepting contributions.

Then, you can set attributes related to opening the Pinata. You can set a minimum open time, which will mark the earliest date and time the Pinata can be opened. You can also set who will be required to open this Pinata. You can also omit one of these values. For example, you can set a minimum open time and omit the "openers", this way, Pinatas will open automatically when the time comes. Or you can only include allowed "openers"; this way, the Pinata will open once all the openers have opened the Pinata. Or you can combine include both these values so "openers" can only open the Pinata after the set date time.

You can exclude yourself from contributing or opening.

Viewing Pinata

Unopened Pinata

Image description

This is what you'll see when you click on an unopened Pinata. You'll see it's details. This is also where you'll contribute your digital memories/files to the Pinata (if you're part of the contributors).

You won't be able to view the files you've contributed in this state (you have to open it).

You'll also open the Pinata in this view. It's in real time so when all users open the Pinata, or the it's just time for the Pinata to open, you'll see the Pinata in the open state. See below.

Open Pinata

Image description

This is the Pinata in the open state. You can no longer contribute files, but now you'll be able to see all those memories you've created and uploaded.

Profile Page

Image description

My Code

The full code can be found on my Github

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

More Details

Tech Stack

Next.js

I'm using Ol' Reliable Next.js as my front end as well as to create a few secure route handlers for handling file upload on the client side, as recommended by Pinata.

// getting a one time use key to use in the front end
 export async function GET() {
  try {
    const uuid = crypto.randomUUID();
    const keyData = await pinata.keys.create({
      keyName: uuid.toString(),
      permissions: {
        endpoints: {
          pinning: {
            pinFileToIPFS: true,
          },
        },
      },
      maxUses: 1,
    });
    return NextResponse.json(keyData, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
}

I would call this each time I want to upload a file, because Next.js limits on how big a file you can send on the server.

Similarly, I would call another route handler to get a secure URL for a certain file:

export async function POST(req: NextRequest) {
  try {
    const data = await req.json();
    const url = await pinata.gateways.createSignedURL({
      cid: data.cid,
      expires: 30,
    });
    return NextResponse.json(url, { status: 200 });
  } catch (error) {
    console.log(error);
    return NextResponse.json(
      { text: "Error creating API Key:" },
      { status: 500 }
    );
  }
} 

Appwrite

I needed authentication as well as a place to store some metadata for the files, so I used Appwrite's authentication and database in conjunction with Pinata, so I can store extra details to files uploaded to Pinata, such as file names, cid, etc.

So I would fetch a file metadata in Appwrite (in this case, it would be a contribution for a Pinata), then I would use the resulting metadata to retrieve a file from Pinata by its CID.

const openFile = async (contribution: Contribution) => {
    // getFileURL calls the route handler that returns a signed URL for a particular file by its CID
    const fileURL = (await getFileUrl(contribution.cid)) as string;

    window.open(fileURL, "_blank");
  };

How Pinata was Used

Pinata (the service) was used for this app's main file storage. It stores a Pinata's (the time capsule) thumbnail, a user's profile picture, and, most importantly, digital contributions for the Pinata.

Here's a simplified version of how I implemented Pinata to upload/replace a user's profile picture:

// gets set on the onChange prop of an input element of type "file"
const handlePictureChange: React.ChangeEventHandler<
    HTMLInputElement
  > = async (e) => {
    if (file) {
      // get the one time key
      const keyRequest = await fetch("/api/key");
      const keyData = await keyRequest.json();

      // upload to pinata
      const upload = await pinata.upload.file(file).key(keyData.JWT);

      // delete the original profile picture (replace) by its file id
      if (user.profile.profilePictureFileId) {
        const delRes = await fetch("/api/delete-files", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            fileIds: currentUser.profile.profilePictureFileId,
          }),
        });
      }

      // update metadata on appwrite
      await databases.updateDocument(
        config.dbId,
        config.userProfileCollectionId,
        currentUser.profile.$id,
        {
          profilePictureFileId: upload.id,
          profilePictureCid: upload.cid,
        }
      );
    }
  };

Similar flow was used to upload file contributions as well as uploading Pinata thumbnails.

...

🔧 The Pinata Challenge: Pinata File Hub - Seamless File Management & Uploads


📈 40.84 Punkte
🔧 Programmierung

🔧 Pinata CLI: A CLI Application for the Pinata.Cloud Files Interface


📈 40.84 Punkte
🔧 Programmierung

🔧 Pinata OG! | Generate beautiful OpenGraph Images with Pinata File API


📈 40.84 Punkte
🔧 Programmierung

🔧 Pinata OG! | Generate beautiful OpenGraph Images with Pinata File API


📈 40.84 Punkte
🔧 Programmierung

🔧 Genith: Create Images and Videos with AI, Store with Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 A decentralized file storage system using PINATA and IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 Effortless Image Tag Generation: Streamline Your Workflow with Pinata and IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 A decentralized file storage system using PINATA and IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 ImagePro: Streamlining Figma Exports with Pinata Cloud Integration 🚀


📈 20.42 Punkte
🔧 Programmierung

🔧 Image generation with DALL-E and Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 File Upload with Pinata’s Files API


📈 20.42 Punkte
🔧 Programmierung

🔧 Integrating Pinata for Seamless Image Uploads in Nfticket


📈 20.42 Punkte
🔧 Programmierung

🔧 Building a Chat with PDFs using Pinata,OpenAI,, and Streamlit


📈 20.42 Punkte
🔧 Programmierung

🔧 Pinata Food Recipe Collaborator


📈 20.42 Punkte
🔧 Programmierung

🔧 Detective Simulator - Powered by pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 Pinata Food Recipe Collaborator


📈 20.42 Punkte
🔧 Programmierung

🔧 Haiku Harmony: Crafting Poetry in the Cloud with Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 Created a dApp storing data on Pinata - IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 FileShare| A FileSharing Platform built using Next.js and Pinata Files API


📈 20.42 Punkte
🔧 Programmierung

🔧 PinFu: A Dual-Purpose Application for Effortless File Uploads to Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 Image Annotation for AI Model training using Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 Building a Secure Anonymous Feedback System with Django, Twilio, and Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 PinataShot: Multimodal LLaMA 3.2 Screenshot Categorization on Pinata IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 Mintr - Open NFT tools with Pinata upload


📈 20.42 Punkte
🔧 Programmierung

🔧 Create Solana Tokens Metadata Easily with Pinata


📈 20.42 Punkte
🔧 Programmierung

🔧 Introducing PinataNET: A Simple C# Wrapper for the Pinata API


📈 20.42 Punkte
🔧 Programmierung

🔧 Join us for The Pinata Challenge: $3,000 in Prizes!


📈 20.42 Punkte
🔧 Programmierung

🔧 SnipShot: A Stylish Code Snippet Uploader Using Pinata IPFS


📈 20.42 Punkte
🔧 Programmierung

🔧 Congrats to The Pinata Challenge Winners!


📈 20.42 Punkte
🔧 Programmierung

🐧 Horticular is a beautifully relaxing garden-restoring game inspired by Viva Pinata


📈 20.42 Punkte
🐧 Linux Tipps

🔧 Laveraging Pinata API to upload files


📈 20.42 Punkte
🔧 Programmierung

🔧 MySQL&PostgreSQL UI client for testing and querying databases with the query+result uploaded to Pinata


📈 20.42 Punkte
🔧 Programmierung

📰 Emily Flitter Introduces Us to the High-Net-Worth Piñata


📈 20.42 Punkte
📰 IT Security Nachrichten

🔧 pinata-whiteBoard


📈 20.42 Punkte
🔧 Programmierung

🔧 Pinata Filesystem and PinDrop


📈 20.42 Punkte
🔧 Programmierung

matomo