A Front-End Project by Owen Hallgren and Max Bregman
- Clone this repo down,
cdinto it and runnpm i react. - In the project directory run
npm install --save @fortawesome/fontawesome-free - To view the site run npm start
This is a Turing School of Software and Design Module 3 project. In this project movies are displayed on the home page. A user can search for a movie from the top of the page. A user can click on a movie to learn more about it. On the details page the user is shown the genre, the rating, the runtime, the overview, and shown a trailer. All information is being pulled from an external API.
- Gain a better understanding of an app built using React
- Understand how to use React Router
- Utilize API calls in a clean way
- Learn how to use state effectively in a react app
- Implement a controlled form
- Craft code with clean style, using small functions that show trends toward DRYness and SRP
- Implement Cypress with sad and happy path tests
- JSX
- CSS
- Javascript
- Git
- GitHub
- React
- React Router
- Cypress
- React Youtube Player
On page load, the user will see a grid of movies
On the home page, the user can search for movies by title, the movies shown will be updated with each key click
When the user clicks on a specific movie they will be taken to a details page. On this page, they will see the runtime, rating, genres, overview, and trailer
- Getting Router to work
- Using stubbing in cypress tests
- Using an Icon
- Getting things to look right
- Using React to build an app from the ground up
- Implementing a controlled form
- Implementing Cypress tests
- Using React Router
- Add debouncing to search form to reduce api calls
- Giving the user the ability to add movies to favorites
- Letting the user search by genres and rating