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
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
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
When a user clicks on a specific movie, they will be routed to another page to view movie's details
- 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
- I used a Github Project Board to stay on task and meet the deadline as well as daily standups after class.
- 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
- React
- React Router
- Cypress
- ES6 Javascript
- CSS
- Semantic HTML
- Webpack
- Fetch API