Prompt Engineering for Debugging and Error Resolution

Imagine you’re part of a small front-end team working on a food ordering app built with React. The app just passed through a sprint and was pushed to GitHub for testing. Everything looks fine, until your QA team flags a critical usability bug.

The QA team has raised a GitHub issue noting that users can place an order even when their cart is empty. If left unresolved, this not only creates a poor user experience but could also cause back-end inconsistencies. They’ve also added an issue file to the repository to document the problem. As the assigned developer, your task is to triage the bug, identify the root cause, and deliver a clean, timely fix.

Clone the repository and examine the bug

Before you can resolve a bug, you need to get the project running locally in VS Code and understand what went wrong. In this step, you’ll clone the food ordering app repo that simulates a real-world bug reported by the QA team.

Start by cloning the following GitHub repository into your local machine:

Click the terminal to clone the app and explore the directory:

This repo includes a fully functional React-based food ordering app, along with an issue file pushed by the QA team that highlights a specific bug related to order placement.

💡 If you’re using GitHub Codespaces or an online IDE, you can paste the repo link into the platform to clone and open it instantly.

Locate the QA issue report

Inside the root of the project, you’ll find a markdown file titled: