React-Reactjs tmdb app: Responsive React 'The Movie Database' (TMDb) App

TMDb Movie Search

License GitHub stars GitHub forks Mentioned in Awesome React

TMDb Movie Search is a responsive React app that utilises Twitter's typeahead.js and Bloodhound suggestion engine, loading data via The Movie Database (TMDb) API.

Demo

TMDb Movie Search - Live DEMO

Tools

Key tools used in this React project are:

Tool Description
React A JavaScript library for building user interfaces
Typeahead.js A flexible JavaScript library that provides a strong foundation for building robust typeaheads
Bloodhound Bloodhound is the typeahead.js suggestion engine
Bootstrap Build responsive, mobile-first projects on the web with the world's most popular front-end component library
SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world
Browserify Browserify lets you require('modules') in the browser by bundling up all of your dependencies
Babel Use next generation JavaScript, today
Gulp Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow

Installation

node.js is required to get npm.

If you would like to download the code and try it for yourself:

  1. Clone the repo: [email protected]:SKempin/reactjs-tmdb-app.git
  2. cd reactjs-tmdb-app
  3. Install packages: npm install and bower install
  4. Build project and launch: gulp watch
  5. Open your browser at: http://localhost:9000

Browser Support

This project makes usage of the Fetch API, utilising a polyfill for older browsers.

  • Chrome 42+
  • Firefox 39+
  • Safari 10+ (with polyfill)
  • Internet Explorer 11+ (with polyfill)
  • Edge 14+

Node.js

Supports LTS version (v6).

Author

Stephen Kempin

SK-UK Google Play Store

Donate

If you like this project and wish to say to say thanks - I'm always open to a coffee!

Buy Me A Coffee

License

MIT

You are welcome to use this however you wish within the MIT license, but please retain my credentials and links back to this repo.

Comments

  • an issue when run gulp watch
    an issue when run gulp watch

    Dec 8, 2020

    ReferenceError: primordials is not defined at fs.js:40:5

    Reply
  • gulp watch: failed
    gulp watch: failed

    Oct 18, 2017

    I've got these when running command: gulp watch

    Fatal error in ../deps/v8/src/api.cc, line 1248

    Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().

    Illegal instruction: 4

    i got it fixed after ran these to get updates from packages:

    npm i -g npm-check-updates
    npm-check-updates -u
    npm install
    gulp watch
    

    And now got another issue:

    [12:22:17] Starting 'html'... [12:22:17] 'html' errored after 33 ms [12:22:17] TypeError: $.useref.assets is not a function

    Reply
  • Replaced missing image with a placeholder
    Replaced missing image with a placeholder

    May 30, 2017

    I used a placeholder image (just change the path I added if you don't like the one I chose), saying 'image not found' instead of the default missing image symbol.

    Reply
  • Build is failing - what to do?
    Build is failing - what to do?

    Feb 21, 2017

    After running $: gulp watch

    ==== C stack trace ===============================

    0   node                                0x0000000100bce203 v8::base::debug::StackTrace::StackTrace() + 19
    1   node                                0x0000000100bcb389 V8_Fatal + 233
    2   node                                0x0000000100147afa v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute) + 330
    3   fse.node                            0x0000000102784bb1 fse::FSEvents::Initialize(v8::Local<v8::Object>) + 197
    4   node                                0x00000001009cf21f node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) + 854
    5   node                                0x000000010017c39a v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) + 378
    6   node                                0x00000001001e023c v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) + 924
    7   node                                0x00000001001df679 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) + 281
    8   ???                                 0x000033a1d30063a7 0x0 + 56770122769319
    9   ???                                 0x000033a1d335049a 0x0 + 56770126218394
    

    fish: 'sudo gulp watch' terminated by signal SIGILL (Illegal instruction)

    Reply
  • Background image returns 'null'
    Background image returns 'null'

    May 27, 2017

    I noticed that there isn't a fallback image for the background. The response for that comes as https://image.tmdb.org/t/p/originalnull

    To test that I've typed in the movie title Killer: A Journal of Murder (an excellent movie, btw)

    Congrats with the project. Looks pretty neat.

    Reply
  • Transparent background full height. Open browser window
    Transparent background full height. Open browser window

    Feb 22, 2017

    @SKempin for some odd reason I'm having trouble assigning this to you.

    Why: Background was not going all the way down in certain view ports.
    How: Removed restriction on div.

    Why: Not opening window on run of gulp watch. How: Added parameter to gulp task that opens it.

    Why: NPM scripts is standard way of firing off applications. How: Added scripts -> start: gulp watch. Now you just need to run npm start and the rest is done for you.

    Reply
  • Search input broken
    Search input broken

    Feb 20, 2017

    Looks nice. Keyboard doesn't pop up in search on iPhone 6S. Checking Mac browser tomorrow.

    Same problem with entering search on the web through Safari. You have to hold the mouse in the field to enter a search term. It only works in Google Chrome. But here it is lightning fast. Looking forward to a fix ;)

    Reply