Rancid Tomatillos is a web application similar to Rotten Tomatoes, Netflix, or IMDB. Users may search for a specific movie, or filter by genre, to view the trailer via a YouTube window, see a synopsis, a rating, and a general overview of the movie. Future iterations will enable users to rate their own movies, and create a Favorite Movies page.
JavaScript, React.js, Glide.js, CSS, HTML; tested with Cypress.
Check it out for yourself. Be sure to click the banner to load the app!
![Screenshot 2024-07-13 at 2 58 17 PM](https://private-user-images.githubusercontent.com/59072840/348500835-98df2455-a8b1-4da8-a55b-7486dd40780b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjk0MzMsIm5iZiI6MTczOTM2OTEzMywicGF0aCI6Ii81OTA3Mjg0MC8zNDg1MDA4MzUtOThkZjI0NTUtYThiMS00ZGE4LWE1NWItNzQ4NmRkNDA3ODBiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEyVDE0MDUzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNhY2UzNGRlOTFhMGJhNGRmYWQ5MDZjZDc2MDI0YWJhYjAxNmFhNzdlYmQ4MGViZDFmMTEyZmQ1ZTVjMzI0MGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.nS6ghfVcRdJ-y7sU9k5jQUnlUKXDXRezewpik3Bv678)
![Screenshot 2024-07-13 at 2 58 46 PM](https://private-user-images.githubusercontent.com/59072840/348500853-0014177e-0de1-4394-a49b-f30eace448cc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjk0MzMsIm5iZiI6MTczOTM2OTEzMywicGF0aCI6Ii81OTA3Mjg0MC8zNDg1MDA4NTMtMDAxNDE3N2UtMGRlMS00Mzk0LWE0OWItZjMwZWFjZTQ0OGNjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEyVDE0MDUzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ5NWU1YzY3OTg0YjdhNzA4NjhlZjM5NzExYWNhM2UyNTU1NTA4NDhkYzNjNTE3Y2JjNTQ1OTNkM2Y3YjFhNGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ljm0pf7tGjyYVRB_pa0foJxqnmGJBB1RhUD2k7-3uLg)
![Screenshot 2024-07-13 at 2 59 03 PM](https://private-user-images.githubusercontent.com/59072840/348500873-26ff7aba-71c9-4a59-96ac-d330f98025ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjk0MzMsIm5iZiI6MTczOTM2OTEzMywicGF0aCI6Ii81OTA3Mjg0MC8zNDg1MDA4NzMtMjZmZjdhYmEtNzFjOS00YTU5LTk2YWMtZDMzMGY5ODAyNWVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEyVDE0MDUzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM1MTg5ZDUxZGY4MjNhMzlmOGE0YmQxNGMxMjMwYzRjMWNmMzgwMzE4YzAwMmE1NzIxOWE0ZjVlN2FjMDU4OTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.cHoTj3to02IZtfZipkNQsMe91fvqM_VBcrzFUJrhHuw)
David Swatzell: https://github.com/Swatzell Kyle Boomer: https://github.com/KyleMBoomer Kevin Nelson: https://github.com/kevinm23nelson
Gain competency with React fundamentals, Test React components & asynchronous JS, Practice refactoring, Create a multi-page UX using Router
- Getting the Genre dropdown to work properly was a challenge, as it required two separate API calls to render all the initial movie cards with both a single movie and genre availability for the user.
- This project was my first attempt at using Glide.js to implement the slide carousel modal. I was happy to implement that library.
- Cypress testing for this app was a bit tougher than expected due to the separate API calls for all the movie cards, but it was a unique challenge and a great learning experience.