Streaming media services have grown in popularity over the past years, but when it is time for many of us to pick a movie to see in the theatres the tools available seem strangely stuck in the past!
Expired Avocados is a web application that seeks to amend that issue, offering to its users a streamlined and clear experience when they are looking to scout the cinematic landscape ahead of them prior to their next movie night. Upon arriving on our webpage, users are shown an unfiltered list of all movies in our database. They can browse by scrolling through the movie tiles, or by defining search terms on the bottom of the page such as searching through movie titles or specifying a movie rating range that they would like.
Once a user has made their selection, they can seek further details regarding the film by clicking the movie poster itself. On this next screen, a user will be presented with myriad details about the film, as well as a randomly selected movie trailer for each title.
The familiar and smooth style that this application presents to our users will make their previous methods toast!
-
Clone down this repo
-
Install dependencies by using ‘npm install’ in your terminal within the root directory.
-
To host website on your local machine, run ’npm start’ in terminal.
-
A window should be opened in your default browser, if not, navigate to http://localhost:3000 in your preferred browser to view the hosted application!
Alternatively, the app is deployed via Vercel and that link is below.
To run the test suite associated with the classes behind the scenes and how they interact:
Run 'npm run cypress' from the terminal while within the main directory of the application and select E2E Testing, and your chosen browser in the following window.
Live demo:
Application is deployed live at: Expired Avocados on Vercel
This project was assigned in the first week of module 3 for Front End students at Turing. The work was completed over the course of the following two weeks.
- Gain competency with React fundamentals
- Learn how to test React components & asynchronous JS using Cypress
- Create a multi-page UX using Router
- Implement a controlled form
- Practice async GitHub workflow
- Deploy final result
- User login feature, enabling favoriting / saving movie selection between visits.