The purpose of this project was to make an application that could take movie data from a server and display that data in clickable cards that a user can use to get more information on the selected movie. When on the singular movie page the user can navigate back to the home view of all movies and click to get information on different movies.
Turing School of Software and Design is a 7 month, 4 module program. This project was assigned as part of module 3 of the front end curriculum.
We gave the deployed application to an end user and the following was some of their feedback: "It would be nice to have some way to navigate to movies I am trying to find, or at least even just genres of movies, rather than having to scroll endlessly."
In response to this feedback, we created a sort button that allows users to organize movies in descending order based on their ratings. This can serve as proof of concept for sorting by other movie details such as genre. In the future we will look to implement more sorting parameters as well.
"Going back by clicking on the 'Rancid Tomatillos' text (the header) is not intuitive. I expect some other way to go back (to the home page)"
In response to this feedback, we added a clear home button on the header that is conditionally rendered whenever the user navigates away from the home page.
- Clone the repository: Open a terminal window. Navigate to the directory where you want to clone the repository. Run the following command: git clone git@github.com:alfonsojack/Rancid_Tomatillos.git
- Install the dependencies: Run the following command in the cloned repository directory: npm install
- Run the React app: Run the following command in the cloned repository directory: npm start
- Open the app in your web browser by navigating to http://localhost:3000
- Adrian Zabolitzki (GitHub: @ganuza)
- Jonathan "Jack" Alfonso (GitHub: @alfonsojack)
- Gain competency with React fundamentals
- Test React components & asynchronous JS
- Practice refactoring
- Create a multi-page UX using Router
- Implement responsive design principles
- React.js
- JavaScript
- CSS
- HTML5
- React Router
- Cypress E2E testing
- GitHub
- GitHub Projects
- Effective time management and problem solving. We were able to budget our time efficiently and collaborate to overcome any technical challenges that arose.
- Refactoring with router was a bit of a challenge after completing most of our functionality using conditional rendering.