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:

New capsule creation form:

Capsules list:

Capsule:

File preview:

My Code 💻

Check out the source code for the project on GitHub:

Installation

To run this project locally, follow these steps:

• Clone the repository:

   git clone https://github.com/programORdie2/time-traveler.git

• Navigate to the project directory:

   cd time-traveler

• Install the dependencies:

   npm install

• 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"

• Start the development server:

   npm run dev

• Open your browser and go to http://localhost:3000 to view the application.

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!