Breaking-Bad-MohammadAlhabil

• Description
• Links
• APIs
• Problem
• Solution
• User Journey
• User stories
• Technology I used
• Installing the project locally

✧ 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

• Live link
• Figma design

✧ APIs

API	Description	Auth	HTTPS	CORS
Breaking Bad	Breaking Bad API	No	Yes	Unknown
Imsea	Free image search	No	Yes	Unknown
Shrtcode	URl Shortener with multiple Domains	No	Yes	Yes

✧ 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.

✧ Installing the project locally

• https://github.com/GSG-G11/Breaking-Bad-MohammadAlhabil.git
• cd Breaking-Bad-MohammadAlhabil
• code .