...

/

Refactoring for UX and Generating Unit Tests

Refactoring for UX and Generating Unit Tests

Learn how to refactor an application for a better user experience and generate a complete unit test suite to validate the changes.

Our bug tracker is now functional and robust, but not very user-friendly. A big part of professional development is improving the UX so the app is faster and easier to use. We’ll refactor it to let users update bug status directly from the main page. After that, we’ll use Gemini to generate unit tests to confirm the refactor didn’t break anything and that the new feature works as expected.

Refactoring for an improved user experience

Our first goal is to eliminate the need for users to navigate to a separate “Edit” page just to change a bug’s status. This is crucial in evolving our tool from a simple proof-of-concept into a more professional and efficient application.

Press + to interact

Defining the UX problem and the new goal

Currently, updating a bug’s status is clunky. A user have to click “Edit,” wait for a new page, change the status from a drop-down, and then click “Save Changes” to get back to the main list. It’s a slow workflow that adds unnecessary friction.

We aim to refactor the application to allow this action directly on the main index.html page. We will replace the static text that displays a bug’s status with an interactive form, enabling users to update any bug with a single click and selection, dramatically improving the application’s usability.

Prompting for the full stack refactoring

This change is significant as it impacts our frontend templates and backend application logic. We will craft a single, detailed prompt that describes all the required modifications, trusting the agent to understand the context and apply the changes correctly across both files.

Prompt: Let’s refactor the application to improve the user experience ...