rancid-tomatillos

Rancid Tomatillos

This project is a movie viewer React application that allows users to browse through a list of movies. A user can sort the order of the movies based on highest to lowest rating and vice versa by clicking the sort button in the nav bar. Users can view a movie’s details by clicking on the movie image they are interested in. This navigates the m to a page that provides more details about the movie. The user can navigate back to the main page by clicking the return to home button, clicking the back arrow, or, tyrping in the home url: http://localhost:3000/. Check it out here

Project Specs

Rancid Tomatillos is a React application that uses React Router built in 8 days at the Turing School of Software and Design. The goal of this project was to solidify and demonstrate the understanding of:

• Gain competency with React fundamentals
• Learn how to test React components & asynchronous JS
• Practice refactoring
• Create a multi-page UX using Router

Illustrations

View All Movies & Sort by Rating

A user may browse a collection of movies on the main page

When a user clicks on the Sort by Rating button, they can view movie ratings from lowest to highest and vice versa

Display Specific Movie Details

When a user clicks on a specific movie, they will be routed to another page to view movie’s details

Setup

• In your terminal, clone the repo
• https://github.com/KarimAl-Rashdan/rancid-tomatillos
• Make a new directory and cd into it
• Install NPM packages
• npm install
• Do NOT run npm audit fix --force
• Then type npm start . This runs the app in the development mode.
• Open http://localhost:3000 to view it in your browser.
• The browser should then deploy using a local host
• Enjoy using Rancid Tomatillos!
• NOTE: Make sure that you type Control + C in your terminal when you are done using the application. This ensure the server will stop running before your close your Terminal.
• Start the server to see the local site npm start

Project Management

• I used a Github Project Board to stay on task and meet the deadline as well as daily standups after class.

Future Features

• Add search bar or dropdown to have ability to search a movie by its Title
• Allow a user to search movies by genres on the main page
• Ability for a user to add their own rating to a movie
• Responsive design to allow for better UX/UI on mobile devices

Contributors

• Karim Al-Rahdan

Technologies

• React
• React Router
• Cypress
• ES6 Javascript
• CSS
• Semantic HTML
• Webpack
• Fetch API