📝 NOTE Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing [ ] to [x]. (🚫 Remove this paragraph before submitting your assignment.)
Submitted by: Marcela Billingslea
Estimated time spent: 45 hours spent in total
Deployed Application (optional):
- Display Movies
- Users can view a list of current movies from The Movie Database API.
- For each movie displayed, users can see its title, poster image, and votes.
- Users can load more current movies by clicking a button at the bottom of the list (page should not be reloaded).
- Search Functionality
- Users can search for movies and view the results in a grid.
- Users can clear results and view previous current movies displayed.
- Accessibility Features
- Website implements accessibility features (semantic HTML, color contrast, font sizing, alt tet for images).
- Responsive Design
- Website implements responsive web design.
- Movie Details
- Users can view more details about a movie in a popup, such as runtime in minutes, backdrop poster, release date, genres, and/or an overview.
- Sorting Options
- Users can click on a filter by drop down to sort product by type (alphabetic, release date, rating).
- Layout
- Website displays header, banner, search, movie grid, about, contact, and footer section.
- Deployment
- Website is deployed via Render.
- [] Embedded Movie Trailers
- [] Within the popup displaying a movie's details, users can play the movie trailer.
- Watched Checkbo
- For each movie displayed, users can mark the movie as watched.
- Favorite Button
- For each movie displayed, users can favorite the movie.
- Sidebar
- Users can open a sidebar
- The sidebar displays the user's favorited and watched movies
- Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?
The lab sessions provided a foundational understanding, but they were not comprehensive enough for me to feel fully prepared for the assignment. Specifically, I struggled with implementing certain features using React, as the labs did not delve deeply into React's unique methodologies. For instance, managing state and props effectively was challenging, and I found myself needing to conduct additional research to bridge these knowledge gaps.
- If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.
With more time, I would have enhanced the user interface by adding a sidebar for better navigation. Additionally, I planned to implement a default image placeholder for movies lacking posters, and perhaps include a humorous YouTube video as an alternative when trailers were unavailable. These features would have improved the user experience by providing continuity and engaging content even when certain data elements were missing.
- Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?
The project demo went relatively well; I was able to demonstrate the core functionalities despite some features not being fully polished. For example, the filters for favorite and watched movies did not operate smoothly during the demo, but I managed to show their functionality by reloading the page. One improvement I observed from my peers was the use of preset images for missing movie posters. This is a clever way to maintain visual consistency and something I would like to incorporate in future projects.
- Add any links to open-source libraries used in your project.
Timothie, Sammy, Ericka and Page!!!