Giter Site home page Giter Site logo

antrikshy / the-mcu-index Goto Github PK

View Code? Open in Web Editor NEW
11.0 2.0 0.0 848 KB

React-based static, single-page website that uses TheMovieDB to find actors in the Marvel Cinematic Universe

Home Page: https://antrikshy.com/The-MCU-Index

License: MIT License

CSS 0.25% JavaScript 99.64% HTML 0.10%
typeahead actors reactjs movies the-movie-db hacktoberfest

the-mcu-index's Introduction

The MCU Index

The MCU Index (MCUi for short) is a single-page static website that I designed as a pet project to teach myself React, the popular UI library from Facebook. It's a simple tool to look up actors who have appeared in the Marvel Cinematic Universe, by name. Due to API limitations, it doesn't work very well for the TV shows, sadly. Only major characters show up for these properties.

Design

MCUi is built using React. I supercharged the search box using Typeahead from Twitter. I have wanted to find an excuse to play around with Typeahead for months now. It's a very flexible front-end library to help create auto-fill suggestions for input fields.

The website is powered by The Movie Database's free API. While it's great for movies, it unfortunately does not track all cast from TV episodes. Only major characters are listed, and I even had to manually iterate over all past seasons and request cast members for each one.

MCUi is desiged such that it only requires me to update one file (data.js) when new Marvel Cinematic Universe peoperties are released (with their unique IDs in TMDb). Other than that, everything else (API calls etc.) is handled programatically on page load.

For an added challenge and simplicity, I did not use any other UI layout frameworks in MCUi.

Contribute

Pull requests are greatly appreciated.

I'm new to React, so I may be reinventing wheels and not following best practices everywhere. Cleanup would be nice.

Feel free to find and fix any UI issues. Additionally, I feel there is a lot of room for improvement in the efficiency department. If you want to try and reduce the number of API calls or any needless recalculations that I make, go for it! There are a lot of independent moving parts in here.

If you wish to contact me with questions about this project, tweet to me @Antrikshy or message u/Antrikshy on reddit.

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.