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
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
-
Clone the Repository
git clone https://github.com/anshulnegitc/fimh.git cd fimh -
Install Dependencies::
npm install
-
Environment Variables: Set up environment variables for Pinata API keys in a
.env.localfile(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
- …
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
Top comments (0)