Skip to content
workflows.diy
All writing

Gemini built an image reorder app in under an hour

The Image Reorder & Renumber app (ImageSortAndSave.com) was built by Google Gemini. It runs in the browser, lets you reorder and renumber images, and downloads the set as a ZIP.

Reordering image files by hand, and renaming them one by one so they sort correctly (01_image.jpg, 02_another.png, and so on), is slow and error-prone.

The Image Reorder & Renumber app does it in the browser. I built it from scratch with Google Gemini, which wrote almost all of it.

The Image Reorder & Renumber app with three photos in a preview carousel, five thumbnails in the reorder grid, buttons to renumber, save and download a ZIP, and the new filename mapping
The app after reordering five photos, with the old and new filenames listed at the bottom.

The problem it solves

The core need is simple.

  • Arrange a collection of uploaded images into a specific sequence.
  • Assign new sequential filenames (e.g., "0.name.jpg", "1.name.jpg") that match the order.
  • Download the renumbered images for use elsewhere.

The Image Reorder & Renumber app handles all three steps in the browser.

Core features

  • Multi-image upload lets you add all the images you need to organize.
  • A drag-and-drop grid lets you drag images around to set the order.
  • A synced preview carousel at the top mirrors the order of the main grid, so you can see the sequence as you build it.
  • Clicking any image opens it in a full-size modal viewer with previous and next navigation.
  • A click on "Renumber Images" updates all filenames with a "0.", "1.", "2." prefix. The app shows a mapping of old to new names.
  • Downloads come in two options:
    • Save individually, for up to 10 images. For smaller sets, you download each renumbered image directly. A limit of 10 makes sense given browser behavior.
    • Download all as ZIP, for any number of renumbered images. The app packages them into one "renumbered_images.zip" file with client-side zipping by JSZip. A Zipping... overlay shows that the zip is running.
  • The layout uses Tailwind CSS and adjusts to different screen sizes.

The AI-first build process

This app is a practical example of AI-first development. Google Gemini was the primary coder across our long chat sessions, which led to the app at ImageSortAndSave.com. My role was architect, project manager and QA lead. The whole build took about 60 minutes.

  1. I outlined each feature in turn. We started with upload, then the grid, drag-and-drop, the carousel, renumbering, individual downloads, and finally the ZIP feature and UI refinements.
  2. I set the technical direction: vanilla JavaScript for simplicity and direct browser execution, Tailwind CSS for styling, and JSZip for archiving. I also guided the overall single-page structure.
  3. Gemini generated the complete HTML structure, the CSS (Tailwind classes and custom style blocks) and all the JavaScript for event handling, DOM manipulation, state management and algorithms such as renumbering and the JSZip integration.
  4. After Gemini provided code for a feature, I tested it, reported bugs or changes, and Gemini returned revised code. That tight feedback loop was essential. Getting drag-and-drop right, keeping the carousel in sync and handling button disabled states took several rounds.

The console logging we added helped me follow the AI's execution flow and debug issues together.

Key technical challenges

  • The HTML5 drag-and-drop feels intuitive and reorders both the DOM and the underlying data.
  • The preview carousel always matches the live order of the draggable grid.
  • JSZip collects every image's Data URL into one ZIP file. The app shows feedback during zipping, which can block the page.
  • Download buttons enable or disable based on upload and renumbering status. The "Save Individually" option is limited by image count.
  • The action buttons switch from a column to a row on larger screens, using Tailwind's responsive prefixes.

Why AI-first works for utility apps

For focused utility apps like this one, the AI-first method has clear advantages.

  • Rapid development. Features can be built and iterated at a pace that would be hard for a solo developer.
  • Easier creation. People who can define requirements clearly can build tools, even when their line-by-line coding in a stack is still developing. The human handles the what and why, and the AI handles the how.
  • More time on user value. With the AI handling most of the implementation, the person orchestrating can focus on the user experience and on whether the tool solves the core problem.

Try it out

Visit ImageSortAndSave.com and try the Image Reorder & Renumber app yourself.