Renamer
A client-side React app that generates file-renaming scripts from visual transformations.
- graham makes · Seattle, WA
- Title
- Renamer
- Edited
- January 7, 2026
- Tags
- case-study, react, tools
- Live site
- renamer.netlify.com
- 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
awkfor 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
| Technology | Purpose |
|---|---|
| React | UI framework |
| Flux pattern | State management |
| awk | Bash string transformations |
| PowerShell | Windows script generation |
| Netlify | Hosting |