Rancid Tomatillos is a site that lets users browse movies, and view fun details about each one like their budget, a plot summary, and user community ratings. It's designed for a fluid and accessible experience for users of varying levels of ability and internet literacy. It's currently deployed here.
Rancid Tomatillos is a completely original concept that in no way resembles another site. If it did resemble another site it would do so purely for parody purposes.
This app is built in React using the create-react-app boilerplate. It also uses...
-react-router-dom
-react-promise-tracker
-react-spinners
-react-youtube
-node-sass
-fetch api
-HTML5
-cypress
Again, Rancit Tomatillos is deployed here if you'd like to view it in your browser. You can also run it locally if you'd like. To install this app:
git clone <<url>>
cd <<path>>
npm i
Once all the dependancies are installed run npm start and the site should be accessible at http://localhost:3000/.
Upon page load the site will fetch a list of movies and display a grid of posters. Each movie's title and freshness rating are visible. The user can click a poster to see a more detailed page including a plot summary, various stats, and a list of embedded trailers and clips from youtube.
The user can also enter text into a search bar to filter the movies by title, and choose to sort the movies by freshness, release date, or title.
Rancid Tomatillos is completely responsive across all breakpoints, and is designed to work well on mobile.
We use cypress for end to end and integration testing. In order to test the site run npm run cypress and you should be brought to a testing suite. The tests use stubbed api calls, but do expect the site to run locally. Make sure you've run npm start in an open tab and can visit the site before testing.
We aren't sure if we will be updating this project. Whether or not we continue this work here are some improvements that could be made:
-Right now there is no login system for users, or a system by which users can add their own ratings. This should be pretty easy to implement didn't have the time so it fell out of the scope for this project.
-Some movies have incomplete data, and a couple image urls we get back from the server are bad. Although ideally the data we get would always be good, we can also handle a lot of these inconsistences on our end with some conditional rendering and data cleaning.
-Although we're proud of our testing suite we could go further and get more robust tests by using the React Testing Library.
This app was a paired project for Module 3 of the Front End Engineering Program at the Turing School of Software and Design.
| Thao Ma GH | Boone Epstein GH |
 |