This is a submission for the The Pinata Challenge

What I Built

Free Image Hosting is a web application that allows users to temporarily store and share image files. It utilizes Pinata for storage and retrieval, enabling optimized image retrieval. MongoDB is used to store image properties and URLs.

Demo

Website : Live

Website Overview

Configure Image

Get Temporary Url

Getting Image by temporary Url

Url Expired/Image Not Found/Url Not Found

My Code

anshulnegitc / fimh

Free Image Hosting

Store and share file with temporary url.

A Next.js-based application that uses Pinata to store image files and MongoDB to store data. Images can be configured with different properties for optimization. Documents are deleted using a TTL index in MongoDB, and triggers-functions in MongoDB remove the corresponding files from Pinata

🚀 Features

• Seamless Image Upload: File API to upload image.
• Signed Url: Signed Url to access image for limited amount of time.
• Optimized Performance: Leverages Pinata's Image Opimization for fast content delivery and enhanced user experience.

📂 Tech Stack

• Frontend: React, Next.js
• Backend: Next.js, Pinata API, MongoDb
• Styling: Bootstrap
• Hosting: Vercel

⚙️ Setup & Installation

1. Clone the Repository

   git clone https://github.com/anshulnegitc/fimh.git
   cd fimh
2. Install Dependencies::

   npm install
3. Environment Variables: Set up environment variables for Pinata API keys in a .env.local file(Place .env.local inside fimh folder):

   NEXT_PUBLIC_PINATA_JWT=your_api_key
   NEXT_PUBLIC_GATEWAY_URL=your_secret_key
   NEXT_PUBLIC_DATABASE_URL=your_mongo_connection_url
4. …

View on GitHub

More Details

Pinata Files API is used to upload the image.
Pinata Signed URL is used to access the image for a limited amount of time.
Pinata Image Optimizations can be set to improve the load time and experience when viewing image content.

For project setup and other configuration Github