emeka-ifejiagwa / flixster Goto Github PK

Submitted by: Chukwuemeka Ifejiagwa

Estimated time spent: 15 hours spent in total

Deployed Application (optional): Flixster Deployed Site

• User can view a list of current movies from The Movie Database API as a grid view
  • The grid element should have an id of movies-grid
  • Each movie wrapper element should have a class of movie-card
• For each movie displayed, user can see the following details:
  • Title - the element should have a class of movie-title
  • Image - the img element should have a class of movie-poster
  • Votes - the element should have a class of movie-votes
• User can load more current movies by clicking a button at the bottom of the list
  • The button should have an id of load-more-movies-btn.
  • When clicked, the page should not refresh.
  • New movies should simply be added to the bottom
• Allow users to search for movies and display them in a grid view
  • There should be a search input element with an id of search-input
  • Users should be able to type into the input
  • When a user hits 'Enter', it should send a search request to the movies API
  • The results from the search should be displayed on the page
  • There should be a close icon with an id of close-search-btn that exits the search, clears results, and shows the current movies displayed previously
• Website accounts for basic HTML/CSS accessibility features
• Website should be responsive

• Deploy website using GitHub Pages.
• Allow user to view more details about a movie within a popup.
• Improve the user experience through CSS & animation.
• Allow movie video trailers to be played using embedded YouTube
• Implement anything else that you can get done to improve the app functionality!

May take a few seconds to load

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

  Absolutely. The labs had a more hands-on and practical experience which prepared me for the project. The GIPHY lab exposed me to the procedures involved in fetching data from an API such as API key generation, user authentication and API endpoints. This was very useful in interacting with the movie database API. Additionally, this lab had a very similar feel to the project especially in the way the GIPHY images were replied. (as a grid although this project required more customizations) . The second lab did not necessarily come in handy for the general project specification but it helped me get familiar with the CSS syntax.
  Summarily, the labs were helpful in preparation for the project

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

  Given more time, I would have certainly done a couple of things differently (and I will certainly keep working on this project after it is graded). The main change I would make will be on the UI. I would make a cleaner and less buggy user interface to improve the user experience. Additionally, though I am an avid lover of darkmode, I would incorporate a toggle to switch to and fro from darkmode to lightmode. Moreover, I would have adjusted the responsiveness of the UI customized for various screen sizes. This would make the website more accessible to a wider audience.

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

  Well, I feel like given the timeline, I came up with a pretty decent UI. Thankfully, all the buttons were responsive and “worked” as they should have. However, I noticed that given a wider display, the website content had some rendering issues mainly for positioning and spacing. One of the demos today had a nice animation around the border of the movie posters and on hovering, the movie card became bigger. I “stole” the hovering idea and implemented it. However, I would definitely try a subtle animation to grab the attention of the user next time.

• None

SHOUTOUT TO THE INSTRUCTORS FOR THEIR CONTINUOUS CHECK IN. This helped me maintain a steady pace. It also helped me to determine project milestones as well as the instructors expectations on where I should be (projectwise) at a given time