Get Your GitHub Images

Go to live site
diagram screenshot

Description

Objective 🎯

View the images present in a GitHub repo directory without having to click and view them one by one.

Motivation 💡

I love looking for cool new wallpapers for my desktop. There are a numerous GitHub repos that provide curated selections of wallpapers. However, upon reaching the repo/repo directory where the wallpapers are, I have to individually click on each of the files to view the wallpaper and THEN decide if I like it or not.

With "Get your GitHub Images" you can provide a GitHub directory link to the app, and it will display all the images present on that directory, saving you a few clicks.

Implementation

  1. Provide input field for user to provide GitHub repo directory URL. No domain other than GitHub's are accepted.
  2. Fetch info about the location provided, extract all valid image files' URLs. Allow-listed file extensions: .gif, .jpg, .jpeg, .png, .svg
  3. Fetch said URLs and extract raw asset URL
  4. With Next.js streaming and Next.js Image optimizations: fetch, load, and display the collected images in a grid