Skip to content

This web app is build using the react framework and utilizes an API to fetch all the characters' images along with all the details and displays them with cool effects, user-friendly UI, and both voice and text searching enabled through the character's name or nickname.

Notifications You must be signed in to change notification settings

shehroze-1122/breaking-bad-cast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Description

This web app is build using the react framework and utilizes an Breaking Bad API to fetch all the characters' images along with all the details and displays them with cool effects, user-friendly UI.

You can search characters by their name or nickname in the season by either typing or saying it to do so for you. However voice search feature is currently supported only for Google Chrome Browsers.

Demo

  • You will see these visuals as you land on this app.

home screen

  • You can scroll down to see more than 100 charcters' cards.

characters' card

  • Hover on any card and you would see their all the details dispayed by a flip of card.

character info

  • Search any character by it's name or nickname used in the show and we will filter out as you type

type-search

  • Dont forget to try out voice search too. Hit the microphone and we can hear ya!

voice-search-enabled

  • Speak any of characters' name or nickname and see it getting typed as you speak.

voice-search-speech

  • Satisfied by what we recognized you said? Hit Search and tada, here you have it! Else clear it and try again!

voice-search

Making it your own

If you want to play around with the code and run on your local server:

  • Clone the repo
  • Type cd breaking-bad-cast
  • Make sure you have npm installed which comes automatically with node.
  • Type npm install in your terminal. It will install all the dependancies
  • Type npm start. It will run the app your local host

Do let me know about any issues by opening a issues or you can create a pull request as well if you want to improve things.

Have Fun! 😉

About

This web app is build using the react framework and utilizes an API to fetch all the characters' images along with all the details and displays them with cool effects, user-friendly UI, and both voice and text searching enabled through the character's name or nickname.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published