DEV Community

Cover image for 🚀 Time Traveler: A Pinata-Integrated Time Capsule for Future Explorers
programORdie
programORdie

Posted on • Edited on

4 3 3 4 4

🚀 Time Traveler: A Pinata-Integrated Time Capsule for Future Explorers

This is a submission for the The Pinata Challenge

What I Built

I created Time Traveler, a web application that allows users to create digital time capsules.

Users can upload various types of files—images, audio, videos—into these capsules, which will remain locked until a specified future date.

This project integrates Pinata’s Files API to facilitate file uploads and storage on the IPFS network.

Key Features

  • Multi-file Upload 📁: Users can upload multiple file types into a single time capsule.
  • Custom Unlock Dates ⏳: Each capsule has a designated unlock date for future access.
  • Intuitive Dashboard 🖥️: A user-friendly interface to view, manage, and create time capsules.
  • Responsive Design: Works seamlessly on both mobile and desktop devices.
  • User Authentication: Secure login system to ensure privacy and control over user capsules.

Technology Used

  • Next.js ⚛️:: The entire application is built with Next.js, providing a full-stack solution for server-side rendering and API routes.
  • Pinata: Utilized Pinata’s Files API for decentralized file storage on IPFS.
  • MongoDB: Used for storing user data and metadata related to time capsules.
  • Tailwind CSS: For styling the application, ensuring a modern and responsive design.
  • shadcn: Leveraged for UI components, enhancing the overall user experience.

Demo

View the live demo here.

Landing page:
Landing page

New capsule creation form:
New capsule

Capsules list:
Dashboard

Capsule:
Capsule

File preview:
file preview

My Code 💻

Check out the source code for the project on GitHub:

GitHub logo programORdie2 / time-traveler

Time Traveler is a web application that allows users to create digital time capsules, enabling them to upload various types of files—images, audio, videos—and unlock them at a specified future date.

Time Traveler

Time Traveler is a web application that allows users to create digital time capsules, enabling them to upload various types of files—images, documents, videos—and unlock them at a specified future date. This project integrates Pinata’s Files API to facilitate secure file uploads and storage on the IPFS network.

Table of Contents

Key Features

  • Multi-file Upload: Upload multiple file types into a single time capsule.
  • Custom Unlock Dates: Set a designated unlock date for future access.
  • Intuitive Dashboard: A user-friendly interface to manage and create time capsules.
  • Responsive Design: Fully functional on both mobile and desktop devices.
  • User Authentication: Secure login system ensuring privacy and control over user capsules.

Technology Used

  • Next.js: Full-stack framework for server-side rendering and API routes.
  • Pinata: Decentralized file storage using the Pinata Files API and…

Installation

To run this project locally, follow these steps:

  • Clone the repository:
   git clone https://github.com/programORdie2/time-traveler.git
Enter fullscreen mode Exit fullscreen mode
  • Navigate to the project directory:
   cd time-traveler
Enter fullscreen mode Exit fullscreen mode
  • Install the dependencies:
   npm install
Enter fullscreen mode Exit fullscreen mode
  • Set up environment variables:
    • Rename the .env.local.sample to .env.local and fill it out with your data. The required values are:
# The secret key for verifying the integrity of signed cookies.
# Run "npx auth secret" to generate it.
AUTH_SECRET="YOUR_AUTH_SECRET"

# You probably don't want to change this, except if you changed the port. If you deploy this to Vercel, you can remove this line.
NEXTAUTH_URL="http://localhost:3000"

# Replace with your MongoDB connection string
DATABASE_URL="mongodb://localhost:27017/timecapsule"

# Replace with your Pinata details.
# See https://docs.pinata.cloud/quickstart#1-get-api-key-and-gateway-url
PINATA_JWT="YOUR_PINATA_JWT"
NEXT_PUBLIC_GATEWAY_URL="YOUR_GATEWAY_URL.mypinata.cloud"
Enter fullscreen mode Exit fullscreen mode
  • Start the development server:
   npm run dev
Enter fullscreen mode Exit fullscreen mode

More Details

Integration with Pinata 🔗:

  • File Uploads 📤: I utilized the Pinata API to allow users to upload files directly to IPFS.
  • Metadata Storage: The metadata for each time capsule is stored in a MongoDB database, with a reference to the files stored in Pinata.
  • Unlock Mechanism: The application checks the current date against the unlock date specified by the user, allowing access to files only when the time capsule is unlocked.

Thanks for reading! 🌟 Feel free to share your thoughts in the comments below!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (6)

Collapse
 
haasimniyas profile image
mohamed haasim niyas

Cheer up bro .... amazing it's an good api ...

Collapse
 
programordie profile image
programORdie

Thanks!

Collapse
 
aadii0408 profile image
Aaditya Champaneri

Amazing!

Collapse
 
programordie profile image
programORdie

Thank you!

Collapse
 
pinky057 profile image
ishrat

"Wow, that's an amazing piece of work!

Collapse
 
programordie profile image
programORdie

Thanks!

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay