It's a Great Time To be a Software Developer Today

I was stuck in a bus ride from London to Birmingham today, so I thought I'd build an app I have been wanting to build for myself. It's something that I could use to view my screenshots folder and play it like it was a video, much like what Timesnapper does.

I only had a couple of hours, so I know there is no chance in hell, despite what my ego tells me, that I could complete a somewhat feature-rich app in a very short time. No sir. Composing the readme file alone would probably set me back maybe 25 minutes, if I am being honest.

Enter vibe coding. If you haven't heard, it's when you tell A.I. to write the code for you. It's gotten so good these days, and these 'agentic' tools have arrived in Visual Studio, taking the barrier to entry to vibe coding to its lowest.

The Prompt

The new AI models generate good code but only if you provide the correct context and instructions. Most of the time, these instructions could be compared to a "business requirement" if you will. For my screenshots player app, here is the prompt that you could use:

Create a modern, single-page web application called "Screenshot Timeline Player" that allows users to load a folder of images (such as screenshots) and view them as a chronological timeline. The app should be visually appealing, responsive, and easy to use, with a clean, modern UI.

**Core Features:**

* Allow the user to select a local folder containing images (PNG, JPG, JPEG, GIF, BMP, WEBP).
* Display the images in chronological order based on their creation or modification date.
* Show a main image viewer area for the currently selected image.
* Provide playback controls: play/pause (auto-advance through images), next/previous, first/last image.
* Include a speed control slider to adjust playback speed (0.5x to 5x).
* Show a horizontal thumbnail strip for quick navigation and selection.
* Support multi-selection of thumbnails (with Ctrl/Cmd and Shift) and a button to delete selected images from the timeline.
* Display a timeline progress bar and time labels indicating the position of the current image in the sequence.
* Implement keyboard shortcuts: Space (play/pause), Left/Right arrows (previous/next image).
* Show status messages (e.g., number of images loaded, no folder selected, etc.).

**Design/Layout:**

* Use a visually appealing, dark-themed color palette with gradients and soft backgrounds.
* Layout should be responsive and work well on both desktop and mobile.
* Main sections: header/title, main image viewer, thumbnail strip, playback/timeline controls.
* Use rounded corners, subtle shadows, and smooth transitions for UI elements.
* Place controls and status indicators in a card or toolbar below the main image.
* Timeline progress bar and time labels should be visually integrated with the controls.

**Technical Requirements:**

* Use only client-side web technologies (HTML, CSS, JavaScript).
* No backend or server required.
* Use modern browser APIs (such as File System Access API or input type="file" with webkitdirectory) to load images from the user's local filesystem.
* Sort images by their last modified date.
* Use BeerCSS for styling

**Accessibility & Usability:**

* All controls should be accessible via keyboard.
* Provide clear visual feedback for selected and active images.
* Show helpful tooltips or labels for all buttons and controls.

**Bonus:**

* If possible, allow drag-and-drop folder selection.
* Make the timeline labels adapt to the number of images and available space

Copy that and paste it in your AI chat window, for example in Jetbrains Rider:

It will probably generate a different result every time you run it, much more if you run it in a different AI model. But the good thing is, with agentic AI, you can tweak the generated code as much as you want by just describing what changes you want. This reminded me of this LinkedIn post:

Checkout the final product here: https://git.jfaquinojr.com/jokab/ScreenshotPlayer

Pretty sweet innit?