DEV Community

Cover image for Image hosting service built with Next.js, Supabase, and TailwindCSS. πŸ“Έβš‘οΈπŸ“
L.L.
L.L.

Posted on β€’ Edited on

9 3

Image hosting service built with Next.js, Supabase, and TailwindCSS. πŸ“Έβš‘οΈπŸ“

A lot of folks are talking about Supabase. Also,Next.js seems to be trending right now, and I never tried them. πŸ˜›

So, one of the projects that I had in mind for a while was the perfect fit to apply these two together. πŸ€“

After spending approx. 12 hours, I finished the v1 for gpic - Free Image Optimizer & Hosting Service.

Built with:

  • Next.js
  • Supabase (DB and Storage)
  • TailwindCSS

Quick Demo:

The Motivation

Well, I love communities with markdown available (DEV, Reddit, Indiehackers,...), but that means that I need to...

  1. Go to https://imgbb.com/
  2. Select/Drag'n'drop the image -> Hit Upload
  3. Grab the code
  4. Insert in the markdown

...in order to add an image to my post.

That was my biggest motivation! I just wanted something clean and with an option to copy the link with the markdown.

Hope you find useful, and if you have any feedback, let me know. I'm already working on v2. πŸ€ͺ

Image Description
(Image hosted on gpic)πŸ₯³

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (3)

Collapse
 
husseinkizz profile image
Hussein Kizz β€’

Hey awesome project, it made me think, but am struggling to show my images in next js from supabase storage, how did you get the url to put for Image src? Thanks!

Collapse
 
muracevic profile image
Emir Muracevic β€’

You just need to make your bucket "Public" and you'll be good to go.

Collapse
 
husseinkizz profile image
Hussein Kizz β€’

Yes did that though I didn't want it to be, but it worked now am just facing fileReader and URL.createObject issues, I can't get the result outside the event handler function!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more