Debugging Playground

Explore a collection of real project bugs to sharpen your frontend bug-solving skills. Browse bugs of varying difficulty levels and technologies, and start honing your debugging prowess today!

intermediate

Form inputs do not update or display entered values

When entering data into the form fields (name, email, password) on the account creation form, the inputs do not display the typed values.

user experienceform handling
intermediate

Incorrect return type from form field validation logic

The form field validation logic, designed to validate fields using an array of validator functions, is returning a boolean value instead of an expected object type upon encountering a validation failure.

functionalitydata validation
beginner

Books Sorted by Author Instead of Title

When using the sortBooksByTitle function, users may notice that books are sorted by the author's name rather than by the title. This sorting behavior is contrary to typical expectations where the primary sorting criterion for books should be the title, followed by the author only if titles are identical.

functionalitydata handling
intermediate

Temperature fields do not update correspondingly

Users experience an issue where inputting a value into the Celsius field does not update the Fahrenheit field as expected. Similarly, when inputting a value into the Fahrenheit field, the Celsius field does not update accordingly.

functionalitystate management
intermediate

Character data not displaying in application

After launching the application, the expected character data does not display. Instead, the application remains on the initial loading state without showing any character information or error messages, indicating a potential issue with data handling or API integration.

API integrationData display
beginner

Application fails to render on startup

When attempting to launch the application, it fails to render and crashes immediately, displaying a generic error message, 'Something went wrong'. The console cites a specific error within the ThemeContext indicating a misuse of the context system.

Critical Rendering IssueContext API
beginner

Incorrect display of user names in user list

When viewing the list of users in the application, user IDs are displayed in place of user names. This results in confusion as the displayed identifier does not match user expectations. Additionally, a console warning regarding a missing 'key' prop suggests potential issues with list rendering performance and behavior.

UI misrepresentationReact key prop warning
beginner

Accordion does not toggle items on click

When clicking on an item in the accordion component, it does not toggle open/close as expected. The behavior should allow users to expand and collapse accordion items to view their content. However, due to a recent update or bug, clicking on the accordion item does not trigger the expected toggling action.

UI/UXFunctionality
beginner

Selected post details do not update when clicked

In the application, when a user selects a post from the list, the details of the selected post are expected to appear in the adjacent detail view. However, selecting a post does not update the display as expected, leaving the detail view either empty or stuck on a previous selection.

UI/UXFunctionality
intermediate

Premature submission triggered

In the questionnaire application, the submit action for answering a question is triggered prematurely when the user starts to hold down the submission button. Instead of waiting for the user to hold the button for the designated period, the system immediately processes the answer.

User InteractionEvent Handling
intermediate

Incorrect navigation lock behavior

In the book navigation application, the locking mechanism for books does not operate as intended. Users are able to navigate to books that should be locked based on their reading progress, and some books that should be accessible are incorrectly locked.

NavigationData Handling
intermediate

App crashes when searching for countries

When users attempt to search for specific countries using the search bar, the application crashes unexpectedly. This disrupts the user experience and prevents them from effectively using the search feature to find desired countries.

SearchData Handlingfuse.jsRest API
intermediate

Payment form does not display entered data

Users experience an issue where the data they enter into the payment form fields, such as card number, name, expiry date, and CVC, does not visibly update in the form.

FormsUser InterfaceUser Input
intermediate

Calorie Calculator form does not display error messages for empty fields

When users attempt to submit the Calorie Calculator form without filling in any of the required fields (Age, Weight, Height, Gender), the application fails to display error messages. This leads to confusion as users do not receive feedback on why the calculation doesn't proceed or what information is missing.

Form ValidationUser Experience
intermediate

Todo items lack names and incorrect pending count

When adding an item to the todo list, it appears without a name. Additionally, the count of pending items displayed below is incorrect.

functionalityuser interfacedata handling