Git Product home page Git Product logo

reactjs-tmdb-app's Introduction

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.

reactjs-tmdb-app's People

Contributors

danwilkes02 avatar flpwgr avatar mtayyabhanif avatar nkn-ms avatar skempin avatar yoavrheims avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reactjs-tmdb-app's Issues

Search input broken

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 ;)

gulp watch error

Hi man,

first of all thanks for the project. Looks interesting and cause i love movies i wanted to clone and run it. When i go through your steps from your readme i get the following error while executing gulp watch. Can you help?

➜  reactjs-tmdb-app git:(master) ✗ gulp watch
assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified

Build is failing - what to do?

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)

Background image returns 'null'

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.

gulp watch: failed

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

Disclaimer

Did you have an issue with showing movie posters in the demo on the gh-page site? Is it a requirement to put a link to a disclaimer or fair use copyright?

API KEY

Hey, I was going through your project, and I noticed, that you have your TMDB api key there open in your project. Hence I am bringing it to your notice that remove your api key because it's not a good idea to leave your working api key openly in the repo.

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.