Maintenance: replace dead Breaking Bad API with TVmaze, fix error handling & a11y by fadyehabamer · Pull Request #1 · fadyehabamer/BreakingBad-API

fadyehabamer · 2026-09-24T11:24:16Z

The app is completely broken in production: breakingbadapi.com no longer exists (DNS lookup fails), so the page shows "Loading..." forever and throws an unhandled rejection. This PR moves the app to the TVmaze API and fixes several robustness and accessibility issues.

Changes

Data source: load the Breaking Bad cast from TVmaze (https://api.tvmaze.com/shows/169/cast), which is free, needs no key and allows CORS, then filter it locally by character or actor name.
- TVmaze has no nickname, status or occupation fields, so each card now shows the character, the actor and the actor's birthday. This also fixes a bug where the Name and Actor labels were swapped.
- Cards are built with textContent instead of interpolating API data into innerHTML, which removes an injection path.
Show an error message when loading fails instead of an endless spinner.
Search filters as you type (it used to run only on blur/Enter) and shows "No characters found." when nothing matches. Typing while the data is still loading no longer overwrites the loading or error message.
Audio: audio.play() on load is blocked by browsers without a user gesture, which caused an unhandled rejection. When autoplay was allowed, there was no way to stop the music (WCAG 1.4.2). The rejection is now caught, and a Play/Pause button with aria-pressed was added.
Accessibility: alt text on the logo, a visually hidden <label> for the search box, an empty alt on the decorative loader, and focusable cards that reveal their details on :focus (before, details appeared only on hover, so keyboard and touch users couldn't see them).
Replace the "BB API" title with a descriptive one and add a meta description.
Credit TVmaze with a link back, as its CC BY-SA license requires.
README: data source, how to run locally, and features.

Verification (static only, no browser)

node --check main.js passes. index.html parses with balanced tags, and every local asset it references (in HTML, JS and CSS) exists.
I checked the endpoints with curl. breakingbadapi.com fails with Could not resolve host. api.tvmaze.com/shows/169/cast returns 200 with 11 cast entries and access-control-allow-origin: *. The Bootstrap CDN URL returns 200.
I ran main.js against index.html in jsdom with the real TVmaze API and a stubbed Audio:
- It renders 11 cards (e.g. "Walter White / Bryan Cranston / 1956-03-07").
- Searching "cranston" gives 1 result, "zzz" shows "No characters found.", and clearing the search gives 11 again.
- A failed fetch shows the error message.
- Blocked autoplay leaves the button as "Play theme music". Clicking it plays the music, and clicking again pauses it.
- There are no unhandled rejections. On master, the same harness stays on "Loading..." with unhandled fetch failed and NotAllowedError rejections.
There is no package.json, so there are no install, build or lint scripts to run.

For the owner to decide

Redeploy https://breakingbadapp.vercel.app/. The live site still serves the old code that calls the dead API.
Another option was the community clone breaking-bad-api-six.vercel.app, which responds and has the old fields (nickname, occupations). I chose TVmaze because it is an established, documented service. If you would rather keep the richer fields, you could switch.
Bootstrap 4.5.2 (loaded from StackPath) is end-of-life. Consider moving to Bootstrap 5 via jsDelivr with SRI. I didn't make that change because it could alter the layout.
The repo name ("BreakingBad-API") and description still refer to the old API.

breakingbadapi.com no longer resolves (DNS lookup fails), so the page was stuck on 'Loading...' forever with an unhandled fetch rejection. Load the Breaking Bad cast (show 169) from TVmaze, which is free, keyless and CORS-enabled, and filter it locally by character or actor name. TVmaze doesn't provide nickname/status/occupation, so cards show character, actor and actor's birthday. This also fixes the Name/Actor labels, which were swapped. Cards are built with textContent instead of interpolating API data into innerHTML.

Network or HTTP errors previously left the loading spinner on screen indefinitely.

Search previously only ran on the 'change' event (blur/Enter) and a query with no matches rendered a blank area. Since filtering is now local, update on 'input' and tell the user when nothing matches.

… music Browsers reject audio.play() without a user gesture, which produced an unhandled promise rejection and meant the music never played. When autoplay was allowed there was no way to stop it (WCAG 1.4.2 Audio Control). Catch the rejection and add a toggle button with aria-pressed state.

…ter details The logo had no alt text and the search box relied on its placeholder only. Character details were revealed on :hover alone, so keyboard and touch users couldn't reach them; cards are now focusable and show details on :focus. The decorative loader image gets an empty alt.

The TVmaze API license (CC BY-SA) requires crediting TVmaze with a link back from the site.

…ata loads Typing into the search box before the cast arrived (or after it failed to load) replaced the spinner/error with a misleading 'No characters found.'

vercel · 2026-09-24T11:24:21Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
breaking-bad-api	Ready	Preview	Sep 24, 2026 11:24am UTC

Copilot

Copilot review overview

🟡 Changes recommended

Address the three unresolved moderate issues in audio state synchronization, live-region announcements, and card overlay positioning.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 2

Open (2)

Music toggle stays paused after finite audio ends · New
Announce dynamically inserted errors and empty results · New

What changed in this PR

Migrates the app from the unavailable Breaking Bad API to TVmaze and improves reliability, accessibility, search, and audio controls.

Changes:

Replaced the dead API with TVmaze cast data and local filtering.
Added error/no-results states and safe DOM rendering.
Improved audio controls, keyboard accessibility, metadata, attribution, and documentation.

File	Reviewed changes	Final findings
`style.css`	Focus-based card detail display	Moderate: position card overlays relative to their cards (1 vote).
`README.md`	Updated data source, setup, and features	No final comments.
`main.js`	Fetching, filtering, rendering, error handling, and audio controls	Moderate: synchronize the toggle when audio ends (2 votes); expose status messages as a live region (2 votes).
`index.html`	Metadata, accessible controls, and TVmaze attribution	No final comments.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+musicToggle.addEventListener("click", ()=>{
+    if(audio.paused){
+        playMusic();
+    }else{
+        audio.pause();
+        updateMusicToggle();
+    }
+})


-    let res;
+function showMessage(text){
+    output.innerHTML = "";
+    const p = document.createElement("p");


fadyehabamer added 9 commits September 24, 2026 14:20

fix: show an error message when characters fail to load

b822ffe

Network or HTTP errors previously left the loading spinner on screen indefinitely.

feat: filter characters as you type and show an empty-results message

a23b306

Search previously only ran on the 'change' event (blur/Enter) and a query with no matches rendered a blank area. Since filtering is now local, update on 'input' and tell the user when nothing matches.

fix: give the page a descriptive title and meta description

fe5f17c

fix: credit TVmaze as the data source

e18aa64

The TVmaze API license (CC BY-SA) requires crediting TVmaze with a link back from the site.

docs: document the TVmaze data source and how to run the site locally

b721d0d

fix: don't replace the loading or error message while typing before d…

4595e33

…ata loads Typing into the search box before the cast arrived (or after it failed to load) replaced the spinner/error with a misleading 'No characters found.'

Copilot AI lite review requested due to automatic review settings September 24, 2026 11:24

Copilot started reviewing on behalf of fadyehabamer September 24, 2026 11:24 View session

Copilot AI reviewed Sep 24, 2026

View reviewed changes

fadyehabamer merged commit 1667bf7 into master Sep 24, 2026
3 checks passed

fadyehabamer deleted the maintenance/2026-09 branch September 24, 2026 12:59

Navigation Menu

Maintenance: replace dead Breaking Bad API with TVmaze, fix error handling & a11y - #1

Maintenance: replace dead Breaking Bad API with TVmaze, fix error handling & a11y#1
fadyehabamer merged 9 commits into
masterfrom
maintenance/2026-09

fadyehabamer commented Sep 24, 2026

Uh oh!

vercel Bot commented Sep 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

fadyehabamer commented Sep 24, 2026

Changes

Verification (static only, no browser)

For the owner to decide

Uh oh!

vercel Bot commented Sep 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants