A movie database application for users looking to browse movies effortlessly by title.
View Deployed Site HereSummary | Tech Used Getting Started | Current Features | Future Features & Noteworthy Limitations | Preview | Reflection | Contributors | Organizational Tools
When a user visits the Film Vault web application, they are greeted by the main page which displays all the movies currently in the database. There is a loading page that will display first if the data needs time to load. Then, on the main page, a user can scroll through the database or use the search bar to type in the movie in mind. The search bar filters through in real time, displaying accurate movie search results. At any point, the user cna clear the input box with the provided clear button or by using the backspace. The home button also provides the same functionality.
Once a user finds a movie of interest, they can click on the poster and be directed to another page that displays only that movie's information. The movie details page includes a trailer, release date, rating, etc. When the user is ready to continue browsing the webpage, there are 3 points to take them back to view all movies: the home button and TFV logo which is in the header and the footer. Additionally, if the user types in an incorrect path in the url, they are directed to a 'page not found' that gives a message to the user and a link to return to the main page.
JavaScript | CSS | HTML5 | Cypress/E2E | ReactRouter | React | fetchAPI | npm Libraries: PropTypes & day.js
- Clone down this repo the film vault
- Then
cdinto the directory - Run
npm install - Run
npm start - Paste this:
http://localhost:3000/into your browser
- An application to search through movies in the current database using the real time search bar.
- Ability to click on a movie poster to view further details and stats.
- A user has serveral optional links to navigate to the home page.
- There is a 'page not found' which handles all paths that are not determined in the app and will help the user navigate back to the main page.
- Currently, there is no user login. That is functionality that would enable the user to favorite, rate and keep track of other information specific to that user.
- Add a drop down next to the search so the user has the ability to select a category to search through, ex. title, year, genre.
- We'd really like to be able to deploy this application so user's can browse through this movie database.
Our partnership was solid. The communication was consistent and the collaboration was professional. This was both of our first time building an application from scratch using React. We were able to take our time and work through each piece together to gain a strong understanding of react fundamentals and working with asynchronous JavaScript. There were many challenges along the way with implementing a new testing framework, Routing paths, importing images, using conditional rendering and JSX. The wins and the challenges tend to overlap with the dedication to reach our personal goals and more. Overall, we worked great together, learned more than we expected and enjoyed the building process together.