Skip to main content

Breaking Bad Series

Breaking Bad Series

Netflix-inspired movie streaming platform built using Next.js and TypeScript.

Breaking Bad Series
Category
html / css / js
Role
Frontend Developer
Timeline
2–3 weeks

Case Study

A deep dive into the project development process

The Problem

Fans needed a single place to find Breaking Bad characters, episodes, and related content with good UX across devices.

The Solution

Built a responsive Next.js-inspired site that consumes public APIs to surface characters and episodes with sorting and search.

Key Features

  • Character pages
  • Search
  • Sort (age / A-Z)
  • Responsive layout
  • External API integration

Challenges Faced

Ensuring reliable API usage and handling CORS/response inconsistencies; making UI responsive across devices.

What I Learned

Cache API responses where appropriate and provide graceful fallbacks for API failures.

Results & Impact

An informative fan site with improved discoverability for series content and a pleasant mobile experience.

Breaking-Bad-MohammadAlhabil

✧ Description

A responsive website to watch all things related with breaking bad series, with good content and many designed for make the user experience more efficient and suitable with many devices (Laptop, mobiles).

✧ Links

✧ APIs

APIDescriptionAuthHTTPSCORS
Breaking BadBreaking Bad APINoYesUnknown
ImseaFree image searchNoYesUnknown
ShrtcodeURl Shortener with multiple DomainsNoYesYes

✧ Problem

Fans of the series "Breaking Bad" find it difficult to find all the information of the series, including the characters, their data, seasons, episodes and quotes in one place

✧ Solution

Online website is the go-to solution to help display the information about the series at no extra waste time to the user.

✧ User Journey

  1. the user will open the breaking bad website which contains categories which one of them will be active and display it as a defalut category.
  2. after the user chooses a character, a module will open from left side to show up the details of the character has cliked.
  3. on the sort bar the user can sort the characters by (Young, Old, A-Z, Z-A).
  4. on the search bar the user can search for any character by the name, then if found will show up, else will show up a messeage.

✧ User stories

  • As a user, I want to be able to see all characters of breaking bad series.
  • As a user, I want to be able to see details of any character of breaking bad series.
  • As a user, I want to be able to search of any character name of breaking bad series.
  • As a user, I want to be able to search of any episode number of breaking bad series.
  • As a user, I want to be able to search Images of breaking bad series.
  • As a user, I want to be able to sort the characters of breaking bad series by (Young, Old, A-Z, Z-A).
  • As a user, I want to be able to see or use two themes(light,dark).
  • As a user, I want to be able to give my feedback to this website.

✧ Technology and Tools that I used

  • HTML → to build the structure of the pages.
  • CSS → to style the application.
  • JS & DOM Manipulations → to create interaction between the page and the user.
  • use APIs
  • postman website link → to check the APIs.

Related Projects