Giter VIP home page Giter VIP logo

shehroze-1122 / breaking-bad-cast Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 5.71 MB

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.

Home Page: https://shehroze-1122.github.io/breaking-bad-cast/

HTML 13.51% CSS 24.59% JavaScript 61.90%
react reactjs create-react-app breaking-bad breaking-bad-api web-speech-api voice-recognition breaking-bad-cast

breaking-bad-cast's Introduction

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! ๐Ÿ˜‰

breaking-bad-cast's People

Contributors

shehroze-1122 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.