Inspired by a similar quotes website for Downton Abbey quotes, I decided to build Breaking Bad quotes using https://breakingbadapi.com/.
Users are greeted with a carousel of quotes and images of the characters who said them. There is also a navigation bar to let the users explore more show information.
The character page lets user view information associated with individual characters. The information card includes the character's name, nickname, if they have one, date of birth, status, living or deceased, occupation, the seasons they appear in, the actor playing them, and their quotes.
Users can see a list of seasons and, once a season is clicked on, the list will expand to show the episodes in that season. The user can then click on an episode and then see the characters featured in that episode.
The api had an endpoint to view information associated with the death of characters so I thought "Why not!" and made a page to view that information, complete with content warning Similar to the character page, users see a list of names and can click on a name to see how the character met their end, in what season and episode, their last words, and the person responsible.
The site uses JSON server to save favorite quotes selected by the user. This happens between the "Quotes" page and the "Favorites" page.
Users can browse all quotes or select a character from the dropdown list and filter quotes by who said them. There is also a button to add quotes to the "Favorites" page. Once the button is clicked, a notification will appear informing the user the quote has been added and providinga link to the quotes page.
All quotes that appear in the "Favorites" page will now have a "Remove" button. Once the user clicks one of these buttons the quote will disappear from the page.
The app is hosted on Heroku at https://diaz-breaking-bad.herokuapp.com/
- Replace JSON server will Rails backend