WRITEUPCHECKEDJAN 2020BYG.B.

Renamer

A client-side React app that generates file-renaming scripts from visual transformations.

Renamer application interface
graham makes · Seattle, WA
Title
Renamer
Edited
January 7, 2026
Tags
case-study, react, tools
Product
Renamer

Overview

Renamer solves a common developer pain point: renaming groups of files that are too many to do by hand but too few to justify writing a custom script. It generates both Bash and PowerShell scripts from a series of visual transformations.

The Challenge

My work as a music producer frequently involves projects where I’m one of many stakeholders in the production process. This leads to exported audio files that need consistent naming - but DAW export naming systems are limited, and spotting a typo after clicking export means waiting for dozens of incorrectly-named files.

Technical Approach

Architecture Decisions

Renamer is a fully client-side React app. Many of its string transformations are state-dependent, so it has a top-level state that computes all the desired transformations and passes them to display components.

It was tempting to offload complexity to a library like Redux, but since the scope of the problem and the app are both constrained, I opted for Flux-like state management without a library.

Shell Script Generation

The generated shell scripts are composed by stringing together atomic transform commands:

  • Bash: Uses awk for transformations
  • PowerShell: Uses built-in cmdlets

I initially used sed for Bash and regular DOS for Windows, but switched when implementing more complex multipart transformations like ‘replace all’.

Development Infrastructure

This was my first time using create-react-app instead of rolling my own starter package. The sane default Webpack config alone probably saved hours, and the development/testing infrastructure is excellent.

Key Takeaways

  • A single top-level state object can get unwieldy when passing props through multiple levels, but it solves the issue of needing certain state changes to trigger other state changes
  • Create-react-app does a great job abstracting away framework/build chain cruft
  • PowerShell cmdlets are leagues ahead of regular DOS commands - the official Microsoft documentation is clear and helpful

Tech Stack

TechnologyPurpose
ReactUI framework
Flux patternState management
awkBash string transformations
PowerShellWindows script generation
NetlifyHosting