Movie Cast Finder
A lightweight VanillaJS and Bootstrap movie cast search interface
I'll finish it eventually, this is a personal application intended mainly as a modern JS workout. No tutorials were used. 💯 Trying to up my game at promises, async await, classes, ES6 Modules - import/export, Webpack, SASS etc.
Usage example
This is a search interface for movie casts using The Movie Database API. You can search a movie by it's name and then choose from a list of movies which match with that name, after choosing one of the movies a list of cast members will be shown alongside their pictures, you're able to find out more information about specific cast members by clicking on an actor from the list.
Built With
- Vanilla JS / ES8+
- SASS - CSS Supercharger
- Bootstrap - The CSS Framework used
- Bootstrap Native - Vanilla JS code for Bootstrap
- WebPack - Module Bundler used
- The Movie Database API - Database used for queries
Demo
Inspirations and resources
- Colorlib's Responsive Table v2 - Table Design
- Animista - Background Gradient Keyframes CSS
- Wave text animation - CSS logic and inspiration and for the page title
Release History
-
0.3.0
- Greatly improved CSS and layout/HTML structure.
- Added transitions.
-
0.2.0
- Carousel Draft.
- Initial carousel layout done.
- Migrated to Bootstrap v4 CSS + Bootstrap Native JS.
-
0.1.0
- Intial Draft.
- Table Draft.
- Intial layout and structure almost there.
- Colors and theme kinda figured out already.
Help resources used
How to use the API
Webpack
Stack Overflow (For future references)
Is it a bad practice to have a constructor return a promise?
How to do async await on a forEach function
Using async/await with a forEach loop
CSS transition auto height not working
Meta
Gustavo Máximo – gfmaximo97@gmail.com
Contributing
I'm not currently accepting pull requests as this is a personal project for training purposes. Feel free to fork it however.