DEV Community

Cover image for Free Image Hosting
Anshul Negi
Anshul Negi

Posted on

Free Image Hosting

#devchallenge #pinatachallenge #webdev #api

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

Homepage

Configure Image

Edit Image Configuration

Get Temporary Url

Temporary Url

Getting Image by temporary Url

Image Preview

Url Expired/Image Not Found/Url Not Found

Url not found

My Code

GitHub logo 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
    Enter fullscreen mode Exit fullscreen mode
  2. Install Dependencies:: 
    npm install
    Enter fullscreen mode Exit fullscreen mode
  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
    Enter fullscreen mode Exit fullscreen mode
  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

Top comments (0)

Read next

pmbanugo profile image

We Ditched Kubernetes! Here's Why & What We're Using Now

Peter Mbanugo -

jdgamble555 profile image

Async Fetching in Svelte 5

Jonathan Gamble -

kasir-barati profile image

Module declaration in TS

Mohammad Jawad (Kasir) Barati -

joacod profile image

💜 The Special Meaning Behind the New CSS Logo #rebeccapurple

Joaquin Diaz -