Skip to content

A movie database built in React that consumes a REST API. The Film Vault features a live search and a movie details page.

Notifications You must be signed in to change notification settings

Alideniz/the-film-vault

 
 

Repository files navigation

The Film Vault

A movie database application for users looking to browse movies effortlessly by title.

View Deployed Site Here

Summary | Tech Used Getting Started | Current Features | Future Features & Noteworthy Limitations | Preview | Reflection | Contributors | Organizational Tools


Summary

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.

Tech Used

JavaScript | CSS | HTML5 | Cypress/E2E | ReactRouter | React | fetchAPI | npm Libraries: PropTypes & day.js


Getting Started

  1. Clone down this repo the film vault
  2. Then cd into the directory
  3. Run npm install
  4. Run npm start
  5. Paste this: http://localhost:3000/ into your browser

Return to top

Current Features

  • 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.

Future Features & Noteworthy Limitations

  • 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.

Preview

thv1 thv2

Return to top


Organizational Tools


Reflection

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.

Return to top


Contributors

Maria DelSignore
Nina Brissey


Return to top

About

A movie database built in React that consumes a REST API. The Film Vault features a live search and a movie details page.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 67.4%
  • CSS 30.6%
  • HTML 2.0%