How do I avoid the next developer reading my code swearing at me

Abstract

Reading, understanding, and refactoring a TypeScript+React application can be challenging, even if it’s small. I will tell you my story of when I jumped on the codebase of a small product to implement some last-minute changes before going live. I had an overall idea of what the product does, and the external team that worked on it received comprehensive documentation of our coding patterns and thorough code reviews. Despite that, being effective since the first day was hard for me. Why? Because four of the most important details that make a codebase immediately readable were missing, which are:

• – TypeScript’ Discriminated Unions instead of optional properties (helpful to describe the domain)
• – Straightforward JSX code (ease reading and jumping through the code)
• – Explicit State Machines (describe what the app does from an internal perspective)
• – Cypress integration tests (tell what the app does from an external perspective)

Apart from a long series of best practices, the listed ones are the most used in WorkWave RouteManager, a 250k-LOC front-end application.