A front end application built by George Lemmon and Kim Ward.
Rancid Tomatillos is a movie rating app built during Mod 3 of Turing School of Software & Design. This project focused on the React.js framework, end-to-end testing with Cypress, and using React Router to dynamically render components based on the URL path. The full project specs can be found here.
- Gain competency with React fundamentals
- Learn how to test React components & asynchronous JS
- Practice refactoring
- Create a multi-page UX using Router
- Clone the repo down to your machine
- Open the root directory and run
npm ito install dependencies - Run
npm startin the terminal to open the webpage
When you visit the homepage, there is a grid of movie posters with their movie title and year released. This list is ordered alphabetically from A to Z. Each poster is clickable and directs you to the detailed view of that movie with additional details (genre, rating, runtime, and description).
Sorting & Filtering
In the header, there are two dropdown menus that control the order in which posters are displayed. There are four sort option and four filter options:
- Alphabetically (A to Z)
- Alphabetically (Z to A)
- By Rating Ascending
- By Rating Descending
- Ratings above 5
- Ratings above 6
- Ratings above 7
- Show all ratings
Selecting an option from either dropdown menu immediately renders the new sorted/filtered view. Sorting and filtering options can be combined. To return to the original settings, click the Reset button alongside the menu options.
This application was tested with Lighthouse and the WAVE Chrome extension in order to address the needs of all users.
- React.js
- React Router
- CSS
- HTML
- Cypress
- Fetch API
- NPM
- Visual Studio Code
- Add a login feature so users can leave ratings on movies.
- Deploy site to Heroku.
For the color palette, we were inspired by Dribbble creator ADEN's Cinema Dashboard Design.